快速上手wap2app

wap2app是一个将现有wap站快速发布成流应用的增强方案,该方案在尽量不修改原始wap站的情况下,通过页面配置,实现原生App的使用体验,同时拥有边用边下的流式发行能力。

注:部分业务仅需稍微修改wap站,即可完成更佳的用户体验,比如在流应用环境下屏蔽原生下载、屏蔽ICP备案等wap站特征,这部分工作建议通过修改wap站实现。

下载IDE

\n

目前wap2app处于内测阶段,需要先到如下地址申请内测,获取内测资格后,下载对应版本的HBuilder。

首次使用需注册一个HBuilder开发者账号,使用开发者账号登录HBuilder。

新建wap2app工程

\n

按照如下步骤新建wap2app工程

  • 点击顶部菜单,文件->新建->Wap2App
  • 输入应用名称、wap站首页地址,点击“完成”
\n

真机运行

\n

将手机通过USB口连接电脑,可以将HBuilder中的代码同步到手机上,实现真机调试,具体参考调试方式介绍二 真机运行

发布流应用

\n

至此,你已经完成了wap2app项目的初始化,可以按照如下步骤先发布预览一下:

  • 点击顶部菜单,发行->发行为流应用
  • 点击“提交测试”,发布流应用到“测试平台”,发行成功后,会生成一个测试二维码
\n

http://www.dcloud.io/streamapp/下载“流应用”并安装,启动“流应用”,点击右上角扫码图标,扫描HBuilder生成的测试二维码,即可进入刚刚发布的测试流应用。

至此,我们已完成wap2app项目的初体验,接下来进入更详细的配置教程。

注意:

为保证wap站所有者的版权归属,一个wap站在流应用平台上仅允许发布一个流应用;wap2app会自动解析待转换的wap站首页地址,分析出wap站域名(如:m.mydomain.com),然后使用如下格式:__W2A__mydomain.com作为appid,appid作为流应用的唯一标识,不允许重复。因此若在发布测试版流应用时,平台发现该appid已存在,会提示开发者,此时开发者有两个选择:

  • 该appid的原所有者和开发者是一个企业(团队)的成员,可以联系原所有者,将开发者设置为“团队成员”;
  • 该appid的原所有者和开发者不是一个企业(团队)的成员,但该应用(域名)确实归属当前开发者所属的企业(团队),此时可以“申请认领”,平台审核通过后,会将该流应用分配给开发者;
\n

详细配置

\n

如上完成wap2app产品初体验后,接下来需要进入详细配置,逐步增强wap站的体验。wap2app产品所有配置代码均在项目根目录下的__wap2appconfig.js文件中,之后的所有教程代码均需要在__wap2appconfig.js中完成;__wap2appconfig.js中核心代码就是wap2app.init()方法,所有wap站的配置均需要在这个方法中实现,如下为一个示例代码:

!(function() {
wap2app.init({
globalOptions:{//全局通用配置
matchHostnames:"m.mydomain.com",
navigationbar: {//导航栏配置
backgroundColor: '#1B1A1F',//导航栏背景色
titleText: '我的应用',//默认为应用名称
titleColor: '#FFFFFF',//标题颜色
titleSize: '17px'//标题字体大小
}
},
webviews: {//各个页面组配置
'launch':{//首页
'url':"http://m.mydomain.com",
matchPathnames:"/"
},
'detail':{//详情页
matchPathnames:/detail/
navigationbar:{
titleText:"商品详情" //详情页标题
}
}
}
});
})();
\n

wap2app的适配内容主要包括:

  • 页面组:通过页面组复用webview,减少内存消耗
  • 导航栏:使用原生导航栏,可修改导航栏背景色、文字等
  • 选项卡:优化选项卡切换体验,选项卡不变,内容区重新获取
  • UI优化:去wap化展现,图片预览
  • 返回优化:优先关闭弹出层
\n
2 分享
DCloud_HB_关平 DCloud_客服_Trust

要回复文章请先登录注册