流应用开发指南

概述

\n

通过HTML5做跨平台App,以往都是创业公司或外包公司在做。
一线的互联网公司不太在意研发成本,很少使用HTML5做App,即便5+已经可以达到原生的功能和体验。
流应用不是一个开发产品,是一个发行产品,它从另一个角度给一线互联网公司进入HTML5阵营一个重要动力。

流应用,结合了原生App和Web App的优势,又消除了各自的缺点。
基于5+的HTML、js等程序可以达到原生的效果,同时DCloud的专利流式发行技术实现让应用边用边下,类似流媒体,免除过往从下载到安装多步
操作,实现5秒内完成App的安装和启动。

以往安卓应用市场下载原生App,从点击开始,经历下载-启动安装包-确认权限-解压安装-启动应用等多个流程,根据主流应用市场的数据,从下载到App真正激活启动,折损50%的用户。100次下载中只有50个真正启动了App。
而流应用,把激活率从50%提升至95%。

目前各大App开发商的推广人员都非常关注流应用,这意味着他们的业绩能大幅提升。

开发者使用5+开发的App,之前是把5+引擎和开发者的前端代码打包为apk和ipa发行到原生应用市场。
但流应用出现后,引擎预置到应用市场中(如360手机助手),开发者只需提交前端文件到应用市场,5+引擎的流应用模块会从服务器端流式加载HTML文件并安装到手机上。
这样还带来一个好处就是流应用大幅减少了安装包的体积。
以挑食火锅为例,使用5+打包apk后的体积是4M,但流应用发行时,由于5+引擎提前预置在手机上,并且经过DCloud的压缩技术,使得挑食火锅的流应用体积只有400k,体积减少90%
这还不够酷,这400k里,手机用户初次下载时仅下载100k,App就能启动,剩下300k在后面继续下载,边用边下,这也是流应用之所以叫流应用的原因。

关于流应用的更多介绍,可以看官网介绍http://www.dcloud.io/streamapp.html
强烈推荐了解流应用的各种入口演示视频

流应用如何开发

\n

  • 如果你还不会开发5+app,点此看5+app入门教程

  • 如果你已经有HTML5手机网站、微信公众号、微信小程序的开发商,参考M站改造为流应用的指南


  • 如果你已经开发了5+App,那么你可以申请使用DCloud的自动转换服务,把5+App直接转换发布到流应用平台。
    使用你的HBuilder注册邮箱,发邮件给stream@dcloud.io。
    邮件标题:申请转换流应用-%appname%
    邮件内容:app获取地址,需要360手机助手(zhushou.360.cn)或应用宝(myapp.com)上的地址
    未在这2个平台上线的app暂时无法自动转换为流应用。
    注意提交的App需用户体验良好、质量过关、有一定用户基础。


  • 如果你不希望自动转换,想手动发布流应用,那么在HBuilder里的发行菜单里,有发行为流应用。
    手动发行流应用需要注意几个问题。


\n

  1. 配置页面引用关系,在HBuilder点发行为流应用时,有向导


  2. 推荐使用流应用的关于模板
    在DCloud标准示例Hello H5+里的about界面模板,里面集成了流应用的快码、分享直通车、快捷方式修复功能,推荐引入。


  3. 升级的处理
    流应用的升级是DCloud独立提供的、更强大的、差量升级技术。
    请不要在流应用里检查更新,判断在流应用下,不走检查更新代码,避免任何apk、wgt、wgtu等升级方式的代码执行。
    也不要在app的设置或关于中放置检查更新的按钮。
    如果你的流应用要升级,请在HBuilder里直接提交新版,流应用的升级平台会自动计算差量、自动省流量更新。


\n
var ua = navigator.userAgent
//升级逻辑:判断5+环境下,且不是流应用
if(ua.indexOf("Html5Plus">0&&ua.indexOf("StreamApp")==-1)){
//继续执行升级逻辑
}
\n

若使用mui框架的话,可以简化代码:

//升级逻辑:判断5+环境下,且不是流应用
if(mui.os.plus&&!mui.os.stream){
//继续执行升级逻辑
}
\n

流应用如何测试

\n

HBuilder6.6版本起支持流应用调试。
点击菜单“发行-提交流应用到测试服务器”,如下图
image
点击后界面如下图
image

1.配置页面引用关系

\n

页面引用关系描述了App项目页面间及页面与资源间的关系,正确的页面引用关系可用于指导流应用引擎下载文件。
工程中所有文件的页面引用关系都必须配置正确;
点击上图中的"页面引用关系"链接,可跳转至页面引用关系可视化配置处,如下图
image
页面引用关系配置教程

