HBuilder MUI开发:新手会遇到的各种坑汇总

2
Want create site? Find Free WordPress Themes and plugins.

如今,移动应用程序的开发已经不仅仅是传统意义上的iOS、Android双平台,Swift、Java两种开发方式。以WebUI+NativeUI混合架构的Hybrid APP已经渐渐为开发者和用户们所接受。例如知乎的Android客户端、网易云音乐的Mac和Android客户端等采用的都是Web APP开发架构。对开发者来说,只需要掌握HTML和Javascript就可以开发几乎任意平台的客户端,而且开发速率相比于采用原生语言来说大大提高。开发Hybrid APP的平台有很多,国外有谷歌官方的PWA,国内也有如apicloud、dcloud等厂商在做这类的产品。

Hybrid APP详细了解

居正最近也入了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框架的话就不必写什么<mbody>、<mhead>标签(这些是为mui.css专门设计的),就和平常开发网页一样写<body>、写<head>即可。

建议新手不要用mui.css。

3.一个很好的开发实例

官方提供的开发实例是Hello MUI,但主要演示的是mui.css,注释也比较少。这里推荐自己互联网上找到的一个开发实例。

滴石APP:https://github.com/uikoo9/dishi

开发笔记:http://uikoo9.com/book/detail/3

阅读一下整套代码,会有很大帮助!

4.<head>写法与顺序

前面都是推荐,现在正式开始踩坑。

html文件head里面的东西没声明清楚,或者引入js顺序不对的话,很容易出错。这里直接套格式(以采用了MaterializeCSS前端框架为例,每个html文件都同理):

<head>
<!–手机meta声明–>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no”>
<!–以下文件均默认已放到相应的目录里–>
<link rel=”stylesheet” href=”css/materialize.min.css” /><!–可以换成你自己的前端UI框架的css文件–>

<script type=”text/javascript” src=”js/mui.min.js”></script><!–MUI核心js,必须引入–>
<script type=”text/javascript” src=”js/lib/jquery-1.11.3.js”></script><!–JQuery,不管用什么框架都必须引入–>
<script type=”text/javascript” src=”js/materialize.min.js”></script><!–可以换成你自己的前端UI框架的js文件–>
<script type=”text/javascript” src=”js/app/all.js”></script><!–全局js,放每个页面都会用到的一堆方法(里面不要放mui.init()和mui.plusReady())–>
<script type=”text/javascript” src=”js/app/index.js”></script><!–本页面专一js(mui.init()和mui.plusReady()写在这里面)–>
</head>

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值要改成比上次大的数。


以上是为大家整理的若干条新手易错点,希望大家在开发中少走弯路!

Did you find apk for android? You can find new Free Android Games and apps.

关于作者

居正

大道至简

2条评论

发表评论