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须要知道如下几点：

一、使用一套本身规定的统一的id编号，我的使用的是“目录/文件名去掉后缀”的形式，保证不会出现冲突。学会经过getWebviewById好好操做这些webview，灵活调动各个页面

二、不要过分依赖mui封装的openWindow和openWindowwithtitle，这两个方法虽然很方便，可是封装性太强，当你要对窗口进行各类骚操做的时候，建议使用plus.webview.create方法来获取webviewObj，而后使用他的方法，好比，show()，hide()，close()，clear()，其中注意，只有close会销毁当前webview！

三、层叠问题，新打开的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跳转逻辑并不太好）

四、巧用子页，子页也是一个webViewObj，和父页面同样，每一个webviewObj（使用plus.webview.create建立）对象，都存在append方法，为本身添加一个子页面，但要规定好子页面大小（style），防止层叠产生的遮罩问题，与直接show()出来的webview 不一样，直接show()亦可建立一个“伪子页”这个子页面有本身独立的back监听等等，说他伪，是由于他彻底独立于外边的父页面，这其实就是上面说的层叠形成的假象，他是独立的页面，在设计高度宽度合适的状况下，看似也像是子页，但按下返回会关闭当前这“伪子页”。建议使用append，这样父页面的销毁会带着子页面，但子页面又能够单独销毁，这能够解决上述的地图map插件共用问题！

五、销毁webview，webviewObj带有clear，close两个方法，官方说法：

clear
清空原生Webview窗口加载的内容

void wobj.clear();

说明：

清除原生窗口的内容，用于重置原生窗口加载的内容，清除其加载的历史记录等内容。

参数：

无

返回值：

void : 无

测试了一下，clear只是会重置整个页面内容，相似于web中刷新当前页面，并不会销毁页面，经过getWebViewById依然能够找到他

plus.webview.close则能够彻底关闭一个页面

最后关于webview，乃至整个使用dcloud mui开发app，我想说，千万不要用原来web开发的思想去理解，须要转变，须要了解一些原生的特性。 注意，这点很重要，必定要记住openWindow打开的页面是一层一层覆盖的，下面的窗口依然存在。