2.提交流应用到测试平台

\n

点击"立即提交"按钮,可提交此App到流应用测试平台,提交完毕后如下图
image
此时界面显示最后一次提交测试服务器的流应用的版本号及流应用二维码
注:
1.每次提交请确保manifest.json里的版本号比测试服务器上版本号大
2.请确保提交项目的Appid是使用本人的HBuilder账户申请的,暂不支持提交其他人的项目到测试平台
如果创建项目的人已经离职,且不能收回且HBuilder账户,则需要重新在HBuilder里建一个项目,使用新的appid操作。

3.扫码测试流应用

\n

  1. 手机上安装DCloud流应用管理器,扫码测试。每个流应用在HBuilder的发行-发行为流应用界面里都有一个唯一的二维码,扫码即可安装。

  2. 通过360手机助手扫描HBuilder发行流应用界面中的二维码即可测试流应用
    如未安装360手机助手可点此下载或使用手机扫描下方二维码下载360手助。

    360手机助手的下载二维码。

\n

通过扫描体验和测试,看App是否可正常且快速的被安装到手机上。
遇到问题再进一步调整页面引用关系的配置。
推荐把首页的资源控制在100k左右,以保证App可快速启动和安装。

但注意版本之间有差异,如果要发布到360上,还是推荐使用360手助来测试。
此外注意,未正式发行的测试版流应用不会自动在桌面创建快捷方式,开发者为调试方便,可以在测试应用告警时点信任此应用,然后就可以创建快捷方式。

4.优化流应用体积和秒开效果

\n

流应用的特点是占用流量小,可以秒开和边用边下。
但有的开发者不太注意工程代码优化,导致无法秒开和占用太多流量。

4.1 优化包体积的方式包括:

\n

a). 去掉不必要的文件。
在manifest里有一个页面引用关系,其中有一个其他资源区,带问号的表示HBuilder认为它属于空闲资源,就是工程实际并没有使用的文件。
请检查下是否确认用不到这些文件,然后把不用的文件删掉或配置为打包不包括后再重新提交。
配置文件打包时不包含有2个方法,1把不打包的文件放入unpackage目录里;2在manifest里指定哪些目录和文件不打包。参考http://ask.dcloud.net.cn/article/480
b). 压缩大文件,如大的js。
如果是框架,直接使用min格式文件,比如把mui.js换为mui.min.js。
自己写的js,也尽量压缩下。
c). 优化本地图片的体积。
图片太大即影响包体积,又影响app运行时的内存占用,尽可能压缩小。

4.2 优化秒开速度的技巧:

\n

秒开的关键在于app的首页资源体积小。比如大众点评外卖的流应用首页资源只有100k左右,所以可以秒开,其他资源文件是在使用过程中持续下载的。
所以控制首页资源体积比较重要。
在manifest的页面引用关系界面查看首页所包含的资源。
引用关系要保证正确和精准,关系少了,会导致app第一次进入时报错;关系多了,会导致首页下载时间变长。
在引用关系正确的之后,再看看首页及资源的体积是否还有缩小的空间,比如去掉多余的代码和压缩图片。
首页及资源文件压缩zip后体积控制在100k左右则秒开体验会很好。

流应用的关键在于省流量、可秒开,请开发者注意优化,发挥好流应用的特色价值。

正式发布流应用

\n

经过测试后,
- 正式发布到360手机助手请按此流程发布:http://bbs.360safe.com/forum.php?mod=viewthread&tid=6468265&page=1&extra=
如果该App的apk版本已经在360或其他应用市场上线过,请提供相应链接,并确保本次提交的开发商等信息与apk版本一致,这样可以加速上线审核过程。
目前360手机助手审核要求较严格,体验不够精品、用户需求量不够大的app比较难审核通过。
- 如果不上360手机助手,单独上DCloud的流应用平台,则
使用你的HBuilder注册邮箱,发邮件给stream@dcloud.io。
邮件标题:申请单独上线流应用-%appname%
邮件内容:apk获取地址,需要360手机助手(zhushou.360.cn)或应用宝(myapp.com)上的地址。也就是需要先打包流应用为apk,通过某个主流应用市场的审核,然后DCloud可以将其自动转换为流应用。
注意提交的App需用户体验良好、质量过关。
再次提醒,提交前注意看前述开发注意事项,处理快捷方式和升级的问题。
再次提醒,先在测试平台测试完毕再提交正式发布申请。

