相比于其他的Hybrid H5+APP平臺(tái)，MUI也算是自成一派，居正自認(rèn)為它是國(guó)內(nèi)平臺(tái)中最棒的之一，包括web和原生相結(jié)合在內(nèi)的各方面細(xì)節(jié)都設(shè)計(jì)的很到位。但MUI有個(gè)缺點(diǎn)——開(kāi)發(fā)文檔不夠詳細(xì)，學(xué)習(xí)的過(guò)程中會(huì)遇到很多坑。在本文中，居正將自己一段時(shí)間來(lái)摸爬滾打的經(jīng)驗(yàn)分享給大家，幫助大家少走點(diǎn)彎路。
如今，移動(dòng)應(yīng)用程序的開(kāi)發(fā)已經(jīng)不僅僅是傳統(tǒng)意義上的iOS、Android雙平臺(tái)，Swift、Java兩種開(kāi)發(fā)方式。以WebUI+NativeUI混合架構(gòu)的Hybrid APP已經(jīng)漸漸為開(kāi)發(fā)者和用戶們所接受。例如知乎的Android客戶端、網(wǎng)易云音樂(lè)的Mac和Android客戶端等采用的都是Web APP開(kāi)發(fā)架構(gòu)。對(duì)開(kāi)發(fā)者來(lái)說(shuō)，只需要掌握HTML和Javascript就可以開(kāi)發(fā)幾乎任意平臺(tái)的客戶端，而且開(kāi)發(fā)速率相比于采用原生語(yǔ)言來(lái)說(shuō)大大提高。開(kāi)發(fā)Hybrid APP的平臺(tái)有很多，國(guó)外有谷歌官方的PWA，國(guó)內(nèi)也有如apicloud、dcloud等廠商在做這類的產(chǎn)品。
居正最近也入了Hybrid APP這個(gè)坑，采用的是dcloud家的HBuilder+MUI平臺(tái)，官方網(wǎng)站：http://dev.dcloud.net.cn/mui/。相比于其他的平臺(tái)，MUI也算是自成一派，居正自認(rèn)為它是國(guó)內(nèi)平臺(tái)中最棒的之一，包括web和原生相結(jié)合在內(nèi)的各方面細(xì)節(jié)都設(shè)計(jì)的很到位。但MUI有個(gè)缺點(diǎn)——開(kāi)發(fā)文檔不夠詳細(xì)，學(xué)習(xí)的過(guò)程中會(huì)遇到很多坑。在本文中，居正將自己一段時(shí)間來(lái)摸爬滾打的經(jīng)驗(yàn)分享給大家，幫助大家少走點(diǎn)彎路。
1.開(kāi)發(fā)文檔隨時(shí)查
雖然文檔不詳細(xì)，但不看文檔是萬(wàn)萬(wàn)不可的。由于MUI相關(guān)的文檔分布的比較散，這里歸結(jié)如下：
MUI框架文檔：http://dev.dcloud.net.cn/mui/window/（打開(kāi)窗口、事件處理等應(yīng)用內(nèi)的基本方法）
HTML5+API文檔：http://www.html5plus.org/doc/h5p.html（通過(guò)js調(diào)用webview、攝像頭、本地存儲(chǔ)、相冊(cè)等手機(jī)原生方法的類庫(kù)）
2.MUI≠mui.css
MUI其實(shí)有兩個(gè)意思，一個(gè)是MUI開(kāi)發(fā)平臺(tái)，一個(gè)是mui.css的web ui前端框架，采用的是ios風(fēng)格（居正個(gè)人覺(jué)得挺難看的= =）。
你可以用自己的UI框架，這里推薦MaterializeCSS：http://www.materializecss.cn/。
采用自己的UI框架的話就不必寫什么、標(biāo)簽（這些是為mui.css專門設(shè)計(jì)的），就和平常開(kāi)發(fā)網(wǎng)頁(yè)一樣寫、寫即可。
建議新手不要用mui.css。
3.一個(gè)很好的開(kāi)發(fā)實(shí)例
官方提供的開(kāi)發(fā)實(shí)例是Hello MUI，但主要演示的是mui.css，注釋也比較少。這里推薦自己互聯(lián)網(wǎng)上找到的一個(gè)開(kāi)發(fā)實(shí)例。
滴石APP：https://github.com/uikoo9/dishi
開(kāi)發(fā)筆記：http://uikoo9.com/book/detail/3
閱讀一下整套代碼，會(huì)有很大幫助！
4.寫法與順序
前面都是推薦，現(xiàn)在正式開(kāi)始踩坑。
html文件head里面的東西沒(méi)聲明清楚，或者引入js順序不對(duì)的話，很容易出錯(cuò)。這里直接套格式（以采用了MaterializeCSS前端框架為例，每個(gè)html文件都同理）：
JQuery版本最好在1.10以上，必須在MUI核心js之后、所有自己的js之前引入。
5.mui變量和plus變量分別是什么
mui變量和plus變量都是在MUI核心js里面聲明的。
mui變量中的方法是打開(kāi)窗口、事件處理等應(yīng)用內(nèi)的基本方法。是dcloud平臺(tái)自己制作的。
plus變量是通過(guò)js調(diào)用webview、攝像頭、本地存儲(chǔ)、相冊(cè)等手機(jī)原生方法的類庫(kù)。是HTML5+中國(guó)產(chǎn)業(yè)聯(lián)盟統(tǒng)一制作的。它的文檔里面各種變量各種方法一定要去看！
6.mui.init()、mui.plusReady()和子頁(yè)面
在app開(kāi)發(fā)中，若要使用HTML5+擴(kuò)展api，必須等plusready事件發(fā)生后才能正常使用，mui將該事件封裝成了mui.plusReady()方法。
當(dāng)然你不可能不用到HTML5+API，所以請(qǐng)把業(yè)務(wù)代碼全部寫到mui.plusReady()里面！
mui.init()用于頁(yè)面初始化，也必須調(diào)用。
直接套格式（寫在第3點(diǎn)提到的某個(gè)頁(yè)面專一的js里面）：
mui.init();
mui.plusReady(function(){
//業(yè)務(wù)代碼…
}
需要注意的是mui.init()和mui.plusReady()的執(zhí)行分不清誰(shuí)先誰(shuí)后。所以如果你在mui.init()里面按照官方文檔的說(shuō)明用subpages創(chuàng)建了一個(gè)子頁(yè)面，在mui.plusReady()里面是不能直接取得引用的（會(huì)報(bào)null錯(cuò)誤）。
故不建議采用官方文檔中的方法在mui.init()里面直接創(chuàng)建subpages！新手可以記住：mui.init()里面什么都不要寫。
也不建議新手用官方推薦的什么雙webview下拉加載上拉刷新來(lái)提高性能，比較麻煩而且容易出錯(cuò)，直接用JQuery插件實(shí)現(xiàn)。單webview性能足夠了，一般的設(shè)備其實(shí)也都不會(huì)卡。
如果實(shí)在要用子窗口的話建議這樣寫：
mui.init();
mui.plusReady(function(){
var child=plus.webview.create(‘窗口URL’,’窗口ID’,{top:’60px’/*子窗口與父窗口頂部的距離，以免遮住父窗口頂部導(dǎo)航欄*/});//直接用H5+API創(chuàng)建窗口
plus.webview.currentWebview().append(child);//將創(chuàng)建的子窗口添加到父窗口
}
添加完子窗口后，父窗口原來(lái)位置上面的東西全部會(huì)被擋住。
實(shí)例：MUI內(nèi)置瀏覽器
7.事件處理，用這一個(gè)封裝就夠了
MUI文檔中的事件管理有沒(méi)有讓你暈頭轉(zhuǎn)向？這里直接給一個(gè)萬(wàn)能封裝，用它就夠了（放在第3點(diǎn)提到的全局js里面）：
function myEvent(obj, event, func){
$(document).off(event, obj).on(event, obj, func);
};
myEvent方法有三個(gè)傳參。obj是一個(gè)字符串，和JQuery選擇器傳入的參數(shù)一模一樣。event是一個(gè)字符串，寫事件類型，一般如果是點(diǎn)擊的話就寫tap（不要寫click，習(xí)慣要改過(guò)來(lái)）。func傳入一個(gè)匿名方法，里面寫業(yè)務(wù)代碼。
使用方法，以點(diǎn)擊id為hello的按鈕彈出警告框?yàn)槔?/p>
myEvent(‘#hello’,’tap’,function(){
alert(‘你好’);
});
8.頁(yè)面間傳參，用這一個(gè)套路就夠了
MUI的頁(yè)面間傳參有各種各樣的方法。這里推薦一個(gè)最簡(jiǎn)單最高效的：用extras屬性傳參。
A頁(yè)面打開(kāi)B頁(yè)面（text.html）代碼：
mui.openWindow({
url:’text.html’,
id:’text01′,
extras:{
content:’我是內(nèi)容’,
title:’我是標(biāo)題’
}
});
順便提一下mui.openWindow中的兩個(gè)必備參數(shù)：
url：目標(biāo)頁(yè)面相對(duì)于此頁(yè)面的地址（不是相對(duì)于業(yè)務(wù)處理js的地址）
id：字符串?dāng)?shù)據(jù)，打開(kāi)窗口的唯一標(biāo)識(shí)符。如果打開(kāi)了一個(gè)窗口沒(méi)有銷毀，在其他地方又采用此id打開(kāi)窗口的話就會(huì)直接跳到先前打開(kāi)的那個(gè)窗口，并且不會(huì)執(zhí)行里面的mui.plusReady()代碼。
B頁(yè)面接收A頁(yè)面?zhèn)鱽?lái)的兩個(gè)參數(shù)（必須寫在mui.plusReady()里面）：
var content=plus.webview.currentWebview().content;
var title=plus.webview.currentWebview().title;
需要注意的是，extras里面的取名不能取mui.openWindow中存在的參數(shù)，例如id、url這樣的，因?yàn)檎{(diào)用的方法都是【plus.webview.currentWebview().名字】。否則MUI就不知道你想調(diào)用的是這個(gè)窗口本身的屬性還是傳過(guò)來(lái)的參數(shù)。這一點(diǎn)應(yīng)該算是MUI的設(shè)計(jì)缺陷。
9.網(wǎng)絡(luò)請(qǐng)求必須用mui.ajax，調(diào)試必須用真機(jī)或模擬器
你可能習(xí)慣了JQuery的$.ajax方法，但在mui開(kāi)發(fā)里面必須用mui.ajax，否則會(huì)出現(xiàn)跨域錯(cuò)誤問(wèn)題。調(diào)試的時(shí)候不要用HBuilder自帶的內(nèi)置瀏覽器調(diào)試，必須用真機(jī)或模擬器中的HBuilder基座調(diào)試，否則也會(huì)跨域報(bào)錯(cuò)。
mui.ajax和$.ajax參數(shù)基本一樣，返回的是一個(gè)XMLHttpRequest對(duì)象。
10.manifest.json中的build版本號(hào)要手動(dòng)改
版本號(hào)有兩種，一種是應(yīng)用版本名稱（如：1.2），一種是build版本號(hào)（如：65）。應(yīng)用市場(chǎng)判斷APP有沒(méi)有升級(jí)用的是build版本號(hào)而不是應(yīng)用版本名稱。但HBuilder中build版本號(hào)并不是自動(dòng)遞增的，需要手動(dòng)改。如果沒(méi)改的話應(yīng)用升級(jí)發(fā)布到應(yīng)用市場(chǎng)里面會(huì)出現(xiàn)奇怪的錯(cuò)誤。
打開(kāi)manifest.json切換到代碼視圖，找到：
其中name即為應(yīng)用版本名稱，code即為build版本號(hào)。每次發(fā)布應(yīng)用的時(shí)候code值要改成比上次大的數(shù)。
以上是為大家整理的若干條新手易錯(cuò)點(diǎn)，希望大家在開(kāi)發(fā)中少走彎路！
本文首發(fā)于淀粉月刊：https://dfkan.com
原作者：居正
發(fā)布時(shí)間：2018年7月11日
