
mui在H5和App多端发布开发指南
> 注意:推荐使用uni-apphttps://uniapp.dcloud.io/,可以开发一次覆盖iOS、Android、小程序、H5,实现更多端的覆盖。
以下的mui多端覆盖只支持iOS、Android、H5,不支持小程序。
一套代码,实现wap、微信公众号、iOS和Android的App以及流应用,并且保证在App平台上有更好的体验,这对于提升开发效率有巨大的帮助。
实现多端发布,需要处理平台差异,尤其是HTML5+规范扩展的、浏览器并不支持的API,需要兼容降级或动态去除方案。
本文详细讲述了mui的多端发布功能,能做什么,不能做什么,能做的怎么做。
运行环境识别
多端发布首先需要识别在不同的运行环境,有几种判断环境的方式。
- UA
5+app环境下(就是打包为apk或ipa包),ua是包含html5plus字符串的,流应用环境下还会再包含streamapp字符串。普通浏览器里没有这些特殊ua。 - plus对象是否存在
可以在js里判断plus对象是否存在,但需要注意一种情况,如果你的js代码里恰好还定义了一个名为plus的js对象,则这种方法将无法准确判断运行环境。
所以一般推荐采取UA判断的方式处理。
UI部分的多端发布
mui在所有ui组件上都提供纯HTML实现方案,在HTML效果不佳的ui组件上补充了5+的原生强化。
mui的窗体切换、父子页面、长列表滚动、下拉刷新、弹出框、ajax,这些功能在5+App环境下可以调用原生api实现增强体验,但在非5+环境下也可以按照普通HTML的做法跑通业务。
- 窗体切换
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。 - 父子页面和长列表滚动
长div滚动在Android4.4以下很卡。为解决标题固定顶部,下面内容区超长时也可以滚动流畅,5+引入了双webview的父子页面结构,通过webview的body滚动来替代div滚动,以达到原生体验。
mui的subpages在5+环境下是双webview,而在非5+环境下会自动切为iframe。
mui虽然也提供了div滚动控件,但适用于局部滚动,比如popover、picker等,subpages并不能在非5+下自动切为div。 - 下拉刷新
基于div的下拉刷新在Android4.4以下也不流畅,5+扩展了原生的下拉刷新控件。
mui的下拉刷新,在Android的5+ App环境下会调用5+扩展的双webview下拉刷新,而在iOS 的5+环境和非5+环境下,则会调用基于div的下拉刷新。 - 弹出框
mui.alert,mui.confirm,mui.prompt,mui.toast,这些弹出框都是在5+环境下调用nativeUI,而在非5+环境下调用div模拟的框。
actionsheet控件在Hello mui里提供了原生和div两种方式,目前这两种方式并不能自动切换。
popover没有原生方式,只有div方式,不存在跨端障碍。 - 侧滑菜单
mui提供了原生和div两种侧滑菜单。
目前使用了原生侧滑菜单后并不能在非5+环境下自动切换为div模式。
推荐的做法是把侧滑菜单做简单做小,直接使用div方式的侧滑菜单。 - tab选项卡
mui并没有独立的选项卡控件,而是在Hello mui示例里做了基于原生和div两个不同的选项卡代码示例。
目前使用了原生侧滑选项卡后并不能在非5+环境下自动切换为div模式。
从性能角度而言,div选项卡很难承载太多内容,实际使用量也偏少。所以开发者使用了webview的选项卡后,为了实现多端发布,需要在tab的点击事件做判断处理,发现是非5+环境,建议把webview切换改为网页跳转。 - ajax
mui.ajax在5+下为跨域而使用了5+的plus.net的api,而在非5+环境下会自动切换为普通的ajax。 - 语音输入控件
Hello mui的input里有语音输入控件,在HBuilder里敲mspeech回车也给直接生成该控件。在非5+环境下,该控件的麦克风图标不会显示出来,变成普通的输入框。
能力方面的多端发布:plusto互转
除了ui相关,5+还扩展了大量的JS API,这些API有的在手机浏览器或微信浏览器里有类似功能,有的没有。
处理这方面的问题无非两种思路,裁掉或兼容降级。
- 对于非5+环境不存在的功能:
调5+的api前判断下是不是在5+的ua环境下。不是5+环境则不执行plus代码。 - 对于可降级的功能:
定位、拍照、录音、相册功能其实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,这是程序员的梦想,也是生产效率发展的必然方向,让我们一起为之努力。
> 注意:推荐使用uni-apphttps://uniapp.dcloud.io/,可以开发一次覆盖iOS、Android、小程序、H5,实现更多端的覆盖。
以下的mui多端覆盖只支持iOS、Android、H5,不支持小程序。
一套代码,实现wap、微信公众号、iOS和Android的App以及流应用,并且保证在App平台上有更好的体验,这对于提升开发效率有巨大的帮助。
实现多端发布,需要处理平台差异,尤其是HTML5+规范扩展的、浏览器并不支持的API,需要兼容降级或动态去除方案。
本文详细讲述了mui的多端发布功能,能做什么,不能做什么,能做的怎么做。
运行环境识别
多端发布首先需要识别在不同的运行环境,有几种判断环境的方式。
- UA
5+app环境下(就是打包为apk或ipa包),ua是包含html5plus字符串的,流应用环境下还会再包含streamapp字符串。普通浏览器里没有这些特殊ua。 - plus对象是否存在
可以在js里判断plus对象是否存在,但需要注意一种情况,如果你的js代码里恰好还定义了一个名为plus的js对象,则这种方法将无法准确判断运行环境。
所以一般推荐采取UA判断的方式处理。
UI部分的多端发布
mui在所有ui组件上都提供纯HTML实现方案,在HTML效果不佳的ui组件上补充了5+的原生强化。
mui的窗体切换、父子页面、长列表滚动、下拉刷新、弹出框、ajax,这些功能在5+App环境下可以调用原生api实现增强体验,但在非5+环境下也可以按照普通HTML的做法跑通业务。
- 窗体切换
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。 - 父子页面和长列表滚动
长div滚动在Android4.4以下很卡。为解决标题固定顶部,下面内容区超长时也可以滚动流畅,5+引入了双webview的父子页面结构,通过webview的body滚动来替代div滚动,以达到原生体验。
mui的subpages在5+环境下是双webview,而在非5+环境下会自动切为iframe。
mui虽然也提供了div滚动控件,但适用于局部滚动,比如popover、picker等,subpages并不能在非5+下自动切为div。 - 下拉刷新
基于div的下拉刷新在Android4.4以下也不流畅,5+扩展了原生的下拉刷新控件。
mui的下拉刷新,在Android的5+ App环境下会调用5+扩展的双webview下拉刷新,而在iOS 的5+环境和非5+环境下,则会调用基于div的下拉刷新。 - 弹出框
mui.alert,mui.confirm,mui.prompt,mui.toast,这些弹出框都是在5+环境下调用nativeUI,而在非5+环境下调用div模拟的框。
actionsheet控件在Hello mui里提供了原生和div两种方式,目前这两种方式并不能自动切换。
popover没有原生方式,只有div方式,不存在跨端障碍。 - 侧滑菜单
mui提供了原生和div两种侧滑菜单。
目前使用了原生侧滑菜单后并不能在非5+环境下自动切换为div模式。
推荐的做法是把侧滑菜单做简单做小,直接使用div方式的侧滑菜单。 - tab选项卡
mui并没有独立的选项卡控件,而是在Hello mui示例里做了基于原生和div两个不同的选项卡代码示例。
目前使用了原生侧滑选项卡后并不能在非5+环境下自动切换为div模式。
从性能角度而言,div选项卡很难承载太多内容,实际使用量也偏少。所以开发者使用了webview的选项卡后,为了实现多端发布,需要在tab的点击事件做判断处理,发现是非5+环境,建议把webview切换改为网页跳转。 - ajax
mui.ajax在5+下为跨域而使用了5+的plus.net的api,而在非5+环境下会自动切换为普通的ajax。 - 语音输入控件
Hello mui的input里有语音输入控件,在HBuilder里敲mspeech回车也给直接生成该控件。在非5+环境下,该控件的麦克风图标不会显示出来,变成普通的输入框。
能力方面的多端发布:plusto互转
除了ui相关,5+还扩展了大量的JS API,这些API有的在手机浏览器或微信浏览器里有类似功能,有的没有。
处理这方面的问题无非两种思路,裁掉或兼容降级。
- 对于非5+环境不存在的功能:
调5+的api前判断下是不是在5+的ua环境下。不是5+环境则不执行plus代码。 - 对于可降级的功能:
定位、拍照、录音、相册功能其实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,这是程序员的梦想,也是生产效率发展的必然方向,让我们一起为之努力。
收起阅读 »
mui.fire 在安卓 4.3机器上没有执行
mui.fire(webview, 'start');
// 在 另外一个 webview 下的代码
function start() {
console.log('start 并没有进入这里')
}
window.addEventListener('start', start);
涉及机型
红米
以及三星 note3
function plusReady ( cb ) {
if( window.plus && window.plus.isReady ) {
setTimeout(function (){
cb()
},200);
} else {
document.addEventListener('plusready', function () {
setTimeout(function (){
cb()
},200);
},false);
}
}
//页面1
;(function(){
plusReady(function () {
var view = plus.create(....); // 页面2
view.onloaded = function () {
mui.fire(view, 'start')
}
});
})();
// 页面2
;(function(){
plusReady(function () {
window.addEventListener('start', start);
function start() {
console.log('start 并没有进入这里')
}
});
})();
mui.fire(webview, 'start');
// 在 另外一个 webview 下的代码
function start() {
console.log('start 并没有进入这里')
}
window.addEventListener('start', start);
涉及机型
红米
以及三星 note3
function plusReady ( cb ) {
if( window.plus && window.plus.isReady ) {
setTimeout(function (){
cb()
},200);
} else {
document.addEventListener('plusready', function () {
setTimeout(function (){
cb()
},200);
},false);
}
}
//页面1
;(function(){
plusReady(function () {
var view = plus.create(....); // 页面2
view.onloaded = function () {
mui.fire(view, 'start')
}
});
})();
// 页面2
;(function(){
plusReady(function () {
window.addEventListener('start', start);
function start() {
console.log('start 并没有进入这里')
}
});
})();
收起阅读 »

