
页面多层级返回限制及处理
我们经常会遇到以下情况:
注册——注册页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);
}
在前后两边填空格才会好些~暂时算解决!
收起阅读 »
解决MUI轮播组件在隐藏时初始化异常的问题
【背景介绍】
MUI 版本 2.8。
在页面中使用了 Slider 组件(mui-slider),由于轮播面板的数量和内容都是动态从服务器端加载的,为了避免白屏,页面初始化时先设置 Slider 隐藏,同时有加载动画,等待加载完毕后再控制 Slider 显示。
【问题阐述】
初始化:
var silder = mui(".mui-slider").slider();
之后:
silder.nextItem();
silder.prevItem();
silder.gotoItem();
均报 undefined 错误,定位到 mui.js 第 4699 行:
return this.pages[slideNumber][0];
反复实验后发现,只有当 Slider 组件(包括其父容器)显示时,才不会抛异常。this.pages 正常应该是一个 N 维数组(N 取决于轮播区域数量),但异常时变成了一个一维数组。
几经阅读代码,发现 mui.js 第 4658 行存在代码:
// 当slider处于隐藏状态时,导致snap计算是错误的,临时先这么判断一下,后续要考虑解决所有scroll在隐藏状态下初始化属性不正确的问题
var currentPage = this.pages[this.loop ? 1 : 0];
【解决方案】
在 Slider 组件显示后再执行初始化;或调用 slider.refresh(); 方法即可。
【背景介绍】
MUI 版本 2.8。
在页面中使用了 Slider 组件(mui-slider),由于轮播面板的数量和内容都是动态从服务器端加载的,为了避免白屏,页面初始化时先设置 Slider 隐藏,同时有加载动画,等待加载完毕后再控制 Slider 显示。
【问题阐述】
初始化:
var silder = mui(".mui-slider").slider();
之后:
silder.nextItem();
silder.prevItem();
silder.gotoItem();
均报 undefined 错误,定位到 mui.js 第 4699 行:
return this.pages[slideNumber][0];
反复实验后发现,只有当 Slider 组件(包括其父容器)显示时,才不会抛异常。this.pages 正常应该是一个 N 维数组(N 取决于轮播区域数量),但异常时变成了一个一维数组。
几经阅读代码,发现 mui.js 第 4658 行存在代码:
// 当slider处于隐藏状态时,导致snap计算是错误的,临时先这么判断一下,后续要考虑解决所有scroll在隐藏状态下初始化属性不正确的问题
var currentPage = this.pages[this.loop ? 1 : 0];
【解决方案】
在 Slider 组件显示后再执行初始化;或调用 slider.refresh(); 方法即可。

