DCloud_heavensoft
DCloud_heavensoft
  • 发布:2016-01-28 08:17
  • 更新:2016-01-28 08:17
  • 阅读:40302

M站、WAP站改造流应用指南

分类:流应用

在wap2app推出后,开发者根据wap2app即可快速完成app及流应用提交。
具体见http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13425

============以下内容已过期=================

背景和问题

流应用本身是可以达到原生app的体验的,从应用体验来讲,c/s方式比b/s方式体验更好:

  1. c/s的首页启动更快;
  2. c/s的页面转场更快;
  3. c/s具有脱线访问性。

所以如果开发新app,我们建议开发者使用mui框架,开发一次多端发布,流应用、wap、app都自动生成。
不过实际情况中大量开发商已经有了wap站和原生app,但仍需要制作流应用,那么此时他们需要一种在开发成本和用户体验之间取得平衡的一种方法。

如何基于m站快速改造出流应用,体验还不错,并维持版本的统一更新发布,这是本文讲解的内容。

前提准备

m站的体验本身要好,控件风格app化而不是浏览器化。
反面例子:有的m站的列表仍然是超链接方式,而不是list方式,体验就很差。举例:http://www.beijing.gov.cn/sjbsy/
正面例子:卖座电影
这些链接如果在pc上打开,请在浏览器控制台里调整为手机模式观看。
当然大多数m站的实际状态是处于2者之间的。

在改造方面,有两种大的思路。
1. 修改m站源码,根据ua动态引用增强的js,发现ua包含html5plus或stream时,动态引入一些js,实现对HTML5+扩展能力的调用
2. 不修改m站源码,利用wap2app框架进行wap站配置,完成增强体验,wap2app教程建议从《wap2app快速体验》开始入手。

因为wap2app相对成熟,有完整的教程,本文不做过多解释,重点讲解第一种思路,即:修改m站源码,实现流应用的发布。

