HBuilder MUI开发：新手会遇到的各种坑汇总
相比于其他的Hybrid H5+APP平台，MUI也算是自成一派，居正自认为它是国内平台中最棒的之一，包括web和原生相结合在内的各方面细节都设计的很到位。但MUI有个缺点——开发文档不够详细，学习的过程中会遇到很多坑。在本文中，居正将自己一段时间来摸爬滚打的经验分享给大家，帮助大家少走点弯路。
如今，移动应用程序的开发已经不仅仅是传统意义上的iOS、Android双平台，Swift、Java两种开发方式。以WebUI+NativeUI混合架构的Hybrid APP已经渐渐为开发者和用户们所接受。例如知乎的Android客户端、网易云音乐的Mac和Android客户端等采用的都是Web APP开发架构。对开发者来说，只需要掌握HTML和Javascript就可以开发几乎任意平台的客户端，而且开发速率相比于采用原生语言来说大大提高。开发Hybrid APP的平台有很多，国外有谷歌官方的PWA，国内也有如apicloud、dcloud等厂商在做这类的产品。
居正最近也入了Hybrid APP这个坑，采用的是dcloud家的HBuilder+MUI平台，官方网站：http://dev.dcloud.net.cn/mui/。相比于其他的平台，MUI也算是自成一派，居正自认为它是国内平台中最棒的之一，包括web和原生相结合在内的各方面细节都设计的很到位。但MUI有个缺点——开发文档不够详细，学习的过程中会遇到很多坑。在本文中，居正将自己一段时间来摸爬滚打的经验分享给大家，帮助大家少走点弯路。
1.开发文档随时查
虽然文档不详细，但不看文档是万万不可的。由于MUI相关的文档分布的比较散，这里归结如下：
MUI框架文档：http://dev.dcloud.net.cn/mui/window/（打开窗口、事件处理等应用内的基本方法）
HTML5+API文档：http://www.html5plus.org/doc/h5p.html（通过js调用webview、摄像头、本地存储、相册等手机原生方法的类库）
2.MUI≠mui.css
MUI其实有两个意思，一个是MUI开发平台，一个是mui.css的web ui前端框架，采用的是ios风格（居正个人觉得挺难看的= =）。
你可以用自己的UI框架，这里推荐MaterializeCSS：http://www.materializecss.cn/。
采用自己的UI框架的话就不必写什么、标签（这些是为mui.css专门设计的），就和平常开发网页一样写、写即可。
建议新手不要用mui.css。
3.一个很好的开发实例
官方提供的开发实例是Hello MUI，但主要演示的是mui.css，注释也比较少。这里推荐自己互联网上找到的一个开发实例。
滴石APP：https://github.com/uikoo9/dishi
开发笔记：http://uikoo9.com/book/detail/3
阅读一下整套代码，会有很大帮助！
4.写法与顺序
前面都是推荐，现在正式开始踩坑。
html文件head里面的东西没声明清楚，或者引入js顺序不对的话，很容易出错。这里直接套格式（以采用了MaterializeCSS前端框架为例，每个html文件都同理）：
JQuery版本最好在1.10以上，必须在MUI核心js之后、所有自己的js之前引入。
5.mui变量和plus变量分别是什么
mui变量和plus变量都是在MUI核心js里面声明的。
mui变量中的方法是打开窗口、事件处理等应用内的基本方法。是dcloud平台自己制作的。
plus变量是通过js调用webview、摄像头、本地存储、相册等手机原生方法的类库。是HTML5+中国产业联盟统一制作的。它的文档里面各种变量各种方法一定要去看！
6.mui.init()、mui.plusReady()和子页面
在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法。
当然你不可能不用到HTML5+API，所以请把业务代码全部写到mui.plusReady()里面！
mui.init()用于页面初始化，也必须调用。
直接套格式（写在第3点提到的某个页面专一的js里面）：
mui.init();
mui.plusReady(function(){
//业务代码…
}
需要注意的是mui.init()和mui.plusReady()的执行分不清谁先谁后。所以如果你在mui.init()里面按照官方文档的说明用subpages创建了一个子页面，在mui.plusReady()里面是不能直接取得引用的（会报null错误）。
故不建议采用官方文档中的方法在mui.init()里面直接创建subpages！新手可以记住：mui.init()里面什么都不要写。
也不建议新手用官方推荐的什么双webview下拉加载上拉刷新来提高性能，比较麻烦而且容易出错，直接用JQuery插件实现。单webview性能足够了，一般的设备其实也都不会卡。
如果实在要用子窗口的话建议这样写：
mui.init();
mui.plusReady(function(){
var child=plus.webview.create(‘窗口URL’,’窗口ID’,{top:’60px’/*子窗口与父窗口顶部的距离，以免遮住父窗口顶部导航栏*/});//直接用H5+API创建窗口
plus.webview.currentWebview().append(child);//将创建的子窗口添加到父窗口
}
添加完子窗口后，父窗口原来位置上面的东西全部会被挡住。
实例：MUI内置浏览器
7.事件处理，用这一个封装就够了
MUI文档中的事件管理有没有让你晕头转向？这里直接给一个万能封装，用它就够了（放在第3点提到的全局js里面）：
function myEvent(obj, event, func){
$(document).off(event, obj).on(event, obj, func);
};
myEvent方法有三个传参。obj是一个字符串，和JQuery选择器传入的参数一模一样。event是一个字符串，写事件类型，一般如果是点击的话就写tap（不要写click，习惯要改过来）。func传入一个匿名方法，里面写业务代码。
使用方法，以点击id为hello的按钮弹出警告框为例：
myEvent(‘#hello’,’tap’,function(){
alert(‘你好’);
});
8.页面间传参，用这一个套路就够了
MUI的页面间传参有各种各样的方法。这里推荐一个最简单最高效的：用extras属性传参。
A页面打开B页面（text.html）代码：
mui.openWindow({
url:’text.html’,
id:’text01′,
extras:{
content:’我是内容’,
title:’我是标题’
}
});
顺便提一下mui.openWindow中的两个必备参数：
url：目标页面相对于此页面的地址（不是相对于业务处理js的地址）
id：字符串数据，打开窗口的唯一标识符。如果打开了一个窗口没有销毁，在其他地方又采用此id打开窗口的话就会直接跳到先前打开的那个窗口，并且不会执行里面的mui.plusReady()代码。
B页面接收A页面传来的两个参数（必须写在mui.plusReady()里面）：
var content=plus.webview.currentWebview().content;
var title=plus.webview.currentWebview().title;
需要注意的是，extras里面的取名不能取mui.openWindow中存在的参数，例如id、url这样的，因为调用的方法都是【plus.webview.currentWebview().名字】。否则MUI就不知道你想调用的是这个窗口本身的属性还是传过来的参数。这一点应该算是MUI的设计缺陷。
9.网络请求必须用mui.ajax，调试必须用真机或模拟器
你可能习惯了JQuery的$.ajax方法，但在mui开发里面必须用mui.ajax，否则会出现跨域错误问题。调试的时候不要用HBuilder自带的内置浏览器调试，必须用真机或模拟器中的HBuilder基座调试，否则也会跨域报错。
mui.ajax和$.ajax参数基本一样，返回的是一个XMLHttpRequest对象。
10.manifest.json中的build版本号要手动改
版本号有两种，一种是应用版本名称（如：1.2），一种是build版本号（如：65）。应用市场判断APP有没有升级用的是build版本号而不是应用版本名称。但HBuilder中build版本号并不是自动递增的，需要手动改。如果没改的话应用升级发布到应用市场里面会出现奇怪的错误。
打开manifest.json切换到代码视图，找到：
其中name即为应用版本名称，code即为build版本号。每次发布应用的时候code值要改成比上次大的数。
以上是为大家整理的若干条新手易错点，希望大家在开发中少走弯路！
本文首发于淀粉月刊：https://dfkan.com
原作者：居正
发布时间：2018年7月11日