提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
系列文章目录导航:
- 提升HTML5的性能体验系列之一 避免切页白屏
- 提升HTML5的性能体验系列之二 列表流畅滑动
- 提升HTML5的性能体验系列之三 流畅下拉刷新
- 提升HTML5的性能体验系列之四 使用原生UI(nativeUI)
- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
- 提升HTML5的性能体验系列之六 降低内存占用
【本文更新时间2017-4-26】
webview加载的5个事件
webview加载时有5个事件。触发顺序为loading、titleUpdate、rendering、rendered、loaded。
webview开始载入页面时触发loading,
载入过程中如果<title>节点已经解析并赋予新值,触发titleUpdate,
页面开始渲染,触发rendering,
页面渲染完毕,触发rendered,
页面载入完毕触发loaded。
loaded常用于判断页面是否载入完毕,载入完毕才显示新页面。
但有时页面内容很长时,全部载入完毕比较慢,导致显示新窗体比较慢。为了让新窗体打开快点,我们可以在titleUpdate时就显示新窗体。
因为网页本身有分步渲染的机制,所以一般只要滚动前的第一屏页面渲染完毕就不会让用户看到白屏。
在2014年,手机普遍的渲染能力较慢,所以为避免白屏,官方的框架和示例默认都是loaded时show页面。但到了2017年,本地的普通HTML即使不预载,titleupdate时也已经不会白屏了。从HBuilder8.8起,DCloud推出了titlenview的原生title,切屏时title永不会白屏。
如果是从服务器在线载入页面,或者本地的页面非常复杂导致渲染很慢,此时titleUpdate时仍然可能白屏,此时需使用rendering或rendered事件可避免白屏。
为什么rendered和loaded是2个事件呢?
其实在纯本地页面时这2个事件几乎没区别。但有时页面里会引入一些优先级较低的外部远程网络js,比如统计js,一旦网络响应慢,或者干脆是无效引用,虽然页面渲染完了,但loaded会触发的很慢,直到这些网络js也加载好或超时才触发。
有人问plus ready和webview的loaded、以及HTML里的DOMContentLoaded 这3个事件的顺序。
plus ready在HBuilder早期是webview的loaded事件发生时才触发。
但随着技术的进步,目前策略已经变化。
在iOS上,plus ready已经名存实亡,只是为了向下兼容,因为在webview最开始,plus就是生效的。目前iOS上plus ready事件的触发为保持向下兼容也是在webview的loaded时,但该事件触发之前其实plus已经可以使用了。
在安卓上,plus ready默认也是在webview的loaded时,但可通过如下方法,5+ API提前生效可用:http://ask.dcloud.net.cn/article/921。如果开发者使用了该文的方法配置了提前生效,虽然plus ready的执行时间没变,但在titleUpdate后就可以使用plus的api了。
注意:plus提前生效后,在plus ready里操作dom就变的危险了,因为plus ready快于DOMContentLoaded,造成dom还没有准备好。此时操作dom,还是得在DOMContentLoaded之后。同时plus提前生效会让页面本身的js执行时间推后几十至几百毫秒,这点使用时要注意。
注意:以上的事件在实际代码监听时,需要写在不同的webview里。
由于新开的webview里的plus ready时间晚于该webview的loading、titleUpdate,所以在新webview里用plus api监听这2个事件是监听不到初次打开的。
只能在老的webview里对新webview的loading和titleUpdate进行监听。
注意:如果页面是网络页面,并且发生服务器跳转,有可能触发多次titleupdate。
注意:在个别国产手机上,如果网页的title节点内容为空,不会触发titleupdate事件。
提供一个判断webview载入时间的方法。
一般webview载入要多久,开发者可以自己使用计时器计时,计算从开始载入到loaded的时间差。
但首页的载入速度开发者无法编程获得,5+runtime提供了首页的webview的载入时间,plus.runtime.launchLoadedTime。
这个time最大的用途是判断手机性能。
首页正常是本地页面,同样的首页在不同手机上loadedtime值是不同的,根据这个值,就知道了这台手机载入网页的速度到底多快。
这个速度与本地io性能有关,也与计算渲染能力有关。
有了这个值,我们可以根据设备做性能优化。
App的启动加速技巧
首页的配置几乎都是在manifest做,用好manifest才能优化好app的启动速度。
1.首页的顶部title,在manifest里配置laucherwebview的navigationbar,描述title的背景色、文字等样式,因为是原生绘制,要比webview快不少。
2.如果底部有tab,建议在manifest里配原生tab,参考http://ask.dcloud.net.cn/article/12602。如果是顶部可左右拖动的WebviewGroup,则原生tab目前还不能满足这类需求,此时需要用双首页。双首页是一个很有趣的机制,在manifest里配置,DCloud的引擎会同时打开2个webview,而不是先等一个webview的plus生效后通过js再创建另一个webview。
3.然后manifest里配置splash关闭时间为titleUpdate,可以非常早的关闭splash。
在的HBuilder8.8中,支持subnview,这个技术可以在屏幕上引入更多原生渲染的内容,让页面渲染更快。
在提供些其他影响app启动的设置:
如果设置了runmode为解压模式,安装apk后第一次启动时需要先把js等资源解压到sdcard,这里有个耗时。第二次启动就好了。
系列文章目录导航:
- 提升HTML5的性能体验系列之一 避免切页白屏
- 提升HTML5的性能体验系列之二 列表流畅滑动
- 提升HTML5的性能体验系列之三 流畅下拉刷新
- 提升HTML5的性能体验系列之四 使用原生UI(nativeUI)
- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
- 提升HTML5的性能体验系列之六 降低内存占用
【本文更新时间2017-4-26】
webview加载的5个事件
webview加载时有5个事件。触发顺序为loading、titleUpdate、rendering、rendered、loaded。
webview开始载入页面时触发loading,
载入过程中如果<title>节点已经解析并赋予新值,触发titleUpdate,
页面开始渲染,触发rendering,
页面渲染完毕,触发rendered,
页面载入完毕触发loaded。
loaded常用于判断页面是否载入完毕,载入完毕才显示新页面。
但有时页面内容很长时,全部载入完毕比较慢,导致显示新窗体比较慢。为了让新窗体打开快点,我们可以在titleUpdate时就显示新窗体。
因为网页本身有分步渲染的机制,所以一般只要滚动前的第一屏页面渲染完毕就不会让用户看到白屏。
在2014年,手机普遍的渲染能力较慢,所以为避免白屏,官方的框架和示例默认都是loaded时show页面。但到了2017年,本地的普通HTML即使不预载,titleupdate时也已经不会白屏了。从HBuilder8.8起,DCloud推出了titlenview的原生title,切屏时title永不会白屏。
如果是从服务器在线载入页面,或者本地的页面非常复杂导致渲染很慢,此时titleUpdate时仍然可能白屏,此时需使用rendering或rendered事件可避免白屏。
为什么rendered和loaded是2个事件呢?
其实在纯本地页面时这2个事件几乎没区别。但有时页面里会引入一些优先级较低的外部远程网络js,比如统计js,一旦网络响应慢,或者干脆是无效引用,虽然页面渲染完了,但loaded会触发的很慢,直到这些网络js也加载好或超时才触发。
有人问plus ready和webview的loaded、以及HTML里的DOMContentLoaded 这3个事件的顺序。
plus ready在HBuilder早期是webview的loaded事件发生时才触发。
但随着技术的进步,目前策略已经变化。
在iOS上,plus ready已经名存实亡,只是为了向下兼容,因为在webview最开始,plus就是生效的。目前iOS上plus ready事件的触发为保持向下兼容也是在webview的loaded时,但该事件触发之前其实plus已经可以使用了。
在安卓上,plus ready默认也是在webview的loaded时,但可通过如下方法,5+ API提前生效可用:http://ask.dcloud.net.cn/article/921。如果开发者使用了该文的方法配置了提前生效,虽然plus ready的执行时间没变,但在titleUpdate后就可以使用plus的api了。
注意:plus提前生效后,在plus ready里操作dom就变的危险了,因为plus ready快于DOMContentLoaded,造成dom还没有准备好。此时操作dom,还是得在DOMContentLoaded之后。同时plus提前生效会让页面本身的js执行时间推后几十至几百毫秒,这点使用时要注意。
注意:以上的事件在实际代码监听时,需要写在不同的webview里。
由于新开的webview里的plus ready时间晚于该webview的loading、titleUpdate,所以在新webview里用plus api监听这2个事件是监听不到初次打开的。
只能在老的webview里对新webview的loading和titleUpdate进行监听。
注意:如果页面是网络页面,并且发生服务器跳转,有可能触发多次titleupdate。
注意:在个别国产手机上,如果网页的title节点内容为空,不会触发titleupdate事件。
提供一个判断webview载入时间的方法。
一般webview载入要多久,开发者可以自己使用计时器计时,计算从开始载入到loaded的时间差。
但首页的载入速度开发者无法编程获得,5+runtime提供了首页的webview的载入时间,plus.runtime.launchLoadedTime。
这个time最大的用途是判断手机性能。
首页正常是本地页面,同样的首页在不同手机上loadedtime值是不同的,根据这个值,就知道了这台手机载入网页的速度到底多快。
这个速度与本地io性能有关,也与计算渲染能力有关。
有了这个值,我们可以根据设备做性能优化。
App的启动加速技巧
首页的配置几乎都是在manifest做,用好manifest才能优化好app的启动速度。
1.首页的顶部title,在manifest里配置laucherwebview的navigationbar,描述title的背景色、文字等样式,因为是原生绘制,要比webview快不少。
2.如果底部有tab,建议在manifest里配原生tab,参考http://ask.dcloud.net.cn/article/12602。如果是顶部可左右拖动的WebviewGroup,则原生tab目前还不能满足这类需求,此时需要用双首页。双首页是一个很有趣的机制,在manifest里配置,DCloud的引擎会同时打开2个webview,而不是先等一个webview的plus生效后通过js再创建另一个webview。
3.然后manifest里配置splash关闭时间为titleUpdate,可以非常早的关闭splash。
在的HBuilder8.8中,支持subnview,这个技术可以在屏幕上引入更多原生渲染的内容,让页面渲染更快。
在提供些其他影响app启动的设置:
如果设置了runmode为解压模式,安装apk后第一次启动时需要先把js等资源解压到sdcard,这里有个耗时。第二次启动就好了。