打开带背景音乐的H5页面,程序退到后台的时候,音乐还在播放.
打开带背景音乐的H5页面,程序退到后台的时候,音乐还在播放.用微信打开就没这个问题?webview应该怎样设置?
打开带背景音乐的H5页面,程序退到后台的时候,音乐还在播放.用微信打开就没这个问题?webview应该怎样设置?

mui.dtpicker.js增加不出现未来日期的功能
最近使用mui的日期选择器,有个问题是,未来的日期也会出现,未来避免这个问题,在mui.dtpicker.js中增加了一点点代码,在配置项 option.endTimeIsNow = true 的时候开启不显示未来日期的功能。
控件初始化示例如下:
var now = new Date();
var datePicke = new mui.DtPicker({
"type": "datetime",
"beginYear": 2016,
"endYear": now.getFullYear(),
"value": aFunc._getNowDateText(),
"endTimeIsNow": true
});
改造后的mui.dtpicker.js见附件。
最近使用mui的日期选择器,有个问题是,未来的日期也会出现,未来避免这个问题,在mui.dtpicker.js中增加了一点点代码,在配置项 option.endTimeIsNow = true 的时候开启不显示未来日期的功能。
控件初始化示例如下:
var now = new Date();
var datePicke = new mui.DtPicker({
"type": "datetime",
"beginYear": 2016,
"endYear": now.getFullYear(),
"value": aFunc._getNowDateText(),
"endTimeIsNow": true
});
改造后的mui.dtpicker.js见附件。
收起阅读 »
本人长期接外包,目前完成四个基于MUI的APP
本人两年前端工作经验,目前完成四个基于MUI的APP,上线两个。现长期接前端H5+,MUI外包,前端技术娴熟。
另外有设计,以及后台人员,后台使用THINKPHP 等框架,有意者可以联系扣扣:80883080详谈
本人两年前端工作经验,目前完成四个基于MUI的APP,上线两个。现长期接前端H5+,MUI外包,前端技术娴熟。
另外有设计,以及后台人员,后台使用THINKPHP 等框架,有意者可以联系扣扣:80883080详谈