流应用更新

\n

流应用是实时提交实时生效更新的。
更新虽然方便,但注意未测试好不要直接更新到正式平台,以免给用户发布调试版本。
流应用有专用的测试平台,在测试平台先提交更新,测试,没问题再发布到正式平台。
流应用有多种更新方式可供选择,具体见:http://ask.dcloud.net.cn/article/550

其他注意

\n

360手助内置的流应用引擎与普通5+引擎的区别

\n

注:因引擎升级较快,此区别为2015-10-21日期的区别。
1. 默认不包含plus的Contact、Maps、Speech、Statistic组件。
2. plus.Geolocation支持os自带定位及高德定位,不支持百度定位。
Android上使用plus的api仍然可以通过高德定位来获取街道信息,即使之前使用百度定位获取街道信息,在流应用里会自动改掉用高德的街道信息,只是获取到的坐标系和百度坐标系不同,需要参考网络资料进行坐标系转换。
3. plus.push推送仅支持360推送。
其推送后台调用方式暂未公开开放。如果推送不影响核心业务,建议先不带推送上流应用。
如果需要非实时的拉新或拉活类push,可以加入QQ群471285299,联系DCloud的商务。
4. plus.Payment
目前不支持微信SDK支付,但支持微信的扫码和H5支付。其他支付也可正常使用。
若想使用微信支付有2种方式:
4.1.向微信申请H5支付,该功能属于非公开功能,但可以申请,比如唯品会、京东秒杀、携程酒店、卖座电影、蛋糕叔叔等很多wap站就使用了微信的wap支付。它其实走的是微信的公众号支付接口。参考https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1。如果申请不下来,也可以通过现在支付等三方代理合作http://www.ipaynow.cn/
4.2.通过二维码扫描中转,把付款信息生成二维码,通过微信识别二维码进行支付。参考https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1
5. plus.Share
plus.share在360的运行环境下,不支持qq的sdk分享。在非360的流应用环境下无此限制。
同时微信分享暂不支持自定义配置appkey。
也就是使用方条链接的方式分享到微信里,会显示分享工具是360手机助手或stream app。
除了sdk分享,Android更多时候其实是通过Native.js调用系统分享弹出更多。可参考Hello H5+里关于界面的分享示例里的更多分享。
系统分享可以调用微信、朋友圈、微博、qq、短信、邮件、evernote等各种本机已经安装的app并进行分享。
系统分享不涉及appkey,分享出去的内容不会显示来自于xxx。
系统分享在微信分享里有注意事项:只有分享图片时,才能出现微信朋友圈,文字是不能进微信朋友圈的。方条链接无法生成,系统分享只能分享文字、图片、和普通url,不能生成方条链接。
6. plus.OAuth
在360环境下,含360账户登陆,不含微信、微博、QQ的SDK登陆。
在非360的流应用环境下,微信、微博、QQ的SDK登陆均可正常使用。但没有360登陆。
如果在360环境下,推荐开发者使用360账户登陆。不同于其他微信、微博等单点登陆仅给开发者开放极少的用户数据,360账户登陆是可以给开发者共享手机号的。
对于很多o2o和电商app,必须要手机号,而每次app激活后需要用户输入手机号、等待验证码、填写验证码,这个过程极容易折损用户。
如果支持了360登陆,则用户不需要输入手机号等验证码,更加方便,而开发者还可以少发一条短信,节省成本。
关于360登陆的示例,可以看卖座电影流应用里的样子。
360登陆的客户端代码还是plus.oauth,但服务器代码需要与360服务器交互一下方能获得手机号。
如果要开发360登陆,且需要服务器接口,可以加入流应用QQ群471285299联系我们,需要认证一下才能拿到服务器开发文档。
如果在360环境下仍需要qq、微博登陆,可以转为wap版登陆。

360浏览器内置的流应用引擎与360手助的流应用引擎的区别

\n
需要注意目前360浏览器内置的流应用引擎不支持360登陆,其他与360手助的引擎功能一致。
\n

鉴于流应用引擎部分功能的不同,请根据 if (mui.os.stream) {} 或UA 来判断当前的运行环境,隐藏不支持的功能的使用,如去掉语音输入的麦克风图标或微信登陆的图标。

更多问题可加入流应用QQ交流群471285299继续沟通,也可以在问答系统里发帖提问。

常见FAQ

\n

