流应用开发指南

概述

\n

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

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

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

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

开发者使用5+开发的App,之前是把5+引擎和开发者的前端代码打包为apk和ipa发行到原生应用市场。
但流应用出现后,引擎预置到应用市场或rom中,开发者只需提交前端文件到应用市场,5+引擎的流应用模块会从服务器端流式加载HTML文件并安装到手机上。
这样还带来一个好处就是流应用大幅减少了安装包的体积。

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

流应用如何开发

\n

开发者可以根据自己的现状,选择不同的流应用开发模式,概括起来主要有如下几种模式:

  • 初创阶段:基于HTML5+mui框架实现跨平台开发
  • 已有5+ App:将5+ App直接发布为流应用
  • 已有H5站点:通过H5站点增强实现
  • 已有微信小程序:通过微信小程序转换
\n

基于HTML5+mui实现跨平台开发

\n

作为创业公司,如果还没有开发App,则建议使用mui框架,实现一次开发,同时发布到Android应用市场、Apple App Store、H5网站、流应用、,大幅降低开发成本;mui是一套UI框架,同时封装了HTML5+中的窗口管理部分,方便开发者快速开发;基于HTML5+规范的应用可以直接打包为apk和ipa正常发布到应用市场下载;

开发者只需按照标准5+ App的开发步骤进行开发,开发完毕后,直接发布到流应用平台即可;如下为关联参考教程:

\n

已有5+ App:从5+ App转换发布

\n

如果你已经开发了5+App,你可以申请使用DCloud的自动转换服务,把5+App直接转换发布到流应用平台。使用你的HBuilder注册邮箱,发邮件给stream@dcloud.io,邮件格式要求如下:

  • 邮件标题:申请转换流应用-%appname%
  • 邮件内容:app获取地址,需要360手机助手(zhushou.360.cn)或应用宝(myapp.com)上的地址,未在这2个平台上线的app暂时无法自动转换为流应用
\n

注意:1.提交的App需用户体验良好、质量过关、有一定用户基础;2.如果app里使用了原生插件,则无法自动转换。

如果你不希望自动转换,想手动发布流应用,那么在HBuilder里的发行菜单里,有“发行为流应用"菜单,按照该菜单的指引可以发布流应用;手动发行流应用需要注意几个问题:


  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

使用wap2app开发

\n

如果企业已有上线的wap站,且wap站体验较好,可以通过wap2app产品实现wap站快速发布成流应用,wap2app立足wap站,通过适配,完成用户体验及能力的增强,主要功能点包括:

通过新开webview及原生动画,代替传统的href跳转,实现流畅的窗口切换动画

目前wap2app处于内测阶段,开发者可以到这里申请内测,wap2app开发教程参考这里

从小程序转换

\n

如果开发商已经开发了微信小程序,可以通过HBuilder转换成流应用,该功能目前处于内侧阶段,开发者可以申请内侧资格,小程序转换教程参考这里

流应用如何测试

\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\n
10 分享
五块钱的果汁 ThinkCMF 感受呼吸 鹏程 wenju M5 吴豪 DCloud_客服_Trust young1 zhuhong02199@163.com
licat1989

licat1989

内测不是“内侧”,把这篇文章的编辑拉出来,我保证不打死他。
2 赞 2017-03-29 11:06
young1

young1

支持~!
0 赞 2016-09-06 15:27
送礼的snake

送礼的snake 回复 kingda

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

EQ

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

rainwolf911

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

Humor 回复 DCloud_heavensoft

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

DCloud_heavensoft 回复 Humor

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

Humor

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

DCloud_heavensoft 回复 平凡

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

平凡

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

DCloud_heavensoft 回复 wenju

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

DCloud_heavensoft 回复 gadget2k

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

gadget2k 回复 DCloud_heavensoft

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

DCloud_heavensoft 回复 gadget2k

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

gadget2k

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

星际

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

DCloud_heavensoft 回复 我那颗冰冷的心

官方有10个群,你先加这个群吧。483608415
0 赞 2015-11-12 04:18
我那颗冰冷的心

我那颗冰冷的心

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

DCloud_heavensoft 回复 anke

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

anke

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

鹏程

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

isilent

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

蝈蝈

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

ThinkCMF

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

要回复文章请先登录注册