wap2app概述(入门必读)

wap2app是什么

\n

wap2app 是一个将现有M站(也称手机wap站,区别于pc的web站)快速发布成 App 的增强方案,通过 DCloud 的 wap2app 框架,进行简单的配置和必要的编程,即可完成M站的体验强化,达到原生应用的功能体验,进而再发布为原生安装包或流应用。

名词解释

  • wap 这里并不是严格意义上的 wap 站点,是对所有移动站点的统称。
  • 2 即 to
  • app 单指移动应用
\n

连起来,就是“将移动站点转换成移动应用”。

产品特点

\n
  • 提供了原生渲染能力,让界面渲染速度和动画效果,达到原生体验(优化后的体验有多好,可以滚动到文档底部看“案例体验”章节)
  • 提供丰富的系统原生能力(定位、分享、支付、推送等),达到原生功能
  • 通过 json 配置页面规则和强化规则,工作量低,学习成本低
  • M站仅需稍作修改,改造成本低
  • 强化部分和之前的M站解耦合,M站后续升级业务逻辑,生成的App自动含有更新后的业务逻辑
\n

本地强化和M站的关系

\n

理解这段很关键 x 3

使用 wap2app,开发者可复用M站之前的所有业务逻辑,仅需进行必要的强化,而之前的注册、购物、查询等所有业务逻辑全部复用。

开发者所做的强化工作,分为:
1. wap2app 客户端的配置编程工作
2. 原M站的改造工作

注意这2块是分开解耦的。

自 HBuilder 8.8.3 起,新建 wap2app 项目,会自动生成项目必须的模板文件,强化工作主要在这里做。

Tips:这些 json 或 js 是部署在手机客户端的,并非M站的服务器上。

开发者无需、也不能把M站的项目源码导入到 HBuilder 的 wap2app 项目里,M站依旧以之前的模式部署在远程服务器上。

在 HBuilder 中把新建的 wap2app 项目选择打包为原生应用或发布为流应用时,wap2app 项目下的这些强化配置和编程文件,是存在原生 App 包里的,安装后直接在手机的本地存储区里运行,可以理解为是 C/S 模式的 Client 部分。而M站仍然是 B/S 模式的,并不会将M站的资源打包到 App 包里,而是从服务器加载在线的M站页面。

手机端实际运行时,DCloud 的框架会自动把本地的强化配置和在线的M站融合在一起,在用户眼里是一个 App 的感觉。

强化工作

\n

  1. wap2app 本地端的工作:通过框架提供的 sitemap.json 文件,描述页面关系和动画强化方案,以达到原生的窗体切换效果。当 sitemap.json 配置无法满足复杂需求时,可使用 app.js 编程进行增强处理。
  2. M站的改造工作:针对 App 运行环境(可根据UA区分),进行适当的改造。包括去掉一些 App 里不应该出现的页面元素(如底部的电脑版链接,或某些原生 App 下载引导等)。
  3. 扩展原生的能力:如果需要调用 DCloud 的 HTML5+ 引擎 扩展的原生能力,比如M站之前无法实现的微信分享、推送、原生支付等,需要进行必要的编程工作。这部分工作,可以在 wap2app 本地端实现,也可以直接在M站实现(注意判定当前运行环境)。
\n

Tips:强化工作的第3点,需要开发者了解并学习一部分 HTML5+App 开发的知识,请阅读文档树的 HTML5+App 教程 部分。

强化和新开发的区别

\n

新开发一个 App,是大多数编程人员常见的思路,比如新开发一个微信小程序,学习它的每个 API,重头做起。

但使用强化框架,并非重头做起。它的学习方式和开发者过去的习惯可能有所不同,比如开发者时刻要清楚什么工作在客户端强化,什么工作在M站改造。但如果掌握了,它的投入产出是更高的。

第一个wap2app工程

\n

下载/登录开发工具

\n

前往 dcloud.io 根据自己的操作系统,下载相应的 HBuilder 包并解压,无需安装。

首次使用需注册一个开发者账号,方便后续的打包以及应用管理。

创建项目

\n

按照如下步骤新建 wap2app 工程

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

工程建成后,默认目录结构如下:

每个文件的作用如下:

  • sitemap.json:wap2app核心配置文件,wap2app的大部分工作在该文件中完成
  • app.js:为弥补sitemap.json的格式限制,提供的基于JavaScript的可编程增强方案
  • manifest.json:工程参数配置,比如icon、splash图等(打开该文件后有帮助链接)
  • client_index.html:内置静态页面,若首页有选项卡,需在该文件中配置
  • %APPID%.append.css:本示例中 APPID 为 “__W2A__m.example.com” ,故默认创建了一个 __W2A__m.example.com.append.css 文件;该 css 文件负责提前修饰首页的样式,比如隐藏M站首页的原生下载引导等 DOM 元素。
\n

Tips:以上文件的名称以及位置,不可修改或调整。