Q: 流应用的秒开按钮是打开一个网页吗?
A: 不是。秒开是流应用App从下载到安装到启动的3步合一简称秒开,它打开的并不是在线网页。
流应用虽然是js编程语言,但并不是b/s网页,不是web,而是一个典型的c/s客户端,它是原生App一样的c/s结构。

Q: 流应用只能从360手机助手里进入和使用吗?
A: 不是。流应用从360手机助手里下载安装,以后的启动是从手机桌面直接启动,不是每次到360手机助手里启动。

Q: 流应用在没网络的时候会不会404白屏?
A: 不会。可以体验下36Kr资讯的流应用,没有网络时(比如打开飞行模式),之前的新闻照样离线看。

Q: 流应用的离线能力是缓存吗?是不是三方清理软件清除缓存后流应用就不能用了?
A: 不是。流应用虽然是js,但是可以调用操作系统40万原生API,可以使用原生存储,不会被清理。
当然开发者也可以使用网页缓存,DCloud的开发工具并不限制,只是使用网页缓存是真的可能会被三方清理软件清除掉。

Q: 流应用和原生应用可以在一个应用市场并存吗?
A: 可以并存。也可以改名字、或图标加修饰。

Q: 流应用仅支持360手机助手吗?其他渠道能发行流应用吗?
A: 目前集成流应用引擎并上线的发行渠道有360手机助手、360手机浏览器,还有很多发行渠道已经加入HTML5中国产业联盟,陆续在集成流应用引擎,上线后我们会公开通告。
事实上流应用最重要发行方式并不是在应用市场内搜索发行,而是利用流应用引擎上亿的装机量,通过push和url schemes快速导用户,这比在应用市场发展用户快的多。
众多一线互联网公司在做流应用,并不是看中360手助内的发行量。而是因为通过流应用引擎的覆盖,有更快速的上量方案,快速增加用户,并且保证留存和付费转换。
具体可以加群详聊。

Q: 流应用是否支持iOS
A: Appstore上搜索“流应用”,下载DCloud的流应用管理器,在里面使用流应用。
另外流应用在iOS上无法自动创建桌面图标,需要用户在流应用列表里左滑,选择添加到桌面主屏,根据向导手动添加桌面快捷方式。

Q:流应用所需要的权限依赖主引擎,如果用户不给主引擎权限怎么办
A: 在原生开发里,当用户不给app权限时,app可以检测到并提醒用户赋权。在流应用里流程是一样的,js代码可以检测到赋权状态,并给用户提示,还可以跳转到相应设置界面。

Q:分享时如果被分享者手机上没有流应用引擎会怎么样?
A: 此时选项由开发者设定,或者提示用户下载原生App,或者提示用户下载流应用引擎。如果涉及直通车业务,则建议提示用户下载流应用引擎。仅800k大小,下载后仍然可自动启动相应的流应用的指定界面。

Q: 流应用是否可以给原生App导流?
A: 流应用代码如何实现取决于开发者自己,检测到wifi下并下载apk这些代码都可以自己实现。但如果功能一样,则一般不推荐导流原生,打扰用户又没有给用户带来新价值。
另外流应用不是wap页面,不能像wap一样挂一个banner条来引导用户下载原生app,这种方式太影响流应用的用户体验,所以带这种banner的不能上线到流应用正式平台里。

Q: 开发流应用,又多一套产品,研发成本又增加了?
A: 一旦流应用试点成功,可以做到原生iOS、Android、流应用、HTML5手机站一套架构。研发成本大幅下降而不是增加。
如果已经有了原生版又开发流应用,一般是与HTML5版本合并管理,通过条件编译比如glup来实现一套源码。这样可以有效同步业务逻辑。此时研发成本虽有所增加,但市场成本、获取用户的成本大幅下降,也是非常值得的。

Q: 流应用的渠道考核走HTML5的还是走原生的,还是单独?
A: 流应用与原生一样,启动后通过同样的接口给服务器传递激活信息,同样上报IMEI。
标准的c/s流应用,因为不是b/s网页,没有PV、UV概念,也无法走传统的HTML5网页统计。所以一般是走到了原生的统计口径,当然也可以给流应用一个单独参数标志,以区隔这种推广方式的效果。
对于wap站转换的流应用,如果嫌麻烦,也可以继承之前wap站的pc、uv统计接口。


10 分享
DCloud_MUI_果汁 ThinkCMF 感受呼吸 鹏程 wenju M5 吴豪 DCloud_客服_Trust young1 zhuhong02199@163.com
ThinkCMF

ThinkCMF

