MUI多端发布开发指南(终于把MUI的使用场景说清楚了)

MUI官方给的文档很分散，不系统。遇到问题解决找文档浪费了不少时间，终于弄清楚了，MUI的使用场景和处理方式。

 

 

http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/591

 

多端发布开发指南

多端发布

一套代码，实现wap、微信公众号、iOS和Android的App以及流应用，而且保证在App平台上有更好的体验，这对于提高开发效率有巨大的帮助。
实现多端发布，须要处理平台差别，尤为是HTML5+规范扩展的浏览器并不支持的API，须要兼容降级或动态去除方案。
本文详细讲述了mui的多端发布功能，能作什么，不能作什么，能作的怎么作。

运行环境识别

多端发布首先须要识别在不一样的运行环境，有几种判断环境的方式。
1. UA
5+app环境下，ua是包含html5plus字符串的，流应用环境下还会再包含streamapp字符串。
2. plus对象是否存在
能够在js里判断plus对象是否存在，但须要注意一种状况，若是你的js代码里刚好还定义了一个名为plus的js对象，则这种方法将没法准确判断运行环境。
因此通常推荐采起UA判断的方式处理。

UI部分的多端发布

mui在全部ui组件上都提供纯HTML实现方案，在HTML效果不佳的ui组件上补充了5+的原生强化。
mui的窗体切换、父子页面、长列表滚动、下拉刷新、弹出框、ajax，这些功能在5+App环境下能够调用原生api实现加强体验，但在非5+环境下也能够按照普通HTML的作法跑通业务。

1. 窗体切换
mui.openWindow在5+下执行的动画是plus.webview的原生动画，拥有更高的性能。而在非5+环境下执行的是普通网页跳转。
mui虽然有SPA单页方案，但mui.openWindow并不会在非5+环境降低级为SPA的div窗体切换。
若是使用spa当然能够一套代码多处使用，但没法在5+环境下自动升级为原生view切换动画。
官方的推荐是常规页面使用mui.openWindow，只有部分很小的页面使用spa实现，好比设置界面，即原则是div渲染也不会有太大压力的场景才使用spa。
不了解mui的spa方案的，能够看Hello mui示例的setting模板里，须要单独引入mui.view.js。
2. 父子页面和长列表滚动
长div滚动在Android4.4如下很卡。为解决标题固定顶部，下面内容区超长时也能够滚动流畅，5+引入了双webview的父子页面结构，经过webview的body滚动来替代div滚动，以达到原生体验。
mui的subpages在5+环境下是双webview，而在非5+环境下会自动切为iframe。
mui虽然也提供了div滚动控件，但适用于局部滚动，好比popover、picker等，subpages并不能在非5+下自动切为div。
3. 下拉刷新
基于div的下拉刷新在Android4.4如下也不流畅，5+扩展了原生的下拉刷新控件。
mui的下拉刷新，在android的5+ App环境下会调用5+扩展的双webview下拉刷新，而在ios 的5+环境和非5+环境下，则会调用基于div的下拉刷新。
4. 弹出框
mui.alert，mui.confirm，mui.prompt，mui.toast，这些弹出框都是在5+环境下调用nativeUI，而在非5+环境下调用div模拟的框。
actionsheet控件在Hello mui里提供了原生和div两种方式，目前这两种方式并不能自动切换。
popover没有原生方式，只有div方式，不存在跨端障碍。
5. 侧滑菜单
mui提供了原生和div两种侧滑菜单。
目前使用了原生侧滑菜单后并不能在非5+环境下自动切换为div模式。
推荐的作法是把侧滑菜单作简单作小，直接使用div方式的侧滑菜单。
6. tab选项卡
mui并无独立的选项卡控件，而是在Hello mui示例里作了基于原生和div两个不一样的选项卡代码示例。
目前使用了原生侧滑选项卡后并不能在非5+环境下自动切换为div模式。
从性能角度而言，div选项卡很难承载太多内容，实际使用量也偏少。因此开发者使用了webview的选项卡后，为了实现多端发布，须要在tab的点击事件作判断处理，发现是非5+环境，建议把webview切换改成网页跳转。
7. ajax
mui.ajax在5+下为跨域而使用了5+的plus.NET的api，而在非5+环境下会自动切换为普通的ajax。
8. 语音输入控件
Hello mui的input里有语音输入控件，在HBuilder里敲mspeech回车也给直接生成该控件。在非5+环境下，该控件的麦克风图标不会显示出来，变成普通的输入框。

能力方面的多端发布：plusto互转

除了ui相关，5+还扩展了大量的JS API，这些API有的在手机浏览器或微信浏览器里有相似功能，有的没有。
处理这方面的问题无非两种思路，裁掉或兼容降级。
1. 对于非5+环境不存在的功能：
调5+的api前判断下是否是在5+的ua环境下。不是5+环境则不执行plus代码。
2. 对于可降级的功能：
定位、拍照、录音、相册功能其实html5规范里也有，只是由于体验不佳因此5+进行了扩展。
处理这类问题又有2种思路：
2.1 开发者能够在不一样的运行环境下引入不一样的js，实现这些业务逻辑。好比在浏览器下引入h5camera.js，而在5+下引入pluscamera.js。
2.2 也能够经过重定义js的方式实现标准化替换。
DCloud创建了一个开源项目plusto，https://github.com/dcloudio/plusto，这个提供了一个定位转换的例子。
Html5写的定位代码，载入示例的js后，该js会自动判断当前的运行环境，发如今5+环境下会重定义HTML5标准的定位对象，改为plus.geolocation对象。
重定义也有2种作法，一种是使用HTML5的方式写，引入js重定义为plus。一种是使用plus写，而后引入js从新为普通浏览器或微信对象。
重定义的执行性能低于分条件判断。
plus.to的开源库还不完整，也欢迎网友积极贡献，提供更多plus、浏览器、微信的互转库文件。

条件编译，增强项目管理，提高执行性能

涉及5+App的js文件，能够独立为单独js，经过条件编译工具在打包时动态引入。
条件编译比运行期动态判断的效率要高，推荐开发者使用。
glup、grunt都是业内成熟的前端构建工具，相关教程本文不介绍，请自行搜索。
DCloud的mui及Hello mui示例是使用grunt构建的，grunt相关配置也都开源在https://github.com/dcloudio/mui
Hello mui做为一个Android、iOS、浏览器里都能使用的多端发布示例，其中同时涉及条件编译、动态UA判断等技术。