代码编辑

\n

打开项目,会默认进入开发视图。从左到右,依次是项目管理器、代码编辑区。

从sitemap.json的编辑开始,参考http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/12755
进行配置及必要的编程,然后就可以真机运行。

真机运行

\n

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

注意:每次在HBuilder保存修改文件后,会自动编译并同步到手机端;wap2app页面管理栈较为复杂,每次修改配置规则后,会自动重启手机端的调试App,如下:

新建的项目直接运行是看不出优化效果的,需要参考后续教程配置好sitemap,优化好体验。

真机运行是一个发布前必要的调试环境,不停开发、调试、看日志、看效果、完善迭代。成熟后即可正式发布。

应用发布

\n

目前支持将wap2app项目打包成原生安装包(iOS平台的ipa安装包、Android平台的apk安装包),也支持发布到流应用平台。

在HBuilder中,点击顶部“发行菜单”,选择发行方式,如下:

推荐先发布到流应用平台进行试用体验和用户灰度内测。

发布到流应用平台的步骤:

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

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

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

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

案例体验

\n

手机访问网址m3w.cn,下载流应用,然后点击里面的唯品会、大众点评,都是基于wap2app框架的案例。
如下视频中,在同型号的2款手机中同时操作原生应用和基于wap2app优化的M站,可以看出wap2app版可以达到原生应用的流畅度。
参考视频

FAQ

\n

Q:没有wap站,PC可以转换吗?
A:可以。工作量更大而已,需要处理更多页面的样式修改。可以在wap2app本地直接新做样式,隐藏PC上里一些不需要的元素,修饰一些不合适的样式。

Q:我的wap站风格是纯web感觉的,比如列表项都是下划线的超链接,是否可以强化改造?
A:可以。你可以先调整wap站的风格,也可以wap站风格不动,在wap2app本地调整风格。

Q:我的wap站是SPA(单页)方式,是否可以强化
A:SPA方式的wap站如果窗体切换是div动画,没有url跳转,那么就不能通过简单的sitemap.json的配置来强化了。因为sitemap是基于url的。只能在app.js里编写更多代码来处理。如果你的页面dom不复杂,dom动画也不卡,也可以不做窗体切换强化,直接打包。

Q:wap2app应用可以本地打包或嵌入其它应用内么?
A:不支持本地打包,只能通过云端打包成相应的apk/ipa。同时,也不能嵌入到其它应用中。

Q:文章中提到的流应用是什么?
A:所有基于DCloud工具开发的HTML5强化应用,打包为原生版时,其实是把DCloud的强化引擎和开发者的js代码混合成一个原生安装包(apk或ipa)。当DCloud的引擎已经提前安装在手机上时,开发者的js代码无需再变成原生安装方式,可以直接在DCloud的统一入口里流式下载和差量更新升级,这就是流应用。具体介绍见http://dcloud.io/streamapp.html

学习建议

\n

文档

\n

在PC浏览器中访问http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/1244,按左侧目录树顺序,通读所有文章。
尤其要认真读概述以理解理念。
除了NView稍有难度外,学习掌握其他环节只需要半天时间,如果你的网站不复杂,开发也只需要1、2天。
可以先花1、2天时间做一个基础版,然后再研究NView,以达到更好的体验。

HelloWap2App

\n

在 HBuiler 中新建 wap2app 工程 -> 选择模板 -> Hello Wap2App 示例,示例工程的源码与文档结合,可以更好地学习和理解。

QQ交流群及问题反馈

\n

wap2app 交流 QQ 群:320865692

欢迎大家在 ask社区 上反馈问题或提交Bug,问答主力会在 ask 社区

若问题不好重现,建议将 wap2app 发行到流应用测试平台,并提供 appid 及测试二维码在问题帖子中,DCloud 工程师会定期跟进处理相关问题。

定制开发及商务合作

\n

wap2app 本身是免费的工具产品,开发者可以免费使用;如果网站站长对于开发不熟悉或希望定制开发,则可以和我们商务联系,发邮件到marketing@dcloud.io


11 分享 关注
DCloud_HB_关平 DCloud_客服_Trust 513238368@qq.com DCloud_MUI_Neil hir30@qq.com 付憷 WinXP wiladog 460430362@qq.com hgdc 挨踢小子
13067463715@163.com

13067463715@163.com

为什么我新建的项目appid为空???/
0 赞 2018-10-17 16:54
qq820805144

qq820805144 回复 Sinea

当然可以
0 赞 2018-10-14 12:06
qq820805144

qq820805144 回复 1910563900@qq.com

直接长按保存就可以了!
0 赞 2018-10-05 08:33
张释

张释

请问,有没有办法 临时隐藏或关闭原生导航栏呢?
0 赞 2018-08-09 09:14
小刘同志

小刘同志 回复 DCloud_heavensoft

