开始使用 HBuilder 和 Mui

转自：http://ask.dcloud.net.cn/article/240

好吧，在比较了 Codenameone 和 HBuilder 以后，俺反复考虑后，终于还是决定使用 HBuilder 这个东东；
简单说说 Codenameone 吧，用 java 进行开发的跨平台（注意，目前支持 android, ios, wp, BlackBerry) 的框架，首先吸引我的是它的跨平台移动开发能力，其次吧，编译型的语言比较好进行TDD开发，第三，有一个可视化的界面设计环境以及界面设计和处理代码相分离的处理逻辑，第四，无需虚拟机直接可以在本地的JAVA IDE中运行进行测试和调试；
但是，讨厌的几个问题是，1.需要翻墙， 2.文档全E文, 3. 除了API之外，基本没有文档；
好吧，闲话少说，开始使用 HBuilder;

俺就不吐槽文档MUI文档缺少的问题了；（建议首先一定要仔细看 mui 的那个文档至少3遍，对于里面的所有变量定义有一个大致印象，否则，对于比较喜欢寻根究底的人(比如说我)来说，会比较辛苦);
先创建一个 HelloMUI 的例子项目；在手机上运行,很好；在AVD的模拟器上运行，也很好;
用 chrome 浏览器连接真机想Inspect进行调试，已经看到打开哪些网页l了，但就是Inspect不了，好吧，我的手机是红米,目前是4.2，需要4.4.2才支持；
用 chrome 浏览器连接AVD的虚拟机来Inspect进行调试，同样看到打开哪些网页l了，但就是Inspect不了，好吧，翻墙，给 chrome安装上ADB插件，还是 Inspect不了；
好吧，安装上了一个号称快得多的Genymotion,再下了一个4.4.4的镜像,终于可以用chrome注入进行代码调试了；
但是，谁说额Genymotion速度要快的啊？除了虚拟机启动速度快那么一点意外，
俺的I7、8G内存跑HelloMui无论是启动速度还是响应速度，比起安装上 InterHAXL 再加 Inter ATOM 的虚拟机速度慢的实在太多了；
好吧，俺忍。。。。等魅蓝Note2 出来俺就换手机；

开始仔细看 index.html 的代码和 List.html 的代码；
好吧，目前为止，可以知道 mui.init 里面那个object带的属性有:
swipeBack:true //启用右滑关闭功能
statusBarBackground: '#f7f7f7',
gestureConfig:{
doubletap:true
},
subpages: [{
id: 'list',
url: 'list.html',
styles: {
top: '45px',
bottom: 0,
bounce: 'vertical'
}
},
styles:{ .... }
那么 statusBarBackground 这个参数是干啥的呢？貌似是状态栏的背景颜色，有没有其他类似的其他属性呢？不知道;
甚至， statusBarBackground 这个属性在 MUI自己的API文档里提都没有提到过，是我在 index.html的第27行里面翻出来的；

好吧，继续往下看， mui.os 这个又什么东东？继续翻API,很遗憾，还是没有；
看 HBuilder的提示, mui里面有 ajaxSetting, data, fn, os, gestures, options 。等几个属性，好吧，大家暂时记得 mui.os 里面记录了操作系统的一些环境变量的定义就可以了；至于其他属性，大家就当没有看到吧；

那个弹出菜单因为俺估计用不到，所以嘛，就跳过了；

继续往下看，到了显示关于页面的处理了；
俺贴出代码吧，
document.getElementById('info').addEventListener('tap', function() {
if (subWebview == null) {
//获取共用父窗体
template = plus.webview.getWebviewById("default-main");
}
if(template){
subWebview = template.children()[0];

subWebview.loadURL('examples/info.html');
//修改共用父模板的标题
mui.fire(template, 'updateHeader', {
title: '关于XXXX',
showMenu: false
});
template.show('slide-in-right', 150);
}
});

plus.webview.getWebviewById("default-main"); 这个 default-main 是啥东东？？
开 MUI API文档，没有；看 H5 Api文档，还是没有；整个项目查找, 稀奇了，还是没有：
好吧，俺承认失败了，姑且认为 default-main 是整个程序第一个加载的页面吧；（这个看法是错误的，稍后会说明);

继续往下看，没有其他需要注意的地方了；真的没有了？

template.children()[0] 这个是啥东东，问题回到原点，归根结底还是需要知道　plus.webview.getWebviewById("default-main")　是什么东东；

暂时放下这个问题， subWebview.loadURL('examples/info.html'); 这个没有疑问；
//修改共用父模板的标题
mui.fire(template, 'updateHeader', {
title: '关于XXXX',
showMenu: false
});
template.show('slide-in-right', 150);

很简单吧？没有这么简单；大家打开 examples/info.html 这个页面，会发现里面也定义了 Header，俺比较偏执，总觉得这儿不应该定义 Header,于是就把 info.html 页面里面的 Header 给注释掉了，呵呵，果然标题照样给改掉了；
说明什么？说明， mui.fire(template, 'updateHeader' 这个修改的不是 info.html 里面 Header 定义的标题；

好吧，打开关于页面，再按 Back 按钮，首页标题还是 Hello mui,
说明什么？说明，mui.fire(template, 'updateHeader' 这个修改的不是 index.html 里面 Header 定义的标题；

那么到底修改的是哪儿的Header的内容？
再次打开关于页面，可以发现页面切换时会显示加载中这三个字；本来我以为这个是 mui 在页面切换时的自动提示，但还是在整个项目中搜了一下，居然发现在 example/template.html 中有这个三个字，怀着好奇的心情，俺把这三个字改成了 TMD ，结果，呵呵，页面切换时果然显示了 TMD ；

好吧，俺服了；继续找 template.html 在哪儿被引用；

list.html 中有这样的定义: getTemplate('default', 'examples/template.html'); 再看 getTemplate的方法定义,

var headerWebview = mui.preload({
url:header,
id:name "-main",
styles:{
popGesture:"hide",
},
extras:{
mType: 'main'
}
});

终于，俺们找到了 default-main 是在哪儿定义的了；
再看下面的代码，headerWebview.append(subWebview); 终于也找到 template.children()[0] 是啥东东了。。。

说到这儿，大家以为完了？哪有这么简单；

subWebview.loadURL('examples/info.html'); 大家还记得吧，上面我把 info.html 的 Header部分注释掉了，现在俺把 Header 给改回来，

那么这个 subWebview 加载的页面应该也包含有一个 Header, 可是这个 info.html 里面的这个 Header 无论如何也不会显示出来？

现在，问题来了，这个 Header 到底到哪儿去了？

暂时就这样了；

经过这个这个分析，俺有些怀疑自己的选择了。。。

7 赞