页面多层级返回限制及处理
我们经常会遇到以下情况:
注册——注册页1——注册页2——注册成功页
考虑怎么避免如下两种情况:
1、从注册成功页一步步返回
2、从注册成功页跳转到其他页面后,还能一步步返回到注册成功页,甚至之前的页面
解决方案:
第一步:重写mui.back,直接跳转到目的页面。
第二步:获取当前webview,将不想隐藏的页面关闭或者隐藏。比如当前页面和付页面。
何时关闭或隐藏呢?
当页面为预加载时隐藏,当页面为现载时关闭。
以下代码中,当前页为现载的,父页面为预载的。
function backToOrderList(){
plus.nativeUI.showWaiting('正在加载...');
// 获取到要跳转的页面
var page = plus.webview.getWebviewById('a.html');
// 通知页面去ajax拉取数据(在渲染页面和移动窗体之前)
mui.fire(page,'pulldata',{});
// 隐藏父页面
plus.webview.currentWebview().opener().hide();
// 关闭当前页
plus.webview.currentWebview().close();
}
我们经常会遇到以下情况:
注册——注册页1——注册页2——注册成功页
考虑怎么避免如下两种情况:
1、从注册成功页一步步返回
2、从注册成功页跳转到其他页面后,还能一步步返回到注册成功页,甚至之前的页面
解决方案:
第一步:重写mui.back,直接跳转到目的页面。
第二步:获取当前webview,将不想隐藏的页面关闭或者隐藏。比如当前页面和付页面。
何时关闭或隐藏呢?
当页面为预加载时隐藏,当页面为现载时关闭。
以下代码中,当前页为现载的,父页面为预载的。
function backToOrderList(){
plus.nativeUI.showWaiting('正在加载...');
// 获取到要跳转的页面
var page = plus.webview.getWebviewById('a.html');
// 通知页面去ajax拉取数据(在渲染页面和移动窗体之前)
mui.fire(page,'pulldata',{});
// 隐藏父页面
plus.webview.currentWebview().opener().hide();
// 关闭当前页
plus.webview.currentWebview().close();
}
收起阅读 »