大佬,安卓升级到26是必须在 HBuilder X里面重新打包吗
0 赞 2018-07-19 16:09
小刘同志

小刘同志 回复 DCloud_heavensoft

谢谢大佬,是我自身问题,没有理解清楚appid具体含义
0 赞 2018-07-19 16:07
DCloud_heavensoft

DCloud_heavensoft 回复 小刘同志

appid有下划线没问题,你打包的包名可以另行定,包名不能带下划线
0 赞 2018-06-20 22:45
小刘同志

小刘同志

wap2app生成的appid 前面有下划线 申请证书 格式不支持 怎么解
0 赞 2018-06-11 10:35
654026282@qq.com

654026282@qq.com

我想在在appendJS文件里用js语句改变img的url,在app本地images文件夹里的图片路径该怎么引用呢?
1 赞 2018-06-10 18:12
hgdc

hgdc 回复 DCloud_MUI_CHB

谢谢,我试试
0 赞 2018-02-24 21:49
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 hgdc

开启硬件加速试试,参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyles 的hardwareAccelerated属性
0 赞 2018-02-24 21:15
hgdc

hgdc

请问

已有wap站,直接输入网址打包后,发现上下滑动滚动的时候明显卡慢了很多,是什么原因呢?
0 赞 2018-02-19 22:13
13148089922@163.com

13148089922@163.com

wap站是什么
0 赞 2018-01-29 10:37
1910563900@qq.com

1910563900@qq.com

web2app怎么长安保存图片
1 赞 2018-01-07 19:35
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 lam

只可以单独打包成apk/ipa,无法嵌入第三方App中
1 赞 2017-12-26 12:00
lam

lam

wap2app能嵌入到其它的app里面使用吗?
0 赞 2017-12-26 11:06
JRay

JRay

原来的wap版是用的sessionStorage 存数据,转了之后就失效了,这个要怎么解决呢?
1 赞 2017-12-13 16:42
509206313@qq.com

509206313@qq.com 回复 Warn

我的HB没有啊。还是说版本不对?可是我的最新版的
0 赞 2017-12-06 10:48
Warn

Warn 回复 509206313@qq.com

window系统中新建有wap2app选项的
0 赞 2017-12-05 17:19
509206313@qq.com

509206313@qq.com

提个疑问,我HB8.8.7的,但是新建没有wap2app项目,难道必须在OS系统才能创建?
0 赞 2017-12-05 14:44
水域心诚

水域心诚 回复 1312543912@qq.com

mui 就是人家的产品
0 赞 2017-11-21 10:32
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 邢天城

参考底部选项卡配置教程:http://ask.dcloud.net.cn/article/12878
0 赞 2017-11-08 16:14
邢天城

邢天城

怎样才能实现在切换页面的时候保持底部菜单一直是固定的呢
0 赞 2017-10-24 12:32
452009426@qq.com

452009426@qq.com 回复 付憷

可以通过配置titleNView为false关闭原生导航栏解决。
0 赞 2017-10-14 10:43
饶飞成

饶飞成 回复 DCloud_heavensoft

貌似这个地址不能下哈!
0 赞 2017-10-14 01:24
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 黄员外

使用location.href跳转?你可以将跳转目标地址和当前webview地址配置到一个页面组中(通过matchUrls配置),这样就会在当前webview跳转
0 赞 2017-10-13 12:57
黄员外

黄员外

window.location刷新会使用一个新的页面载入,能不能使用当前webview载入呢
0 赞 2017-10-13 11:17
wiladog

wiladog 回复 DCloud_heavensoft

谢谢你!
0 赞 2017-10-11 00:45
苏颖

苏颖

plus.webview.prefetchURLs(urls); 可以用这个解决web使用app运行
0 赞 2017-09-27 10:09
1312543912@qq.com

1312543912@qq.com 回复 水域心诚

表示赞同 贵公司使用的是mui?
0 赞 2017-09-26 17:29
水域心诚

水域心诚

看到dcloud好好的活着,我就放心的干活去了 。
1 赞 2017-09-26 17:03
付憷

付憷

哦 , 为什么我的wap2app从列表页进去详情页,它不会自动添加那种带有返回箭头的头部啊?
0 赞 2017-09-25 18:37
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 付憷

http://ask.dcloud.net.cn/docs/ 左侧目录导航,点开wap2app,有很详细的教程
0 赞 2017-09-25 18:28
付憷

付憷

有sitemap配置的教程吗 ? 这里不知道怎么配置 。
0 赞 2017-09-25 17:43
DCloud_heavensoft

DCloud_heavensoft 回复 Sinea

使用plus.push,打包成原生app时在manifest里配上个推或小米推送。流应用里暂不支持push。
0 赞 2017-09-16 23:45
Sinea

Sinea

可以是用推送吗
0 赞 2017-09-07 16:38
513238368@qq.com

513238368@qq.com

mark
0 赞 2017-08-26 14:49

要回复文章请先登录注册