改造工作

  1. 首页
    如果是直接改wap站源码,那么在首页引入一个streamapp.js的文件,然后在这个js里编写代码控制整个app的体验强化。
    同时注意在这个js要拦截所有页面切换请求,点击首页后的所有窗体切换均为新开webview,保证首页的webview一直存在,否则强化的js文件也会不见掉,导致无法再生效。

    我们需要在HBuilder里新建一个移动app项目,才能提交流应用。新建工程时注意调整manifest.json:
    a) 项目首页就是wap站地址
    b) 项目的manifest.json 加 popGesture":"close"
    c) 控制页create显示webview时,webview style设置popGesture为none
    不调整的话,在iOS上左滑屏幕返回时会露出空白的控制webview。
    d) 强制打开硬件加速,具体参考http://ask.dcloud.net.cn/article/94

  2. 登陆注册体验
    很多wap站的用户登陆cookie有效期只有一周,一周后需要用户重新输入用户名密码,app可不会这么设计。如果用户在桌面安装了一个流应用,就不应该让他一周后重新输入用户名密码登陆。开发者可根据流应用引擎的ua(包括steamapp)判断,设置流应用的cookie有效期为永久。
    还有很多wap站在登陆时需要输入验证码,这都是比较糟糕的体验,同样也需要判断ua,去掉验证码。

    注册优化也是很重要的问题,对于技术人员而言,未必关心从app激活到注册之间的折损,但产品负责人和运营是非常关心这个数据的。
    流应用提供了优化注册折损的方案,通过plus.oauth,可以调用一键登入,如果wap站本身有单点登陆接口,尽量支持好流应用的一键登陆。
    尤其是用户注册基数不大或品牌不强的新app,如果用户体验产品或消费下单前有比较高的注册门槛,很容易折损流失。
    需要开发单点登陆的开发商,除了客户端调用plus.oauth外还需要服务器对接。请加入底部显示的流应用qq群,与管理员沟通,我们会单独提供服务器端对接的文档和api。

  3. back处理
    浏览器的back是非常难用的,它的顺序是用户访问页面的先后顺序,而不是app的逻辑顺序,流应用的back逻辑需要单独处理。
    Android的back按键需要通过plus.key来监听和处理,不能简单的走网页的前进后退,要按app的逻辑处理后退。
    比如,页面A跳转到B时发现需要登陆,进入了登陆页C,登陆后又进入了页面B,此时点back,要求回页面A,而不是后退到登陆页。
    再比如,从首页点了一个栏目1,back回首页,然后点了栏目2,再back回首页,此时按back,应该提醒是否退出app而不是后退到栏目1里。一般在首页里按back一定是提醒退出app而不是走浏览器的history back。
    另外注意有的列表页面滚动后,点一个列表项进入下一个页面,点back回到刚才的列表页面,但滚动条跑最顶部了,这种情况体验太差,要处理。
    流应用需要在首页监听back按键,设计退出逻辑,比如连续按2下back退出,或者按一下back弹出confirm框,询问用户是否退出。
    如果用户是push或wap导流来的,那么退出时,应提示用户下次可以从桌面直接启动,不然会有不少用户不知道桌面多了一个图标。
    除了页面切换的back,当页面中出现一个div选择层,此时点back应该是关闭选择层而不是整体后退。
    参考http://www.html5plus.org/doc/zh_cn/key.html

  4. 页面切换等待
    页面切换不能白屏,不能依赖浏览器的进度条,切换过程要有自己的模态进度指示如转雪花,避免在新页面切换完成前用户连续点击引发问题。
    参考http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.Waiting
    由于wap网页的载入速度较慢,一般的体验优化做法是在首页注入的控制js里绘制一个原生的title,使用plus.nativeobj里的原生view绘制title,可以快速展现title出来,然后title下面加载wap页面。

  5. 去wap的展现形式
    有些wap页面底部有电脑版、手机版,还有版权或icp信息,还有原生app的下载banner,这都不是app感觉,都需要去掉;实现方案参考:如何在流应用环境下去wap化展现

  6. 原生定位
    如果业务涉及定位,把HTML5的定位改为plus的原生定位。
    HTML5的定位会弹框让用户选择是否允许某网页访问位置,体验太差,而且HTML5的定位速度、精度都不够。改调原生定位又快又准又不弹框。
    流应用提供的定位是高德定位的坐标系。
    在物流相关业务里,配送地址可以通过流应用的api查询到街道信息,可以自动填写到送货地址的输入框中,避免用户敲太多字。
    用户有可能未开启手机的gps或未给应用赋予定位权限,对于强定位需求的app,需要写代码调用流应用的api判断并提醒用户开启gps或相应权限,在弹出框跳转到系统设置里开启定位或赋权并返回后,应自动刷新重调定位api。
    参考:http://html5plus.org/doc/zh_cn/geolocation.html
    参考:http://ask.dcloud.net.cn/question/11890

  7. 原生支付
    流应用提供了原生的支付宝支付和微信支付能力,开发商可参考流应用提供的原生支付api,改进支付体验。
    目前支付宝和微信支付,都支持通过h5的schemes调起本机的原生app进行原生支付,体验比较好,wap站改造量也比较小。
    关于微信的h5支付,需要开发商向微信申请微信wap支付资格,有了该资格,可以在HTML5页面里直接调起微信的原生支付。
    微信wap支付其实就是微信公众号里的支付方式,可以放大到不止是在微信浏览器里可支付,在外部浏览器里也可以再调起微信来完成支付。
    目前大大小小很多开发商都申请到了wap支付资格,比如京东、唯品会、卖座电影、蛋糕叔叔…
    开发商之前的M站的支付宝支付都是wap支付,要输入较长的用户名、密码,体验差、折损高。
    目前看到的数据是用户点微信和支付宝的占比基本是55开,这两种支付方式都应该优化到位。

  8. 硬件加速
    如果是使用控制webview创建显示webview的方式做流应用,注意在显示webview创建时对webview开启硬件加速,以提升页面滚动流畅度。
    参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyle 里的hardwareAccelerated

  9. 网络异常处理
    网络异常导致页面打不开或ajax请求失败,需要单独控制。因为在浏览器里有工具栏和刷新按钮,用户可以自己刷新,但在流应用里没有刷新按钮。而且一旦进入404界面会很难看。
    推荐的体验是流应用的本地代码有网络监听判断,如果用户没有开启网络,则应该提醒用户开启,如果用户网络异常,应弹出提示框,让用户选择重试或退出。
    参考 http://www.html5plus.org/doc/zh_cn/device.html#plus.networkinfo
    参考 http://ask.dcloud.net.cn/question/1475

  10. Titile处理
    有些wap页面没有title或title不能固定,在全屏app界面里不应该出现这种情况,需要每个界面都有title、并且保持固定在顶部。除首页外每个界面的左上角都应该有返回按钮,不能仅依赖back按键来返回。

  11. 桌面快捷方式修复
    桌面快捷方式驻留是流应用留存率的基础。可以从桌面直接启动才能增加次日或7日留存。
    用户可能会误删除桌面上的某流应用的快捷方式。所以需要app在关于界面或其他合适位置放置快捷方式修复的按钮。
    体验参考 大众点评外卖流应用的右上角关于按钮。
    代码参考:http://ask.dcloud.net.cn/article/406

  12. 打点统计
    流应用是可以采集imei的,流应用的统计不是按uv统计,而是按imei的激活统计。
    流应用启动后,应像App一样给后台App统计系统报数打点。
    DCloud给所有流应用开发商提供了数据报表,因为流应用客户端包的下载和更新是在我们的服务器上,并且每个流应用每次启动时会自动检查更新,所以我们可以给开发商完善的报表数据,包括下载、激活、日活、留存、总设备数以及下载来源分析,比如是搜索下载、快码下载、分享下载、wap导量下载、push下载...。DCloud还有订单回传接口,开发商调用后还可在DCloud提供的报表系统里看到订单统计。
    大开发商一般要求自己的后台也需要报数统计,并m站的uv统计是现成的。但是uv不如imei准,有些开发商发现自己统计的uv多于DCloud报表里提供的日活,建议开发商把uv统计里的cookie id值设为imei,通过plus.device取imei,这样开发商的uv和DCloud报表里的激活能对上。
    如果想采集本机是否安装了本公司的其他app产品或竞品的安装情况,也是可以采集的。
    参考:http://www.html5plus.org/doc/zh_cn/device.html
    参考:http://ask.dcloud.net.cn/question/7604

  13. 快码和直通车
    快码和分享直通车是流应用的重要功能,对于拉新和二次传播作用明显,建议使用。
    快码无需开发,在HBuilder的菜单发行里申请即可。
    这里是快码的介绍和申请指南:http://ask.dcloud.net.cn/article/492

    直通车需要开发,但社交直购等分享直通车的功能价值很明显。
    体验参考 大众点评外卖流应用的右上角关于按钮里的快码和饭馆分享里的分享直通车。
    视频参考:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_r0171bswy6f.html
    代码参考 Hello H5+里的分享源代码。

  14. 其他细节
    如果涉及到照片选择上传、文件上传、摄像头麦克风控制,也请将HTML5的代码替换为HTML5+的代码,以得到更好的体验。
    参考:http://www.html5plus.org/doc/