gostream.js,把wap流量转换为app流量
gostream.js是DCloud提供的一个js文件。
cdn地址:http://cdn.dcloud.net.cn/gostream.min.js。(该文件不能直接访问,必须带appid参数,具体见下)
用途:
把wap网站的流量转换为流应用的app流量。
具体的功能:
在wap站里内嵌gostream.js,检测本机是否安装了流应用引擎,如果引擎存在则自动启动指定的流应用。
比如在有道词典wap站内嵌这个js,手机用户在访问有道词典wap站时如果手机上有流应用引擎就会直接启动有道词典流应用。
流应用是什么:
流应用是一种边用边下的App,具有App的功能和体验,可驻留桌面,又拥有秒装秒开的特点。即使有道词典流应用之前未安装过也可以立即启动,边用边下。
对开发商的价值:
把低价值的wap流量转换为高价值的App流量,增强留存率、注册转化率、付费转化率等各项数据指标。
对用户的价值:
获得更优质的体验,而且流应用体积小、省电。
流应用引擎覆盖面:
目前约为每3个Android设备访问即可检测到一个流应用引擎。
如何集成gostream.js:
- 首先你需要拥有一个流应用
如果你已经有了HBuilder开发的5+App,那么直接在HBuilder里点菜单发行-提交流应用。
如果你有wap网站或公众号,访问这里M站、WAP站改造流应用指南
如果不符合以上条件,那么只能重头开发一个流应用,访问流应用开发指南 - 将如下代码嵌入你的wap站点:
<script src="http://cdn.dcloud.net.cn/gostream.min.js?appid=HelloMUI" type="text/javascript" charset="utf-8"></script>
注意appid的值更换为自己的流应用的appid。
当然还有更高级的写法,多几行代码:<script> (function() { var gostream = document.createElement("script"); gostream.src = "//cdn.dcloud.net.cn/gostream.min.js?appid=HelloMUI"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(gostream, s); })(); </script>
这种高级写法的好处是自动处理请求协议,如http、https,并且闭包异步加载,与原网页的隔离更彻底。
如何体验效果:
手机访问http://dcloud.io/demo/gostream/
这里有2个集成好gostream.js的样例。
注意在微信、QQ、微博的内置浏览器中无法启动流应用,需要使用外部浏览器打开。
如果你的手机没有安装流应用引擎,可先安装DCloud流应用基座,安装后再刷新本页面即可体验。
更多用途:
除了wap站导流到流应用,gostream.js还能用于更多导流方案。
- 分享导流,通过在分享的url页面里挂gostream.js,可以实现通过社交途径带动应用发行。
- 广告sdk导流,广告sdk导流到wap时体验差,导流到app时折损高。那么在导流到wap时引入gostream.js,即可降低折损、增强体验。
- App互导流,在App中集成流应用引擎或检测手机端的流应用引擎,均可实现更高效的导流方案。
本质上流应用是一种极高效率、优质体验的导流技术,用途很广。
FAQ:
- 我集成了这个js后,如果DCloud服务器坏了怎么办,对我有没有影响?
答:首先托管在cdn上的静态js文件不存在down机的概念,其次就像集成百度的统计js一样,百度服务器坏了最多统计不到数据,但不会影响原有页面运行。此外gostream.js全部在闭包里,对外不共享资源,不引发冲突。 - gostream.js会不会干扰我的界面?
答:gostream.js不显示任何界面元素。 - gostream.js采集了什么信息?
答:除非开发者使用其他增强功能,gostream.js默认只采集启动流应用成功失败的日志,不记录其他信息。 - 手机用户不喜欢跳转到流应用怎么办?
答:gostream.js提供一种选择机制。
当自动转到流应用后,用户不喜欢时,流应用在退出询问框里增加一个询问项,不再从网站自动转流应用。
用户点击该选项后,把该用户的选择传到DCloud的服务器,然后gostream.js会获得这个信息,以后该用户在访问指定的wap站时不会再自动转流应用。
当然开发商仍然可以在wap页面上通过加banner等方式继续引导用户手动激活流应用。 - wap跳到流应用时是否可以带参数,是否可以转到流应用的指定二级、三级界面?
答:可以。 - 我是否可以把这个js代码copy走放到我自己的服务器?
答:可以。就是js升级更新麻烦点,需要再从DCloud服务器copy。 - 我不敢一下全放开,是否可以灰度试点
答:这个可以在自己的wap页面控制,在合适的范围里引入这个js。可以先灰度一部分然后逐渐放大。 - 我的wap站之前访问会带有渠道id,导流到流应用时可以保留渠道id吗?
答:可以。调起流应用时支持参数传递。 - 我的wap站目前也会调起我的原生app,是否会冲突?
答:wap站调起原生app失败后再执行gostream.js即可。
更多高级用法或疑问,可加入流应用交流QQ群沟通,群号471285299。
附录:
DCloud CEO在Google for publishers论坛的演讲:揭秘H5流量为什么不值钱?
2016年3月1日,Google在其北京办公室举行Google for publishers论坛 。活动吸引了数百位广告主、流量主和开发者参加。DCloud创始人王安在会上分享的H5流量为什么低廉以及如何提升H5流量价值等问题,深受参会人员关注。
下文为DCloud创始人王安分享的观点:
大家都知道,目前H5的流量按pv卖,一个pv几毛钱,而App的流量按下载或激活卖,一个下载几元,一个激活可能十几元。为什么H5的流量比App便宜这么多?大家想过没有。
有人说H5获取容易但体验不行,所以流量便宜。App获取不容易,但体验好,所以流量贵。
简单看是这个意思,但深入分析进去,不是体验差可以概括的。从数据运营的角度看,H5从入口流量开始,注册转换、付费转换、留存都远低于App。广告主买来的H5流量,很难留住用户和持续变现,这倒逼着广告主无法支付给H5流量过高的采购价格。
难道H5流量廉价的现状就无法改变了吗?其实不是。摸清病,就可以对症下药。
- 优化HTML5的功能和体验,达到原生效果
先从体验开始说起,大家提到DCloud一般都能想到,哦,那家可以解决HTML5“性工能”缺失的公司,是的,这几年DCloud通过Hbuilder、HTML5+、MUI几个免费和开源的产品,把HTML5的性能、工具、能力做到跟原生接近,普通用户难以感知区别。
包括流畅的窗体切换动画、长列表滚动、下拉刷新这些用户体验优化,还有40万原生API的调用,这些问题都已解决了。具体怎么实现以前经常讲,这里就不讲了,没听过的可以上我们官网看,http://www.DCloud.io - 优化HTML5的运营折损
除了感性的体验优化,我们更在数据运营层面做了很多优化来避免折损。
经过强化的HTML5+,用户用手机号注册时也可以截获短信验证码启动填入输入框,也可以调用微信、QQ、微博单点登陆,在注册环节的折损和原生App保持一致。
除了注册,在支付环节也一样,经过强化的HTML5+也可以调起支付宝、微信原生支付以及苹果应用内支付IAP。
这样HTML5+从入口流量开始,到注册转换和付费转换,是不会比原生有差距的。 -
提升留存
然后剩下问题就是留存了。
H5与App相比,留存率低一般2个原因:
a) 体验不好下次不用了。这个上面提到已经解决了。
b) 另一个重要原因是H5页面在桌面没有图标。
这里我要引入一个概念,叫“流应用”,也是DCloud的重要产品,目前有上亿装机量。
用户在访问一个浏览器网页时,是不会在桌面留存图标的,那叫在线浏览。流应用虽然是使用经过强化的HTML5+开发,但引入了安装的概念,在桌面留有图标。但这种安装呢,又不像原生App安装那么麻烦,流应用和流媒体的概念类似,有缓冲和边用边下的概念,一点你就能用,但边用边装,一会儿就整个App安装完毕了。
大家可以在360手机助手里体验,手机上打开360手机助手,搜索大众点评外卖,可以看到列表里的按钮不叫下载了,叫“秒开”,一点后,App直接启动并同时安装在桌面。
参考体验视频:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_i0171dyo7cf.html
所以,留存率低于原生的问题也解决了。
经过强化的HTML5+,通过流应用方式驻留在桌面,在功能体验和运营数据上都可以达到原生App标准。HTML5的流量价值将可以和原生狠狠拼一把了。有人问了,通过应用市场加载流应用虽然挺好,但我原来的浏览器里的H5流量怎么利用和提价啊。
Good question!
以往的做法是wap站上挂一个banner引导用户下载原生App,实际上转化率非常低。
现在DCloud提供了一个免费的js,gostream.js,把这个js嵌入到你的H5页面里,这个js检测到手机有流应用引擎时,可以直接秒开流应用并安装到手机里。刚才讲了我们的流应用引擎已经有一亿多装机量,目前我们的测试数据是每3台Android设备就有一台检测到流应用引擎。
具体的集成地址是:<script src="http://cdn.dcloud.net.cn/gostream.min.js?appid=HelloMUI">
注意appid的值更换为自己的流应用的appid。
So,就是这么简单,就可以把wap流量变成app流量。
技术人员在这里看到了很酷的新技术,广告主看到了更高效的推广方式,渠道也可以看了很多商机,我们目前的渠道合作分成政策也很优惠。
大家可以继续关注我们的公众号或访问我们DCloud的网站深入了解。
后记:
流应用安装的意义不止是为了桌面驻留。
b/s的网页有几个问题,无网会404白屏,加载页面时是数据和界面一起下载,这导致流量大,切换页面慢,中间容易白屏。
而App是c/s结构的,其界面是在本地的,从服务器只取很小的json,流量小,切换页面快。这也是App体验比web好的重要原因之一。
但传统App的安装过程很复杂,一个app从下载开始,到安装完毕成功启动,需要耗时一分钟,激活率一般只有50%。
流应用是边用边下的,所以既保持了c/s的App级别的优质用户体验,又避免了下载安装启动的激活折损。流应用同时结合了c/s和b/s的优势又避免了他们的缺点,这才是下一代移动互联网代表的方向。
gostream.js是DCloud提供的一个js文件。
cdn地址:http://cdn.dcloud.net.cn/gostream.min.js。(该文件不能直接访问,必须带appid参数,具体见下)
用途:
把wap网站的流量转换为流应用的app流量。
具体的功能:
在wap站里内嵌gostream.js,检测本机是否安装了流应用引擎,如果引擎存在则自动启动指定的流应用。
比如在有道词典wap站内嵌这个js,手机用户在访问有道词典wap站时如果手机上有流应用引擎就会直接启动有道词典流应用。
流应用是什么:
流应用是一种边用边下的App,具有App的功能和体验,可驻留桌面,又拥有秒装秒开的特点。即使有道词典流应用之前未安装过也可以立即启动,边用边下。
对开发商的价值:
把低价值的wap流量转换为高价值的App流量,增强留存率、注册转化率、付费转化率等各项数据指标。
对用户的价值:
获得更优质的体验,而且流应用体积小、省电。
流应用引擎覆盖面:
目前约为每3个Android设备访问即可检测到一个流应用引擎。
如何集成gostream.js:
- 首先你需要拥有一个流应用
如果你已经有了HBuilder开发的5+App,那么直接在HBuilder里点菜单发行-提交流应用。
如果你有wap网站或公众号,访问这里M站、WAP站改造流应用指南
如果不符合以上条件,那么只能重头开发一个流应用,访问流应用开发指南 - 将如下代码嵌入你的wap站点:
<script src="http://cdn.dcloud.net.cn/gostream.min.js?appid=HelloMUI" type="text/javascript" charset="utf-8"></script>
注意appid的值更换为自己的流应用的appid。
当然还有更高级的写法,多几行代码:<script> (function() { var gostream = document.createElement("script"); gostream.src = "//cdn.dcloud.net.cn/gostream.min.js?appid=HelloMUI"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(gostream, s); })(); </script>
这种高级写法的好处是自动处理请求协议,如http、https,并且闭包异步加载,与原网页的隔离更彻底。
如何体验效果:
手机访问http://dcloud.io/demo/gostream/
这里有2个集成好gostream.js的样例。
注意在微信、QQ、微博的内置浏览器中无法启动流应用,需要使用外部浏览器打开。
如果你的手机没有安装流应用引擎,可先安装DCloud流应用基座,安装后再刷新本页面即可体验。
更多用途:
除了wap站导流到流应用,gostream.js还能用于更多导流方案。
- 分享导流,通过在分享的url页面里挂gostream.js,可以实现通过社交途径带动应用发行。
- 广告sdk导流,广告sdk导流到wap时体验差,导流到app时折损高。那么在导流到wap时引入gostream.js,即可降低折损、增强体验。
- App互导流,在App中集成流应用引擎或检测手机端的流应用引擎,均可实现更高效的导流方案。
本质上流应用是一种极高效率、优质体验的导流技术,用途很广。
FAQ:
- 我集成了这个js后,如果DCloud服务器坏了怎么办,对我有没有影响?
答:首先托管在cdn上的静态js文件不存在down机的概念,其次就像集成百度的统计js一样,百度服务器坏了最多统计不到数据,但不会影响原有页面运行。此外gostream.js全部在闭包里,对外不共享资源,不引发冲突。 - gostream.js会不会干扰我的界面?
答:gostream.js不显示任何界面元素。 - gostream.js采集了什么信息?
答:除非开发者使用其他增强功能,gostream.js默认只采集启动流应用成功失败的日志,不记录其他信息。 - 手机用户不喜欢跳转到流应用怎么办?
答:gostream.js提供一种选择机制。
当自动转到流应用后,用户不喜欢时,流应用在退出询问框里增加一个询问项,不再从网站自动转流应用。
用户点击该选项后,把该用户的选择传到DCloud的服务器,然后gostream.js会获得这个信息,以后该用户在访问指定的wap站时不会再自动转流应用。
当然开发商仍然可以在wap页面上通过加banner等方式继续引导用户手动激活流应用。 - wap跳到流应用时是否可以带参数,是否可以转到流应用的指定二级、三级界面?
答:可以。 - 我是否可以把这个js代码copy走放到我自己的服务器?
答:可以。就是js升级更新麻烦点,需要再从DCloud服务器copy。 - 我不敢一下全放开,是否可以灰度试点
答:这个可以在自己的wap页面控制,在合适的范围里引入这个js。可以先灰度一部分然后逐渐放大。 - 我的wap站之前访问会带有渠道id,导流到流应用时可以保留渠道id吗?
答:可以。调起流应用时支持参数传递。 - 我的wap站目前也会调起我的原生app,是否会冲突?
答:wap站调起原生app失败后再执行gostream.js即可。
更多高级用法或疑问,可加入流应用交流QQ群沟通,群号471285299。
附录:
DCloud CEO在Google for publishers论坛的演讲:揭秘H5流量为什么不值钱?
2016年3月1日,Google在其北京办公室举行Google for publishers论坛 。活动吸引了数百位广告主、流量主和开发者参加。DCloud创始人王安在会上分享的H5流量为什么低廉以及如何提升H5流量价值等问题,深受参会人员关注。
下文为DCloud创始人王安分享的观点:
大家都知道,目前H5的流量按pv卖,一个pv几毛钱,而App的流量按下载或激活卖,一个下载几元,一个激活可能十几元。为什么H5的流量比App便宜这么多?大家想过没有。
有人说H5获取容易但体验不行,所以流量便宜。App获取不容易,但体验好,所以流量贵。
简单看是这个意思,但深入分析进去,不是体验差可以概括的。从数据运营的角度看,H5从入口流量开始,注册转换、付费转换、留存都远低于App。广告主买来的H5流量,很难留住用户和持续变现,这倒逼着广告主无法支付给H5流量过高的采购价格。
难道H5流量廉价的现状就无法改变了吗?其实不是。摸清病,就可以对症下药。
- 优化HTML5的功能和体验,达到原生效果
先从体验开始说起,大家提到DCloud一般都能想到,哦,那家可以解决HTML5“性工能”缺失的公司,是的,这几年DCloud通过Hbuilder、HTML5+、MUI几个免费和开源的产品,把HTML5的性能、工具、能力做到跟原生接近,普通用户难以感知区别。
包括流畅的窗体切换动画、长列表滚动、下拉刷新这些用户体验优化,还有40万原生API的调用,这些问题都已解决了。具体怎么实现以前经常讲,这里就不讲了,没听过的可以上我们官网看,http://www.DCloud.io - 优化HTML5的运营折损
除了感性的体验优化,我们更在数据运营层面做了很多优化来避免折损。
经过强化的HTML5+,用户用手机号注册时也可以截获短信验证码启动填入输入框,也可以调用微信、QQ、微博单点登陆,在注册环节的折损和原生App保持一致。
除了注册,在支付环节也一样,经过强化的HTML5+也可以调起支付宝、微信原生支付以及苹果应用内支付IAP。
这样HTML5+从入口流量开始,到注册转换和付费转换,是不会比原生有差距的。 -
提升留存
然后剩下问题就是留存了。
H5与App相比,留存率低一般2个原因:
a) 体验不好下次不用了。这个上面提到已经解决了。
b) 另一个重要原因是H5页面在桌面没有图标。
这里我要引入一个概念,叫“流应用”,也是DCloud的重要产品,目前有上亿装机量。
用户在访问一个浏览器网页时,是不会在桌面留存图标的,那叫在线浏览。流应用虽然是使用经过强化的HTML5+开发,但引入了安装的概念,在桌面留有图标。但这种安装呢,又不像原生App安装那么麻烦,流应用和流媒体的概念类似,有缓冲和边用边下的概念,一点你就能用,但边用边装,一会儿就整个App安装完毕了。
大家可以在360手机助手里体验,手机上打开360手机助手,搜索大众点评外卖,可以看到列表里的按钮不叫下载了,叫“秒开”,一点后,App直接启动并同时安装在桌面。
参考体验视频:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_i0171dyo7cf.html
所以,留存率低于原生的问题也解决了。
经过强化的HTML5+,通过流应用方式驻留在桌面,在功能体验和运营数据上都可以达到原生App标准。HTML5的流量价值将可以和原生狠狠拼一把了。有人问了,通过应用市场加载流应用虽然挺好,但我原来的浏览器里的H5流量怎么利用和提价啊。
Good question!
以往的做法是wap站上挂一个banner引导用户下载原生App,实际上转化率非常低。
现在DCloud提供了一个免费的js,gostream.js,把这个js嵌入到你的H5页面里,这个js检测到手机有流应用引擎时,可以直接秒开流应用并安装到手机里。刚才讲了我们的流应用引擎已经有一亿多装机量,目前我们的测试数据是每3台Android设备就有一台检测到流应用引擎。
具体的集成地址是:<script src="http://cdn.dcloud.net.cn/gostream.min.js?appid=HelloMUI">
注意appid的值更换为自己的流应用的appid。
So,就是这么简单,就可以把wap流量变成app流量。
技术人员在这里看到了很酷的新技术,广告主看到了更高效的推广方式,渠道也可以看了很多商机,我们目前的渠道合作分成政策也很优惠。
大家可以继续关注我们的公众号或访问我们DCloud的网站深入了解。
后记:
流应用安装的意义不止是为了桌面驻留。
b/s的网页有几个问题,无网会404白屏,加载页面时是数据和界面一起下载,这导致流量大,切换页面慢,中间容易白屏。
而App是c/s结构的,其界面是在本地的,从服务器只取很小的json,流量小,切换页面快。这也是App体验比web好的重要原因之一。
但传统App的安装过程很复杂,一个app从下载开始,到安装完毕成功启动,需要耗时一分钟,激活率一般只有50%。
流应用是边用边下的,所以既保持了c/s的App级别的优质用户体验,又避免了下载安装启动的激活折损。流应用同时结合了c/s和b/s的优势又避免了他们的缺点,这才是下一代移动互联网代表的方向。

