• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > Hbuilder MUI 多端发布开发指南

Hbuilder MUI 多端发布开发指南

作者:教程 字体:[增加 减小] 来源:互联网 时间:2017-05-31

本文主要包含hbuilder mui,hbuilder mui视频教程,hbuilder mui教程,hbuilder mui api,hbuilder mui app等相关知识,教程希望在学习及工作中可以帮助到您
"); </div> 一套代码,实现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,

您可能想查找下面的文章:

  • MUI Hbuilder设置模拟器运行APP项目图文教程
  • MUI APP 项目收到Appstore的警告邮件
  • HBuilder mui页面怎么跳转到Android原生界面?
  • HBuilder mui框架开发的App如何查询App的uid
  • mui H5游戏平台完整源码
  • mui app在线更新
  • HBuilder打包mui app Android签名证书的生成
  • MUI H5+ app自动更新思路与实现
  • hbuilder mui IOS 平台离线打包定位插件配置
  • HBuilder mui 页面传参终极版

相关文章

  • 2017-05-31为何那么多一线互联网公司做流应用?
  • 2017-05-31Hbuilder mui HTML动态生成模板加载数据(二)
  • 2017-05-31打包运行的移动APP项目,运行的时候是否依赖手机的浏览器?
  • 2017-05-31HBuilder是免费的吗?会收费吗?
  • 2017-05-31html5仿ios下拉和上拉回弹功能
  • 2017-05-31mui关闭其它页面,首页以及当前窗口对象不关闭
  • 2017-05-31mui实现底部凸起按钮的实现
  • 2017-05-31MUI Android 创建一个最精简的5+SDK打包工程
  • 2017-05-31移动端默认返回按键,使用h5+修改默认事件
  • 2017-05-31HBuilder Android APP打包发布

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • plus.webview.currentWebview() 如何获取当前窗口ID
    • mui如何根据Geolocation获得的坐标获取所在城市?
    • mui项目中出现event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
    • 聊聊即时通讯(IM),基于环信 web im SDK-mui入门到精通(五)
    • Hbuilder MUI 拍照保存的文件是否有自动清除
    • mui项目开发中Android原生界面跳转到5+ html页面呢?
    • MUi DIV侧滑菜单怎么监听遮罩层点击事件?
    • 【示例】使用mui懒加载插件实现动态懒加载图文信息
    • Hbuilder MUI 分享插件开发指南
    • Hbuilder MUI 页面刷新及页面传值问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有