相比于其他的Hybrid H5+APP平臺惧盹，MUI也算是自成一派捉撮，居正自認為它是國內(nèi)平臺中最棒的之一蔓彩，包括web和原生相結(jié)合在內(nèi)的各方面細節(jié)都設(shè)計的很到位恳守。但MUI有個缺點——開發(fā)文檔不夠詳細榄审，學(xué)習(xí)的過程中會遇到很多坑砌们。在本文中，居正將自己一段時間來摸爬滾打的經(jīng)驗分享給大家搁进，幫助大家少走點彎路浪感。
如今，移動應(yīng)用程序的開發(fā)已經(jīng)不僅僅是傳統(tǒng)意義上的iOS饼问、Android雙平臺影兽，Swift、Java兩種開發(fā)方式莱革。以WebUI+NativeUI混合架構(gòu)的Hybrid APP已經(jīng)漸漸為開發(fā)者和用戶們所接受峻堰。例如知乎的Android客戶端、網(wǎng)易云音樂的Mac和Android客戶端等采用的都是Web APP開發(fā)架構(gòu)盅视。對開發(fā)者來說捐名，只需要掌握HTML和Javascript就可以開發(fā)幾乎任意平臺的客戶端，而且開發(fā)速率相比于采用原生語言來說大大提高闹击。開發(fā)Hybrid APP的平臺有很多镶蹋，國外有谷歌官方的PWA，國內(nèi)也有如apicloud赏半、dcloud等廠商在做這類的產(chǎn)品梅忌。
居正最近也入了Hybrid APP這個坑，采用的是dcloud家的HBuilder+MUI平臺除破，官方網(wǎng)站：http://dev.dcloud.net.cn/mui/牧氮。相比于其他的平臺，MUI也算是自成一派瑰枫，居正自認為它是國內(nèi)平臺中最棒的之一踱葛，包括web和原生相結(jié)合在內(nèi)的各方面細節(jié)都設(shè)計的很到位。但MUI有個缺點——開發(fā)文檔不夠詳細光坝，學(xué)習(xí)的過程中會遇到很多坑尸诽。在本文中，居正將自己一段時間來摸爬滾打的經(jīng)驗分享給大家盯另，幫助大家少走點彎路性含。
1.開發(fā)文檔隨時查
雖然文檔不詳細，但不看文檔是萬萬不可的鸳惯。由于MUI相關(guān)的文檔分布的比較散商蕴，這里歸結(jié)如下：
MUI框架文檔：http://dev.dcloud.net.cn/mui/window/（打開窗口叠萍、事件處理等應(yīng)用內(nèi)的基本方法）
HTML5+API文檔：http://www.html5plus.org/doc/h5p.html（通過js調(diào)用webview、攝像頭绪商、本地存儲苛谷、相冊等手機原生方法的類庫）
2.MUI≠mui.css
MUI其實有兩個意思，一個是MUI開發(fā)平臺格郁，一個是mui.css的web ui前端框架腹殿，采用的是ios風(fēng)格（居正個人覺得挺難看的= =）。
你可以用自己的UI框架例书，這里推薦MaterializeCSS：http://www.materializecss.cn/锣尉。
采用自己的UI框架的話就不必寫什么、標簽（這些是為mui.css專門設(shè)計的）决采，就和平常開發(fā)網(wǎng)頁一樣寫自沧、寫即可。
建議新手不要用mui.css织狐。
3.一個很好的開發(fā)實例
官方提供的開發(fā)實例是Hello MUI暂幼，但主要演示的是mui.css，注釋也比較少移迫。這里推薦自己互聯(lián)網(wǎng)上找到的一個開發(fā)實例旺嬉。
滴石APP：https://github.com/uikoo9/dishi
開發(fā)筆記：http://uikoo9.com/book/detail/3
閱讀一下整套代碼，會有很大幫助厨埋！
4.寫法與順序
前面都是推薦邪媳，現(xiàn)在正式開始踩坑。
html文件head里面的東西沒聲明清楚荡陷，或者引入js順序不對的話雨效，很容易出錯。這里直接套格式（以采用了MaterializeCSS前端框架為例废赞，每個html文件都同理）：
JQuery版本最好在1.10以上徽龟，必須在MUI核心js之后、所有自己的js之前引入唉地。
5.mui變量和plus變量分別是什么
mui變量和plus變量都是在MUI核心js里面聲明的据悔。
mui變量中的方法是打開窗口、事件處理等應(yīng)用內(nèi)的基本方法耘沼。是dcloud平臺自己制作的极颓。
plus變量是通過js調(diào)用webview、攝像頭群嗤、本地存儲菠隆、相冊等手機原生方法的類庫。是HTML5+中國產(chǎn)業(yè)聯(lián)盟統(tǒng)一制作的。它的文檔里面各種變量各種方法一定要去看骇径！
6.mui.init()躯肌、mui.plusReady()和子頁面
在app開發(fā)中，若要使用HTML5+擴展api既峡，必須等plusready事件發(fā)生后才能正常使用羡榴，mui將該事件封裝成了mui.plusReady()方法碧查。
當(dāng)然你不可能不用到HTML5+API运敢，所以請把業(yè)務(wù)代碼全部寫到mui.plusReady()里面！
mui.init()用于頁面初始化嚷辅，也必須調(diào)用概而。
直接套格式（寫在第3點提到的某個頁面專一的js里面）：
mui.init();
mui.plusReady(function(){
//業(yè)務(wù)代碼…
}
需要注意的是mui.init()和mui.plusReady()的執(zhí)行分不清誰先誰后谦去。所以如果你在mui.init()里面按照官方文檔的說明用subpages創(chuàng)建了一個子頁面，在mui.plusReady()里面是不能直接取得引用的（會報null錯誤）卦方。
故不建議采用官方文檔中的方法在mui.init()里面直接創(chuàng)建subpages！新手可以記滋┘选：mui.init()里面什么都不要寫盼砍。
也不建議新手用官方推薦的什么雙webview下拉加載上拉刷新來提高性能，比較麻煩而且容易出錯逝她，直接用JQuery插件實現(xiàn)浇坐。單webview性能足夠了，一般的設(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)建的子窗口添加到父窗口
}
添加完子窗口后，父窗口原來位置上面的東西全部會被擋住臀晃。
7.事件處理觉渴，用這一個封裝就夠了
MUI文檔中的事件管理有沒有讓你暈頭轉(zhuǎn)向？這里直接給一個萬能封裝徽惋，用它就夠了（放在第3點提到的全局js里面）：
function myEvent(obj, event, func){
$(document).off(event, obj).on(event, obj, func);
};
myEvent方法有三個傳參案淋。obj是一個字符串，和JQuery選擇器傳入的參數(shù)一模一樣险绘。event是一個字符串踢京，寫事件類型，一般如果是點擊的話就寫tap（不要寫click隆圆，習(xí)慣要改過來）漱挚。func傳入一個匿名方法，里面寫業(yè)務(wù)代碼渺氧。
使用方法旨涝，以點擊id為hello的按鈕彈出警告框為例：
myEvent(‘#hello’,’tap’,function(){
alert(‘你好’);
});
8.頁面間傳參，用這一個套路就夠了
MUI的頁面間傳參有各種各樣的方法。這里推薦一個最簡單最高效的：用extras屬性傳參白华。
A頁面打開B頁面（text.html）代碼：
mui.openWindow({
url:’text.html’,
id:’text01′,
extras:{
content:’我是內(nèi)容’,
title:’我是標題’
}
});
順便提一下mui.openWindow中的兩個必備參數(shù)：
url：目標頁面相對于此頁面的地址（不是相對于業(yè)務(wù)處理js的地址）
id：字符串?dāng)?shù)據(jù)慨默，打開窗口的唯一標識符。如果打開了一個窗口沒有銷毀弧腥，在其他地方又采用此id打開窗口的話就會直接跳到先前打開的那個窗口厦取，并且不會執(zhí)行里面的mui.plusReady()代碼。
B頁面接收A頁面?zhèn)鱽淼膬蓚€參數(shù)（必須寫在mui.plusReady()里面）：
var content=plus.webview.currentWebview().content;
var title=plus.webview.currentWebview().title;
需要注意的是管搪，extras里面的取名不能取mui.openWindow中存在的參數(shù)虾攻，例如id、url這樣的更鲁，因為調(diào)用的方法都是【plus.webview.currentWebview().名字】霎箍。否則MUI就不知道你想調(diào)用的是這個窗口本身的屬性還是傳過來的參數(shù)。這一點應(yīng)該算是MUI的設(shè)計缺陷澡为。
9.網(wǎng)絡(luò)請求必須用mui.ajax漂坏，調(diào)試必須用真機或模擬器
你可能習(xí)慣了JQuery的$.ajax方法，但在mui開發(fā)里面必須用mui.ajax媒至，否則會出現(xiàn)跨域錯誤問題顶别。調(diào)試的時候不要用HBuilder自帶的內(nèi)置瀏覽器調(diào)試，必須用真機或模擬器中的HBuilder基座調(diào)試拒啰，否則也會跨域報錯驯绎。
mui.ajax和$.ajax參數(shù)基本一樣，返回的是一個XMLHttpRequest對象图呢。
10.manifest.json中的build版本號要手動改
版本號有兩種条篷，一種是應(yīng)用版本名稱（如：1.2），一種是build版本號（如：65）蛤织。應(yīng)用市場判斷APP有沒有升級用的是build版本號而不是應(yīng)用版本名稱赴叹。但HBuilder中build版本號并不是自動遞增的，需要手動改指蚜。如果沒改的話應(yīng)用升級發(fā)布到應(yīng)用市場里面會出現(xiàn)奇怪的錯誤乞巧。
打開manifest.json切換到代碼視圖，找到：
其中name即為應(yīng)用版本名稱摊鸡，code即為build版本號绽媒。每次發(fā)布應(yīng)用的時候code值要改成比上次大的數(shù)。
以上是為大家整理的若干條新手易錯點免猾，希望大家在開發(fā)中少走彎路是辕！
本文首發(fā)于淀粉月刊：https://dfkan.com
原作者：居正
發(fā)布時間：2018年7月11日