赞!很赞!
1 赞 2015-10-21 14:38
蝈蝈

蝈蝈

看起来不错!
0 赞 2015-10-23 09:01
isilent

isilent

看起来挺不错,支持了~
0 赞 2015-10-23 11:26
鹏程

鹏程

支持
0 赞 2015-10-24 11:48
anke

anke

有个问题啊,自己扩展的原生插件怎么用上流应用啊?
0 赞 2015-10-27 09:48
DCloud_heavensoft

DCloud_heavensoft 回复 anke

目前版本的流应用还不支持原生插件,后续我们升级后会再公告
0 赞 2015-10-27 21:25
我那颗冰冷的心

我那颗冰冷的心

rooturl应该怎么写啊 你们有没有一个官方qq群什么的啊
0 赞 2015-11-11 16:54
DCloud_heavensoft

DCloud_heavensoft 回复 我那颗冰冷的心

官方有10个群,你先加这个群吧。483608415
0 赞 2015-11-12 04:18
星际

星际

看介绍,流应用可以发布到微信公众号和百度直达号等,请问具体怎么部署呢?
0 赞 2015-11-25 16:45
gadget2k

gadget2k

扫描以后为何是在浏览器中打开连接?而且点击“启动或安装app"后一闪而过。什么都没有发生。
0 赞 2015-11-30 20:51
DCloud_heavensoft

DCloud_heavensoft 回复 gadget2k

扫的哪个码?用什么软件什么版本扫的?
0 赞 2015-12-01 19:48
gadget2k

gadget2k 回复 DCloud_heavensoft

就是hbuilder的流应用测试服务器那个,发行那个菜单里的。用的最新的360手机助手
0 赞 2015-12-02 09:17
DCloud_heavensoft

DCloud_heavensoft 回复 gadget2k

最新的360手机助手正式版是3.5。可以在http://sj.360.cn下载。下载时注意别被三方拦截。
0 赞 2015-12-02 15:10
DCloud_heavensoft

DCloud_heavensoft 回复 wenju

上亿用户有360手机助手,这个基数还不够?而且做起来不费劲,半个小时搞定。
0 赞 2015-12-08 23:46
平凡

平凡

如果手机里没有装360手机助手或其它类别的手机助手,流应用还能不能安装到手机上呀?
1 赞 2015-12-11 11:08
DCloud_heavensoft

DCloud_heavensoft 回复 平凡

流应用当然要有流应用引擎存在才能用。对于开发商而言,流应用和原生包是并存的,手机上有什么就用什么
0 赞 2015-12-14 16:08
Humor

Humor

如果流应用引擎360卸载了,通过360安装的流应用还能正常使用吗?通过引擎安装的流应用独立存储还是通过引擎目录存储?在不远的未来,Dcloud是不是能找Google和苹果合作,让Android和ios自带流引擎?
我是不是可以开发一个流引擎来做应用平台啊?/偷笑
0 赞 2015-12-15 12:55
DCloud_heavensoft

DCloud_heavensoft 回复 Humor

很多手机厂商已经与我们在沟通了。不远的未来,相信流引擎会成为rom里的基础服务:)
0 赞 2015-12-16 22:15
Humor

Humor 回复 DCloud_heavensoft

支持!
0 赞 2015-12-16 22:43
rainwolf911

rainwolf911

我最关心的问题,这个Html5+开发出来的应用,能当成Web页面直接在所有浏览器上运行吗?
还是只能开发APP?如果丢掉了Web能力,那竞争力下降好多哦。还有就是对游戏的支持如何,现在看到的两点是封装了40W+的手机API,但是又要区分安卓和IOS,并没有很好的统一跨平台,跟Adobe的AIR比还是差一些啊
0 赞 2016-01-17 13:02
DCloud_heavensoft

DCloud_heavensoft 回复 rainwolf911

1.看官网的mui产品介绍,使用mui可通知发布为app和web。
2.看文档中心概述,Native.js不常用,大部分常用的都是HTML5+的规范,这些规范是双平台通用的。
3.我们目前主要在Android上做流应用
0 赞 2016-01-18 04:50
EQ

EQ

把上面的那段创建快捷方式的代码写到了plus.ready里 为什么创建不了快捷方式啊
0 赞 2016-02-27 22:39
送礼的snake

送礼的snake 回复 kingda

这一点我也觉得非常不妥,支持楼上的。
0 赞 2016-03-12 10:37
young1

young1

支持~!
0 赞 2016-09-06 15:27

要回复文章请先登录注册