MUI開發大全

最近很久沒有更新部落格了，因為一直在學習前端h5 手機app的開發。曾經一度覺得自己css和js學得不錯，進入到前端領域後才發現水很深~，寫代碼時HBuilder和VS混用，HBuilder的快捷鍵和代碼提示以及真機調試友善，但是錯誤提示和代碼格式化是硬傷，VS的前端報錯提示很智能，代碼格式化很順暢，将二者的優點集合起來。現在在用MUI做app開發，就把工作中用到的以及遇到的坑都一一記錄下來，待項目完工，再回過頭來看一下......

常見問題

固定定位在底部的輸入框點選輸入時被鍵盤蓋住了，整體沒有上移

雲端生成ios越獄包不能使用apns離線推送功能

js知識充電

if語句隻寫一個參數是什麼意思

要知道if裡面的傳回值是true或是false，那麼隻要括号裡随便一個數都可以，

a=0，那麼if條件就是false了

布爾值，javascript中以下值會被轉換為false

false
undefined
null
-0
NaN
""
''

js中 o = o || {};是什麼意思

o = o || {} 表示：如果o為null或undefined，則将o初始化空對象（即{}），否則o不變。目的是防止o為null或未定義的錯誤。其中：||表示或操作，第一個條件為真，則結果為真而不需要執行第二個條件；否則執行第二個條件，等價于以下代碼：

if(o)
    o = o;
else
    o = {};

HBuilder使用安卓模拟器

安卓模拟器有很多，我這裡以夜神模拟器為例。使用安卓夜神模拟器來運作手機app的時候，先要配置HUuilder，配置方式：HBuilder的工具--》選項--》運作--》設定Web伺服器--》HBuilder--》第三方Android模拟器端口：将此處的端口改為62001。因為夜神模拟器的端口就是62001。

條件允許的情況下，建議直接真機調試，快很多。

HBuilder檢測不到夜神模拟器 -- 解決辦法

有時候經常出現HBuilder和夜神模拟器都啟動了，建立了連結，但是檢測不到夜神模拟器的情況。

1、我們可以試着點選一下夜神模拟器界面，然後再在HBuilder中打開一個頁面

2、如果1還是不行，打開cmd執行指令

打開HBuilder的安裝目錄，進入到tools\adbs目錄中，例：C:\Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs

cd \Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs
cd \Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs
cd \Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs

app首頁底部導航

參考：tab頁籤示例教程-基于subnview模式的原生tab（含底部凸起大圖示）

這個官網提供了具體例子，下載下傳位址：https://github.com/dcloudio/mui/tree/master/examples/nativeTab

我做的界面Demo

個人感覺：雖然快是快了，但是有一個嚴重的缺陷，那就是底部無法動态配置。是以我最終抛棄了這種方式，因為界面所有的菜單子產品都是可以在PC背景進行配置的，我最終用vue.js來做資料綁定。

注意首頁應用了響應式布局，熟悉rem、em、px之間的差別。引入了第三方js：flexible.js

快速申請ios打包ipa證書.p12和.mobileprovision（無需Mac）

http://ask.dcloud.net.cn/article/1257

安裝後每次打開都出現請将Hbuilder移至其他盤符以及C槽配置檔案不可寫入的提示

右鍵——管理者權限運作

或者進行如下配置：

在mui-bar mui-bar-tab子頁面的中使用echarts，總是有時顯示有時不顯示

必須在頁面中指定報表容器的寬、高，或者最小寬高，在css樣式檔案中指定寬高有時會無效。

或者你添加窗體的大小變更監聽事件，重繪報表，如下所示：

var lineChart = echarts.init(charts);
lineChart.setOption(chartOption);
window.onresize = function () {
   lineChart.resize();
}

補充：如果是底部頁籤切換的時候，預設會加載第一頁，是以上面的方法有效。

但是在切換到第2個Tab時，同樣會出現不顯示或者黑屏的現象，需要在mui.plusReady中做如下處理：

mui.plusReady(function() {
 var nw = plus.webview.getWebviewById("pages/energy.html"); // 這裡pages/energy.html是預設的頁籤id
 nw.addEventListener("show", function(e) {
 lineChart.resize();
 }, false);
 });

此問題困擾了許久。

app消息推送

參考教程：http://m.blog.csdn.net/tiger_gy/article/details/72922215

手寫簽名

源碼位址：https://github.com/xuyongsky123/canvasSignature.git

源碼位址：https://github.com/yulusjjc/sign

HBuilder控制台不顯示日志

我用的魅族手機，進入工程模式：*#*#3646633#*#*，開啟調試模式日志，關于其它手機可以網上查找進入工程模式的方式。

如何用Fiddler對Android應用進行抓包

對app中的ajax請求進行抓包，配置教程如下：

http://jingyan.baidu.com/article/03b2f78c7b6bb05ea237aed2.html

mui 搜尋框在pad上需要點選兩次才能彈出鍵盤

在mui-search外面包含了mui-inner-wrap之後就會出現這個bug。别的控件不知道有沒有這個現象，我用到的就是這個。原理應該是mui-placehold絕對定位之後在iOS端産生事件穿透導緻的。

解決辦法：

.mui-search .mui-placeholder {

pointer-events: none;

}

持續更新中......

部落格位址：

http://www.cnblogs.com/jiekzou/

部落格版權：

本文以學習、研究和分享為主，歡迎轉載，但必須在文章頁面明顯位置給出原文連接配接。

如果文中有不妥或者錯誤的地方還望高手的你指出，以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下！如果你有更好的建議，不如留言一起讨論，共同進步！

再次感謝您耐心的讀完本篇文章。

其它：

.net-QQ群4：612347965

java-QQ群：805741535

H5-QQ群：773766020

我的拙作《ASP.NET MVC企業級實戰》《H5+移動應用實戰開發》

《Vue.js 2.x實踐指南》

《JavaScript實用教程》

《Node+MongoDB+React 項目實戰開發》

已經出版，希望大家多多支援！