MUI多端发布开发指南(终于把MUI的使用场景说清楚了)
2019独角兽企业重金招聘Python工程师标准>>>
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判断等技术。
转载于:https://my.oschina.net/u/2338463/blog/1439012
MUI多端发布开发指南(终于把MUI的使用场景说清楚了)相关推荐
- 移动端 H5 开发指南 涉及html、css、js三大方向
HTML方向 调用系统功能 <!-- 拨打电话 --> <a href="tel:10086">拨打电话给10086小姐姐</a><!-- ...
- Android BLE 蓝牙开发指南(三)外围设备端开发详解
Android BLE开发指南(一)入门基础 Android BLE开发指南(二)中心设备端程序开发详解 这篇文章将会详细讲解低功耗蓝牙外围设备端程序开发的主要流程.对于Android开发者而言,或许 ...
- 嵌入式端音频开发(基础篇)之 1.5 opus应用指南
查看本系列全部文章请点击:嵌入式端音频开发系列汇总(持续更新) ==================================================================== ...
- Android开发指南 1──应用程序基础
登录 | 注册 译言精选 订阅 社区 译言译事 翻译答问 译言帮助 文库 原文库 译文库 全部项目 空间 控制台 个人主页 发布 发布原文 发布翻译 发布编译 发布原创 首页 商业 科技 文化 体坛 ...
- severless 开发指南 q593393454
q593393454 q593393454 q593393454 q593393454 Serverless 架构应用开发指南 – serverless q593393454 code{white-s ...
- Windows Phone 7应用开发指南
Windows Phone 7应用开发指南 伏英娜编著 ISBN 978-7-121-14609-1 2011年11月出版 定价:69.00元 16开 508页 宣传语:微软官方独家奉献:深度透视移动 ...
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——导读
本节书摘来自异步社区<iOS应用开发指南--使用HTML5.CSS3和JavaScript>一书中的目录,作者 [美]Kristofer Layon,更多章节内容可以访问云栖社区" ...
- 开放下载 | 《Knative 云原生应用开发指南》开启云原生时代 Serverless 之门
点击下载<Knative 云原生应用开发指南> 自 2018 年 Knative 项目开源后,就得到了广大开发者的密切关注.Knative 在 Kubernetes 之上提供了一套完整的应 ...
- 百度地图API开发指南
百度地图API开发指南 本文为百度地图API官方版本的开发指南,供各位51CTO的网友进行参考. 简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮 ...
最新文章
- matlab 迭代 混沌与分形实验报告,实验四 函数的迭代混沌与分形.doc
- 今日工作总结 2022-02-08
- AlertDialog的使用(一)
- 【Codeforces Round #507 (Div. 2, based on Olympiad of Metropolises) A】Palindrome Dance
- 为你详细解读HTTP请求头(header)的具体含意
- ASP.NET中的Menu控件的应用
- 95-10-035-启动-Metrics
- c语言用梯形法计算积分,c语言用梯形法求积分
- glibc版本查看_[译] 写一个简单的内存分配器(替换glibc中的malloc函数)
- linux重启切换内核,centos7切换启动内核与切换启动模式的讲解
- 面包屑php源码,自己写的面包屑导航
- UVA12290 Counting Game【数学模拟】
- [1] 图像预处理----图像灰度化处理
- Python图像处理丨基于OpenCV和像素处理的图像灰度化处理
- 发布谷歌离线地图瓦片
- 【IT情感】关于专业、理想和工作的认知
- html页面一个屏幕大小不一样,关于web页自动适配屏幕大小
- 中间视频上下图片的视频效果怎么制作
- 解密暗池:那些不为人知的交易
- 业务痛点、个人成长以及未来发展的一些思考
热门文章
- Shell-通过shell启动Java类中的main方法 + 通过Shell启动jar包
- android后台获取view,android – 如何获取当前显示在AdapterView中的项目?
- 小米算法题判断直线相交
- Docker安装部署ELK教程 (Elasticsearch+Kibana+Logstash+Filebeat)
- redmine 配置
- 数据结构简介以及抽象数据类型的实现
- 剑指offer03.数组中重复的数字
- acer清理工具 clear下载_放下偏见,这些国内大厂出品的工具资源,免费又良心!...
- 2021-01-07 matlab数值分析 矩阵特征值与特征向量的计算 改进乘幂法 反幂法
- GPS模块输出的NMEA数据ddmm.mmmm转换成dd.ddddd,在google Earth Pro中描点