mui开发app前言（一）

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开发的思想去理解，需要转变，需要了解一些原生的特性，这样才能更好的使用html5+开发app，而不是用html5的方式去开发，记住html5+只是为了方便app开发，简单化，但绝不是替代原生或者不需要了解原生