hbuilder连接不到iPhone手机
有时未检测到iPhone手机,怎么重启软件或系统都不行。后来看了相关帖子,然来是要打开itunes,确定使用itunes连上iPhone手机后,再关闭itunes,就能在hbuilder里面检测到手机了。
有时未检测到iPhone手机,怎么重启软件或系统都不行。后来看了相关帖子,然来是要打开itunes,确定使用itunes连上iPhone手机后,再关闭itunes,就能在hbuilder里面检测到手机了。

设置Waiting的标题,竟然有些文字切换存在自动换行行为~~
var waiting;
var showWai = function(_i) {
if (waiting) {
waiting.setTitle(" "+_i+"% ");
} else {
waiting = plus.nativeUI.showWaiting(" 0% ", {
back: "none",
width: "140px",
size: "12px",
background: "rgba(0,0,0,0.5)"
});
}
_i += 1;
setTimeout(function() {
showWai(_i);
}, 1000);
}
在前后两边填空格才会好些~暂时算解决!
var waiting;
var showWai = function(_i) {
if (waiting) {
waiting.setTitle(" "+_i+"% ");
} else {
waiting = plus.nativeUI.showWaiting(" 0% ", {
back: "none",
width: "140px",
size: "12px",
background: "rgba(0,0,0,0.5)"
});
}
_i += 1;
setTimeout(function() {
showWai(_i);
}, 1000);
}
在前后两边填空格才会好些~暂时算解决!
收起阅读 »