关于一次开发多端发布

通过条件编译工具如glup,可以做到一套代码同时输出m站和流应用,避免多处维护业务逻辑变更的烦恼。
Mui框架本身是支持多端发布的,Hello mui是一个浏览器、流应用、Android app、iOS app一套代码多端均可使用的示例,可参考Hello mui的代码。

案例推荐

关于把M站改造为流应用,可以参考如下案例。

唯品会
唯品会是wap站改造流应用里做的体验较好的应用。
唯品会的业务特点决定了其页面里大量动态内容,其原生app里也有很多wap页面。
流应用版的唯品会和原生版的唯品会差异很小。
唯品会的快码
请使用360手助扫码体验

合作支持

对于有较大流量的wap站,可以发邮件到stream@dcloud.io,说明wap站地址和联系方式,我们可以提供电话咨询,协助快速完成转换。

9 关注 分享
张国龙 chen214123158 longyue188 Trust yungehaha 雪之梦技术驿站 拓荒 7***@qq.com 蝶小蝶

要回复文章请先登录注册

CKing

CKing

回复 DCloud_heavensoft :
好的,谢谢!
2018-08-22 08:33
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 CKing :
是的,mui就行
2018-08-21 21:46
CKing

CKing

回复 DCloud_heavensoft :
我的需求是,需要一个可独立访问的wap站和一个app,用mui可以开发一次就同时完成wap站和app,不需要使用到wap2app对吧?
2018-08-21 18:05
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 CKing :
首先mui开发后,可直接打包,不需要再使用wap2app。http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/591
然后uni-app的h5版还在开发中,过段时间才会发布
2018-08-21 17:49
CKing

CKing

回复 DCloud_heavensoft :
uniapp适合纯wap站开发吗?
2018-08-21 16:14
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 CKing :
此文略旧。最新推荐uniapp,参考uniapp.dcloud.io
2018-08-20 23:57
CKing

CKing

回复 DCloud_heavensoft :
请问一下,文中提到的『所以如果开发新app,我们建议开发者使用mui框架,开发一次多端发布,流应用、wap、app都自动生成。』

大概是什么样流程? 是用mui开发好wap站然后再用wap2app打包么? 使用mui比其他前端框架有什么优势?
2018-08-20 11:01
GodBless

GodBless

你好,第六条 原生定位 提醒用户开启gps或相应权限,在弹出框跳转到系统设置里开启定位或赋权并返回后,应自动刷新重调定位api 。
这个用户如果去设置页设置了gps,返回到app,我如何监听这个返回操作,并且刷新gps呢?
2017-08-15 09:50
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 啸天 :
可以,只要体验好就可以。
2016-08-12 19:02
啸天

啸天

大神,我想问下,这种改造后的 APP 能上架 appstore 么
2016-08-11 11:15