dcloud mui开发app前言
大一那会就听说html5快要发布了,前景无量,厉害到能写操作系统==|||(什么???蛤?)
似乎html5标准还没正式发布那会,使用hybrid模式开发app已经起步,阿里就是国内这一领域的布道者。(你看看淘宝,支付宝,一处开发,处处运行,多卡,呸,多叼啊)
如今w3c联盟发布html5已经三个年头了。我才刚刚开始涉足,真是惭愧,马上要考研了,最近一个外包项目拖缓了我学习高数的脚步,该项目我完全使用了基于dcloud html5+的混合式开发app技术(考完研我会对项目构建写一些随笔,里面用到了大量html5+的API,包括map,audio,payment,share,等等等利用率很高,可以做个example),做了这么久,终于有空总结一下这一路的坑坑洼洼。
dcloud的产品线比较纷杂,大家可以去官网看看:http://www.dcloud.io/
主要包括了mui,hbuilder,5+sdk,native.js,html5+规范,近期还推出了一个流应用。
其中html5+是类似并基于w3c html5的一套规范,目前由html5+中国产业联盟负责定制撰写文档
官网:http://www.html5plus.org/doc/h5p.html
mui是dcloud开发的一个十分精简的前端框架,核心包含了mui.css,mui.js,基本就类似于bootstrap这样的前端框架,如果是用来开发web,wap等项目的话似乎有点过于精简而溃乏,但是对于app来说,里面的布局和js功能已经够用了,当然光是前端框架也没什么卵用咯,只能使用html5的功能罢了,这就和单纯的jquery mobile差不多了,笔者两年前,html5刚发布那会,就是使用jquery mobile+phonegap的方式开发app的,可以说功能比较糟糕,使用体验,性能都很勉强。如今在facebook react native技术的引领下映射原生类库和方法已经成为主流,这就是所谓的hybrid混合开发的最好应用吧
hbuilder:IDE开发工具,个人觉得名不虚传,国内最好的html5app集成开发环境,我做ios开发的朋友看到都惊叹的说:哇,你这个居然可以直接连iphone?还是windows电脑???你这还能直接配置地图sdk??你这个怎么还有支付接口???还有你这个消息推送???。。。
讲真要是dlcoud能做个linux平台的出来,我就不要切换到windows写了。强烈建议!
5+sdk,实现打包和手机系统(an,ios)的对接
native.js,将js映射为java,oc等类库方法
话不多说,来看看在进入dcloud mui一些要点:
webview第一
窗口,这是做mui开发app的核心要素,重中之重,一定要好好看文档,我之前写过一篇《mui开发app之什么是webview》的文章,阅读量还算可人,这是快一年前的文章了,由于当时也是刚接触mui,里面有很多疏漏,填填补补,现在已经不在去更新了
webview其实就相当于android原生开发中的activity,当然android是将layout(布局)和activity(活动)分离开发的,而webview像是一个浏览器,底层使用了一些android,ios原生的功能,其中比如跳转动画,webview最大的特点是充分利用了js对dom的操作,将activity和layout统一在了一起,使之更加简单了,个人建议没必要像浏览器那样把js,css单独放文件(外联),这在web开发中是颇受推崇的,但是app并不会考虑多浏览器的支持(因为无论ios,android都被apple的safari旗下的webkit内核垄断着),如果你将js和css分离出去顶多也只是一个文件(web分离两大原因,其一是因为web是要下载html,js,css资源的,是B/S模式,这样可能使用分布式存放资源,你所看到的资源会来自不同服务器,减轻每一个独立服务器的压力,这是非常好的做法,所以web老手看到你写内联尤其是style属性会对你的代码嗤之以鼻;其二是因为不同浏览器内核对html,尤其是版本4的支持乱七八糟,导致前端小组需要分配不同浏览器不同的js,css,早些年是这样的,随着前端技术的提高,浏览器的统一化,框架的繁衍,如今就算是web开发,可能也很少有开发者会考虑为不同浏览器拽写css,js的不同版本了吧,不过app就更没有这个必要了。所以你的关注点是要放在手机系统,屏幕像素等问题上来。
关于webview需要知道以下几点:
1、使用一套自己规定的统一的id编号,个人使用的是“目录/文件名去掉后缀”的形式,保证不会出现冲突。学会通过getWebviewById好好操作这些webview,灵活调动各个页面
2、不要过度依赖mui封装的openWindow和openWindowwithtitle,这两个方法虽然很方便,但是封装性太强,当你要对窗口进行各种骚操作的时候,建议使用plus.webview.create方法来获取webviewObj,然后使用他的方法,比如,show(),hide(),close(),clear(),其中注意,只有close会销毁当前webview!
3、层叠问题,新打开的webview默认会遮挡老打开的webview,比如openWindow,打开以后覆盖原来的页面,原来的页面并不会关闭!不会销毁!注意,这点很重要,一定要记住openWindow打开的页面是一层一层覆盖的,下面的窗口依然存在,尤其是android系统上,这像activity,又像是数据结构的栈道,先进后出层层堆叠。逻辑理清很重要,因为再使用地图的时候,笔者遇到一个不知道能不能算bug的bug,在android端,dcloud的plus.mas.Map对象只能共用一个,当你在第一个页面new了一个mapObj,然后从这页面使用openWindow打开另一个页面的时候,你再在这个新的webview里new一个map对象你会发现这个新的map对象和上一个map似乎很像,没错我研究了一下这TM就是同一个个啊,连我标记的icon都还在,地图位置也在原来地点,根本没有new出新的map对象嘛,这或许是一个bug吧,我在dcloud社区问了,似乎也没能得到一个回复,因为这可能和android的机制有关,前面的webview没有关闭,所以map插件没有销毁,所以当然新页面还会沿用,关键是沿用也就算了,还不能拖动仿佛被罩住了一样,这个问题我会另外写一篇博客来说明我后来的解决方案(多地图问题)
关于层叠,还有show()会把一个已经创建(存在)的webview提到最前面,栈顶。
hide()将会隐藏起来,倒也不是往下一个位置放(保留状态,消失在视野当中)
zindex属性(WebviewStyles),也是可以改变webview层叠效果的属性,类似于css的z-index,数值越大,层级越往上,个人建议不要乱用,会出现页面错乱的问题(如果你设计的UI跳转逻辑并不太好)
4、巧用子页,子页也是一个webViewObj,和父页面一样,每个webviewObj(使用plus.webview.create创建)对象,都存在append方法,为自己添加一个子页面,但要规定好子页面大小(style),防止层叠产生的遮罩问题,与直接show()出来的webview 不同,直接show()亦可创建一个“伪子页”这个子页面有自己独立的back监听等等,说他伪,是因为他完全独立于外边的父页面,这其实就是上面说的层叠造成的假象,他是独立的页面,在设计高度宽度合适的情况下,看似也像是子页,但按下返回会关闭当前这“伪子页”。建议使用append,这样父页面的销毁会带着子页面,但子页面又可以单独销毁,这可以解决上述的地图map插件共用问题!
5、销毁webview,webviewObj带有clear,close两个方法,官方说法:
clear
清空原生Webview窗口加载的内容
void wobj.clear();
说明:
清除原生窗口的内容,用于重置原生窗口加载的内容,清除其加载的历史记录等内容。
参数:
无
返回值:
void : 无
测试了一下,clear只是会重置整个页面内容,类似于web中刷新当前页面,并不会销毁页面,通过getWebViewById依然可以找到他
plus.webview.close则可以完全关闭一个页面
最后关于webview,乃至整个使用dcloud mui开发app,我想说,千万不要用原来web开发的思想去理解,需要转变,需要了解一些原生的特性。
注意,这点很重要,一定要记住openWindow打开的页面是一层一层覆盖的,下面的窗口依然存在。