如何添加AngularJS、Bootstrap、jQuery Mobile、jQuery UI、Require.js、Underscore等框架的提示
HBuilder7.0.0以后加入对AngularJS、Bootstrap、jQuery Mobile、jQuery UI、Require.js、Underscore等框架Api的提示,使用方式如下:
1.右键使用这些框架的项目

2.勾选对应的框架
3.在HBuilder中使用(以angular.js为例如下图)
HBuilder7.0.0以后加入对AngularJS、Bootstrap、jQuery Mobile、jQuery UI、Require.js、Underscore等框架Api的提示,使用方式如下:
1.右键使用这些框架的项目
2.勾选对应的框架
3.在HBuilder中使用(以angular.js为例如下图)
收起阅读 »

【分享】Html5 Video 实现方案
前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下.
一、 Html5 Video
参考来源: http://www.xuanfengge.com/html5-video-play.html
(这篇博文确实帮助很大)
1.1、 目的
将Html5 Video功能应用到实际项目中,针对不同的平台和环境,进行个性化处理。
基本只考虑webkit浏览器兼容问题
1.2、 Html5 Video支持格式
只支持: .mp4后缀(.h264编码格式),和.webm后缀(专用web视频格式),以及.ogg后缀(音频文件)
注意: Html5 Video 可以添加多个source源来进行兼容适配,这样,当第一个源读取出问题时会自动读取下一个源. 比如可以同时在前面加上.webm和.mp4源,这样一个出错时会自动读取另一个可用源(因为不同浏览器,支持的格式是不一样的)
但是,Hybird模式的 Android 下,有些机型只能读取第一个source来源(测试华为和联想都是),所以也就是说在这种情况下,要确保第一个source源是正确的
各大浏览器兼容如图所示:
见图1
1.3、 不同平台环境和对应实现方案
说明: 这里分为两大块,普通浏览器环境(pc和手机,主要是移动端,pc不做特别处理)和Hybird模式的APP环境(Android和iOS).
注: Html5 video可以播放本地视频或者网络视频
1.3.1、 普通浏览器环境
用Html5 Video 自带的播放栏控件
用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
注: 播放效果则由各大浏览器自行实现
手机端浏览器实现的不同效果,比如:
QQ浏览器(包括QQ客户端内置的浏览器):播放时会自动进入全屏
华为自带浏览器: 正常小窗口播放
1.3.2、 Hybird App环境
说明: 内联播放是指直接在video标签中播放视频,没有必要进入全屏
1.3.2.1、 Android内联播放
用Html5 Video 自带的播放栏控件
用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
*Android内联播放需要注意,必须开启硬件加速,由于有些Android手机 webview是默认关闭硬件加速的,所以必须在创建这个带视频播放的webview时手动添加 硬件加速属性才行.(详情见plus创建webview的style)
style.hardwareAccelerated = true;
1.3.2.2、 iOS内联播放
用Html5 Video 自带的播放栏控件
用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
*内联播放注意要点,由于iOS下默认是全屏播放的,所以需要经过设置才能正常内联播放
第一步:在项目的manifest里面配置允许webview内联播放
"plus": {
"splashscreen": {
"autoclose": true,/*是否自动关闭程序启动界面,true表示应用加载应用入口页面后自动关闭;false则需调plus.navigator.closeSplashscreen()关闭*/
"waiting": true/*是否在程序启动界面显示等待雪花,true表示显示,false表示不显示。*/
},
"allowsInlineMediaPlayback": true,/*设置ios下允许内联播放*/
"popGesture": "close"
第二步: 创建video标签时,手动加上内联播放的属性(iOS不支持preload)
<!--
让ios支持内联播放,必须添加 webkit-playsinline 标签
-->
<video webkit-playsinline id="videoMedia" controls="controls" preload>
这样iOS手机在播放的时候才会采用内联播放
1.3.2.3、 Android非内联播放
通过NJS使用原生播放器来播放视频,传入的url可以是本地的或网络的地址
用 Video 视频统一处理方法处理后,点击图片之后,图片保持不变(所以没有必要隐藏图片),直接获取视频的资源地址,传给原生播放器播放
注: 这种模式下,性能要比直接html5自带播放器播放高
1.3.2.4、 iOS非内联播放
*用Html5 Video 自带的播放栏控件(非内联播放需要去除特定内联属性”webkit-playsinline”,这样才能全屏播放)
if(!isInlinePlay){
//如果是非内敛,ios需要去除内联样式
mediaTarget.removeAttribute('webkit-playsinline');
}
*用 Video 视频统一处理方法处理后,点击图片之后,图片保持不变(所以没有必要隐藏图片),直接调用video.play()播放视频(这时候会用一个全屏播放器来播放视频)
1.3.3、 注意要点
如果采用NJS通过Android原生播放器播放视频,目前无法监听到视频的一些自定义事件.(如下载中,播放完毕,暂停,播放时间等)
而如果采用Html5 Video自带播放,这些是可以通过脚本控制的.
所以选定方案时需要进行衡量
另外,在Html5 Video播放时,无法监听到规定的结束事件seeked,只能在timeUpdate里面判断,如果ended为true就代表结束了.
在NJS通过Android原生播放器播放时,可以通过document监听resume和pause事件判断是否进入播放和退出播放
1.4、 Tips
1.4.1、 关于Video 视频统一处理的方案
说明: 由于将一个<Video>直接显示在页面中,会有各种五花八门的播放器效果,如图:
(这里引用了参考来源的图)
见图2
显然,体验效果并不好,所以现在的做法是用一张模拟播放的图片来替代<Video>所在的地方,而将Video元素设置为11像素大小.然后给图片设置点击监听,监听到点击时,播放视频.
注意:
这里不要用{display: none}或者{width:0;height:0;}的方式,因为这样视频元素会处于未激活的状态,给后续的处理带来麻烦.
这里没有考虑ios<6和一些低版本的Android的兼容性问题了(这些版本里,无法直接通过video.play()来播放),因为项目环境基本上要求Android>4.0 iOS 7.0以上的.
关于点击图片播放视频后,如果是内联播放模式下(或者是普通浏览器),就应该将图片隐藏,然后将视频大小设置为本来的大小(一般为图片大小);如果是非内联播放模式(全屏模式),就没有必要隐藏图片了,因为iOS下会自动打开一个全屏播放器来播放视频,Android下考虑到Html5 video较卡,所以也会通过NJS使用原生播放器来全屏播放视频.
1.4.2、 Android NJS播放视屏的实现代码
说明: 这个是Dcloud论坛中有人分享的
//非内联模式下的plus下的android才用到
var Intent = plus.android.importClass("android.content.Intent");
var Uri = plus.android.importClass("android.net.Uri");
var main = plus.android.runtimeMainActivity();
var intent = new Intent(Intent.ACTION_VIEW);
var uri = Uri.parse(url);
intent.setDataAndType(uri, "video/*");
main.startActivity(intent);
1.4.3、 如何读取元素的宽高
在获取视频的宽度时,发现用 video.style.width无法获取到宽度.
后来查了资料,发现dom.style.width(height)只能获取在stye直接赋予的值.而如果是通过css样式表赋予的值是无法直接获取的,只能通过dom.offsetWidth(offsetHeight)获取.
设置元素宽和高是不要直接在style里设置,而是最好通过css样式表赋予
*读取元素宽和高时,用offsetWidth(offsetHeight)
1.4.4、 关于全屏播放的问题
在PC端webkit浏览器下,全屏代码如下:
进入全屏: videoContainer(对应的dom).webkitRequestFullscreen();
退出全屏: document.webkitCancelFullScreen();
*但是经测试,在手机浏览器和Hybird模式下的手机环境中都无法使用,
应该是手机浏览器中video 播放器的全屏模式和pc端的有区别,已经脱离了webkit的全屏组件,而是用原生自己实现的.
1.5、 遇到问题及解决方法
1.5.1、 Video.currentTime 设置值时设置无效,或者变为0
原因分析:
与测试的服务器和端口有关,测试环境是放在hbuild本地浏览器的,没有处理好视频快进问题,所以会导致每次快进后,视频都会重置-在某些测试服务器上,则出现快进无效,但不会重置
解决方法:
将网页用其它正式服务器打开均可正常,如tomcat,wampserver,甚至直接在本地打开也行.
1.5.2、 无法通过代码Video.src获取资源路径
原因分析:
本实例中,Video是通过source添加src的,无法直接读取video的src
解决方法:
可以通过读取到第一个source的标签,再获取source的src
注:本来这个方法有一个缺点就是有可能第一个source的src不可用.但是由于Android中第一个source必须有用才行.否则无法正常播放.所以在确保第一个source正确的情况下能这样用.
1.5.3、 部分Android机型无法退出全屏
描述:
在使用Html5 Video自带播放器播放时,部分Android机型(如联想K860点击全屏按钮进入全屏后,无法退出全屏-因为进入全屏后,全屏按钮不见了)
原因分析: 可能是手机厂商擅自劫持了浏览器或者篡改了浏览器实现方式
解决方法:
目前无法解决,在这类机型中,建议直接采用非内联模式播放或者是尽量不要手动进入全屏
1.6、 示例Demo
注: 示例视频也可自己更改为自己的网络视频或者本地视频,由于视频文件太大,所以上传时就删掉了
见源码附件
前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下.
一、 Html5 Video
参考来源: http://www.xuanfengge.com/html5-video-play.html
(这篇博文确实帮助很大)
1.1、 目的
将Html5 Video功能应用到实际项目中,针对不同的平台和环境,进行个性化处理。
基本只考虑webkit浏览器兼容问题
1.2、 Html5 Video支持格式
只支持: .mp4后缀(.h264编码格式),和.webm后缀(专用web视频格式),以及.ogg后缀(音频文件)
注意: Html5 Video 可以添加多个source源来进行兼容适配,这样,当第一个源读取出问题时会自动读取下一个源. 比如可以同时在前面加上.webm和.mp4源,这样一个出错时会自动读取另一个可用源(因为不同浏览器,支持的格式是不一样的)
但是,Hybird模式的 Android 下,有些机型只能读取第一个source来源(测试华为和联想都是),所以也就是说在这种情况下,要确保第一个source源是正确的
各大浏览器兼容如图所示:
见图1
1.3、 不同平台环境和对应实现方案
说明: 这里分为两大块,普通浏览器环境(pc和手机,主要是移动端,pc不做特别处理)和Hybird模式的APP环境(Android和iOS).
注: Html5 video可以播放本地视频或者网络视频
1.3.1、 普通浏览器环境
用Html5 Video 自带的播放栏控件
用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
注: 播放效果则由各大浏览器自行实现
手机端浏览器实现的不同效果,比如:
QQ浏览器(包括QQ客户端内置的浏览器):播放时会自动进入全屏
华为自带浏览器: 正常小窗口播放
1.3.2、 Hybird App环境
说明: 内联播放是指直接在video标签中播放视频,没有必要进入全屏
1.3.2.1、 Android内联播放
用Html5 Video 自带的播放栏控件
用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
*Android内联播放需要注意,必须开启硬件加速,由于有些Android手机 webview是默认关闭硬件加速的,所以必须在创建这个带视频播放的webview时手动添加 硬件加速属性才行.(详情见plus创建webview的style)
style.hardwareAccelerated = true;
1.3.2.2、 iOS内联播放
用Html5 Video 自带的播放栏控件
用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
*内联播放注意要点,由于iOS下默认是全屏播放的,所以需要经过设置才能正常内联播放
第一步:在项目的manifest里面配置允许webview内联播放
"plus": {
"splashscreen": {
"autoclose": true,/*是否自动关闭程序启动界面,true表示应用加载应用入口页面后自动关闭;false则需调plus.navigator.closeSplashscreen()关闭*/
"waiting": true/*是否在程序启动界面显示等待雪花,true表示显示,false表示不显示。*/
},
"allowsInlineMediaPlayback": true,/*设置ios下允许内联播放*/
"popGesture": "close"
第二步: 创建video标签时,手动加上内联播放的属性(iOS不支持preload)
<!--
让ios支持内联播放,必须添加 webkit-playsinline 标签
-->
<video webkit-playsinline id="videoMedia" controls="controls" preload>
这样iOS手机在播放的时候才会采用内联播放
1.3.2.3、 Android非内联播放
通过NJS使用原生播放器来播放视频,传入的url可以是本地的或网络的地址
用 Video 视频统一处理方法处理后,点击图片之后,图片保持不变(所以没有必要隐藏图片),直接获取视频的资源地址,传给原生播放器播放
注: 这种模式下,性能要比直接html5自带播放器播放高
1.3.2.4、 iOS非内联播放
*用Html5 Video 自带的播放栏控件(非内联播放需要去除特定内联属性”webkit-playsinline”,这样才能全屏播放)
if(!isInlinePlay){
//如果是非内敛,ios需要去除内联样式
mediaTarget.removeAttribute('webkit-playsinline');
}
*用 Video 视频统一处理方法处理后,点击图片之后,图片保持不变(所以没有必要隐藏图片),直接调用video.play()播放视频(这时候会用一个全屏播放器来播放视频)
1.3.3、 注意要点
如果采用NJS通过Android原生播放器播放视频,目前无法监听到视频的一些自定义事件.(如下载中,播放完毕,暂停,播放时间等)
而如果采用Html5 Video自带播放,这些是可以通过脚本控制的.
所以选定方案时需要进行衡量
另外,在Html5 Video播放时,无法监听到规定的结束事件seeked,只能在timeUpdate里面判断,如果ended为true就代表结束了.
在NJS通过Android原生播放器播放时,可以通过document监听resume和pause事件判断是否进入播放和退出播放
1.4、 Tips
1.4.1、 关于Video 视频统一处理的方案
说明: 由于将一个<Video>直接显示在页面中,会有各种五花八门的播放器效果,如图:
(这里引用了参考来源的图)
见图2
显然,体验效果并不好,所以现在的做法是用一张模拟播放的图片来替代<Video>所在的地方,而将Video元素设置为11像素大小.然后给图片设置点击监听,监听到点击时,播放视频.
注意:
这里不要用{display: none}或者{width:0;height:0;}的方式,因为这样视频元素会处于未激活的状态,给后续的处理带来麻烦.
这里没有考虑ios<6和一些低版本的Android的兼容性问题了(这些版本里,无法直接通过video.play()来播放),因为项目环境基本上要求Android>4.0 iOS 7.0以上的.
关于点击图片播放视频后,如果是内联播放模式下(或者是普通浏览器),就应该将图片隐藏,然后将视频大小设置为本来的大小(一般为图片大小);如果是非内联播放模式(全屏模式),就没有必要隐藏图片了,因为iOS下会自动打开一个全屏播放器来播放视频,Android下考虑到Html5 video较卡,所以也会通过NJS使用原生播放器来全屏播放视频.
1.4.2、 Android NJS播放视屏的实现代码
说明: 这个是Dcloud论坛中有人分享的
//非内联模式下的plus下的android才用到
var Intent = plus.android.importClass("android.content.Intent");
var Uri = plus.android.importClass("android.net.Uri");
var main = plus.android.runtimeMainActivity();
var intent = new Intent(Intent.ACTION_VIEW);
var uri = Uri.parse(url);
intent.setDataAndType(uri, "video/*");
main.startActivity(intent);
1.4.3、 如何读取元素的宽高
在获取视频的宽度时,发现用 video.style.width无法获取到宽度.
后来查了资料,发现dom.style.width(height)只能获取在stye直接赋予的值.而如果是通过css样式表赋予的值是无法直接获取的,只能通过dom.offsetWidth(offsetHeight)获取.
设置元素宽和高是不要直接在style里设置,而是最好通过css样式表赋予
*读取元素宽和高时,用offsetWidth(offsetHeight)
1.4.4、 关于全屏播放的问题
在PC端webkit浏览器下,全屏代码如下:
进入全屏: videoContainer(对应的dom).webkitRequestFullscreen();
退出全屏: document.webkitCancelFullScreen();
*但是经测试,在手机浏览器和Hybird模式下的手机环境中都无法使用,
应该是手机浏览器中video 播放器的全屏模式和pc端的有区别,已经脱离了webkit的全屏组件,而是用原生自己实现的.
1.5、 遇到问题及解决方法
1.5.1、 Video.currentTime 设置值时设置无效,或者变为0
原因分析:
与测试的服务器和端口有关,测试环境是放在hbuild本地浏览器的,没有处理好视频快进问题,所以会导致每次快进后,视频都会重置-在某些测试服务器上,则出现快进无效,但不会重置
解决方法:
将网页用其它正式服务器打开均可正常,如tomcat,wampserver,甚至直接在本地打开也行.
1.5.2、 无法通过代码Video.src获取资源路径
原因分析:
本实例中,Video是通过source添加src的,无法直接读取video的src
解决方法:
可以通过读取到第一个source的标签,再获取source的src
注:本来这个方法有一个缺点就是有可能第一个source的src不可用.但是由于Android中第一个source必须有用才行.否则无法正常播放.所以在确保第一个source正确的情况下能这样用.
1.5.3、 部分Android机型无法退出全屏
描述:
在使用Html5 Video自带播放器播放时,部分Android机型(如联想K860点击全屏按钮进入全屏后,无法退出全屏-因为进入全屏后,全屏按钮不见了)
原因分析: 可能是手机厂商擅自劫持了浏览器或者篡改了浏览器实现方式
解决方法:
目前无法解决,在这类机型中,建议直接采用非内联模式播放或者是尽量不要手动进入全屏
1.6、 示例Demo
注: 示例视频也可自己更改为自己的网络视频或者本地视频,由于视频文件太大,所以上传时就删掉了
见源码附件
收起阅读 »
不错的开发工具
本来是去知乎上找apicloud的,发现了hbuilder,不错的开发环境啊。
记录1:使用小米1s测试demo,很便捷。使用iPhone5s开始怎么也测试不出来,后来把itunes关掉,把hbuilder也关掉重新打开,就ok了。可以在window7上调试iPhone真是不错的体验!(macbook太冰了,冻死个人)
需求:官方有没有视频教程啊,收费也可以啊(貌似市场非常大,建议联合第三方机构推出系列教程,能接收收费教程的)。照顾一下像我这样的新手(懒惰的常青新手)
本来是去知乎上找apicloud的,发现了hbuilder,不错的开发环境啊。
记录1:使用小米1s测试demo,很便捷。使用iPhone5s开始怎么也测试不出来,后来把itunes关掉,把hbuilder也关掉重新打开,就ok了。可以在window7上调试iPhone真是不错的体验!(macbook太冰了,冻死个人)
需求:官方有没有视频教程啊,收费也可以啊(貌似市场非常大,建议联合第三方机构推出系列教程,能接收收费教程的)。照顾一下像我这样的新手(懒惰的常青新手)
收起阅读 »
怎么学习使用HBuilder开发跨平台移动APP?
推荐国内首推的跨平台移动APP开发专业培训机构-东翌学院是Dcloud的合作培训机构,跨平台APP开发整体课程在线直播+课程源码+全套视频,最新最全的APP开发,HB和MUI的全套视频,零基础都可以学习,更有高级进修课程,30天最快速的开发跨平台APP!咨询报名QQ:410355878 网址:http://www.dongyixueyuan.com/ 欢迎有意向学习的朋友加好友咨询!谢谢Dcloud提供这么好的平台!
推荐国内首推的跨平台移动APP开发专业培训机构-东翌学院是Dcloud的合作培训机构,跨平台APP开发整体课程在线直播+课程源码+全套视频,最新最全的APP开发,HB和MUI的全套视频,零基础都可以学习,更有高级进修课程,30天最快速的开发跨平台APP!咨询报名QQ:410355878 网址:http://www.dongyixueyuan.com/ 欢迎有意向学习的朋友加好友咨询!谢谢Dcloud提供这么好的平台!
收起阅读 »