DCloud_heavensoft
DCloud_heavensoft
  • 发布:2016-03-28 03:02
  • 更新:2019-01-08 11:57
  • 阅读:112689

mui在H5和App多端发布开发指南

分类:MUI

注意:推荐使用uni-apphttps://uniapp.dcloud.io/,可以开发一次覆盖iOS、Android、小程序、H5,实现更多端的覆盖。

以下的mui多端覆盖只支持iOS、Android、H5,不支持小程序。

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

运行环境识别

多端发布首先需要识别在不同的运行环境,有几种判断环境的方式。

  1. UA
    5+app环境下(就是打包为apk或ipa包),ua是包含html5plus字符串的,流应用环境下还会再包含streamapp字符串。普通浏览器里没有这些特殊ua。
  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判断等技术。
mui的plusready或plus的ready事件在非5+环境下不会触发,请把仅在5+环境下才需要的代码写在这些事件里。

write once,run anywhere,这是程序员的梦想,也是生产效率发展的必然方向,让我们一起为之努力。

29 关注 分享
SixGodWill 水中月明 Trust l***@126.com ___K 4***@qq.com jiftle johnson_liu HCloud Horizen 1***@163.com 8***@qq.com 二毛哥哥 gaohuazi 1***@qq.com 闭目狂奔 1***@qq.com 无赖君子 小陈0720 ladesign 雪之梦技术驿站 kkgo小白 7***@qq.com Warn wowowo 2***@qq.com 1***@qq.com sonicsunsky joelewis

要回复文章请先登录注册

3***@qq.com

3***@qq.com

h5本地调试跨域如何解决
2019-01-08 11:57
诠释一种信仰

诠释一种信仰

不错,解决了一些开发中疑惑,赞
2018-05-14 16:49
Warn

Warn

很赞,多端发布详细的指南
2018-04-03 13:16
7***@qq.com

7***@qq.com

点赞,写得可以说很用心了
2018-03-09 14:43
qq421065846

qq421065846

从七月中旬开始做混合app,到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了,这期间遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,现在正准备开发一款旅游类的混合app,原型图已经出。现在准备开工了。同时,希望有一起做混合app的,有兴趣加qq群654230427一起讨论交流学习,爬坑,共同进步。
2017-09-11 22:26
4***@qq.com

4***@qq.com

怎么解决了,大哥们
2017-06-24 00:09
4***@qq.com

4***@qq.com

华为手机定位失败
2017-06-24 00:09
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 8***@qq.com :
或者在webview动画时不运行js,或者那就别用webview动画,用截屏加速或者nativeobj.view的原生view动画
2017-01-25 10:16
8***@qq.com

8***@qq.com

但是在原生的webview下,创建新的webview效果动画感觉都不优雅,怎么解决呢?
2017-01-25 09:57
7***@qq.com

7***@qq.com

回复 Natsume :
问题解决了吗?
2016-12-14 16:23