挨踢部落直播课堂第四期：如何玩转H5网站快速转换成App？

作者：崔红保 2017-11-09 18:10:28

将H5网站转换成App，不是简单套个WebView壳完事，关键是达到原生版的功能和体验。wap2app是一款将H5网站转换成App的前端开发框架，底层基于HTML5PLUS引擎，可以调用几十万原生API，实现更强大的推送、支付、分享、定位等能力，解决M站因API不足而导致的功能缺失。那么，将M站快速转换成App的前端开发框架如何实现呢？我们特此邀请到DCloud公司CTO崔红保老师做直播分享。

内容简介

1、H5网站转换成App需求说明

2、web App和原生App的体验差距

3、wap2app框架简介

4、wap2app实现方案

5、wap2app开发方式

大家好，今天分享的主题是：《将H5网站转换成原生体验的App》

一、H5网站转换成App需求说明

如果我们只有H5网站，没有App，想要生成App的可选方案有哪些？目前的技术，大概有三个路线：

1. 利用Android/Object-c原生语言，分平台重新开发；这样会导致H5、安卓、iOS三端并行，成本***，效率***；

2.利用React Native/weex/mui/Cordova等跨平台技术，一套代码覆盖Android、iOS两个平台；这样需要维护H5、跨平台App两套代码，成本、效率都居中；

3.复用H5网站，直接将H5网站转换成App，这样只需要维护H5一套代码，成本***，效率***。

虽然第三种方案成本***，但要做好，难度***；如果只是使用webview简单套壳打个包，功能体验和原生App相比，差距甚远，最终用户不买账。

H5网站转换成App，关键是实现原生版的功能和体验，这是存在业界很久的一个转换难题，甚至很多人已经放弃希望。

二、web App和原生App的体验差距

web App和原生App的体验差距主要体现在：

窗口动画：H5网页在手机浏览器上是通过href在当前页面跳转的，没有动画；但原生App是通过原生View动画进行切换的，体验更好；

滚动条通顶：H5网页的标题栏一般是div方式fix在顶部，页面滚动条会通顶，把标题栏右侧盖住。这个效果很不原生。虽然使用div滚动也可以解决滚动条通顶，但div滚动在安卓上效率无法商用。

下拉刷新：H5网页通过DIV模拟的下拉刷新不流畅，甚至很多M站干脆就不做下拉刷新。但App里这是一个常见而重要的交互操作。

选项卡切换：原生App切换选项卡时，选项卡区域不变，仅内容区view变化；但web app切换选项卡时，会将整个页面重新加载，经常出现白屏现象。

返回按键处理：若用户之前操作触发了弹出层显示（比如地址选择），则在用户按下back键时，原生App会先关闭弹出层，并不会直接关闭当前页面；但web app会直接执行history.back()逻辑，导致整个页面的后退。

渲染速度：H5网站属于B/S结构，需要先下载再渲染；而原生App大多为C/S结构，资源从本地加载，可以无需等待立即渲染部分元素，避免白屏现象；

系统能力：HTML5因API限制，很多终端能力无法调用，导致很多功能缺失或不如原生，比如推送、扫码、分享、支付等；

系统梳理，这样的体验差异点还有很多，我们基于多年HTML5开发经验和大量项目实践，逐一解决如上的体验差异点，终于打磨出了wap2app产品。

三、wap2app框架简介

wap2app是一个将现有HTML5网站快速发布成App的开发框架，通过wap2app框架，进行简单的配置和必要的编程，即可完成M站的体验强化，可打包成iOS平台的ipa、Android平台的apk，可上线各大应用市场，转换后的App可媲美原生App。

不信媲美原生？看视频：https://v.qq.com/x/page/x05025vurui.html

视频说明：

- 环境：相同的手机设备（小米6，同样的MIUI版本）、相同的网络，使用前均清理了内存，原生应用使用***版。

- 结论：wap2app新页面渲染速度和原生不相上下，在300毫秒的动画期间即可渲染，而且动画平顺。

wap2app框架具有如下特点：

1. 提供了原生渲染能力，让界面渲染速度和动画效果，达到原生体验

2. 提供丰富的系统原生能力（定位、分享、支付、推送等），达到原生功能

3. 通过json配置页面规则和强化规则，工作量低，学习成本低

4. M站仅需稍作修改，改造成本低

5. 强化部分和之前的M站解耦合，M站后续升级业务逻辑，生成的App自动含有更新后的业务逻辑

四、wap2app实现方案

wap2app的底层实现很复杂，涉及大量的原生、HTML5优化，针对每个体验差异问题，我们都有对应的优化方案，例如：

窗口动画：wap2app底层拦截页面跳转，新页面使用新的webview加载，然后使用view的原生动画（如slide-in-right或pop-in）切换；

滚动条通顶：使用原生标题栏代替HTML5的标题栏，随着webview一起创建；支持自动读取页面标题，即解决了滚动条通顶，也避免了页面全白问题。

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\6H@NER18SU~KQFGBW5X$_B0.png$

选项卡切换：将选项卡区域和内容区拆分成两个单独的webview，切换选项卡时，选项卡区webview仅切换高亮状态，然后通知内容区webview加载新的页面，这样就可以避免整体白屏现象。

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\`CMHF_F3`OSY$T3WAOC{J~O.png$

接下来，我们重点讲解能力扩展和渲染加速两个方面。

1、能力扩展

HTML5可用API比原生App少很多，很多和系统设备相关的功能无法实现；wap2app底层基于HTML5 PLUS引擎，可以调用几十万原生API，实现更强的推送、分享、支付、定位等系统能力，可实现和原生App一样的功能要求。

wap2app中可调用的HTML5 PLUS API分两个部分。

1.1常用的API – HTML5plus

包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，封装成跨平台的HTML5plus规范，并将规范公开于www.HTML5plus.org ，不做厂商私有API。HTML5中国产业联盟目前已经成为工信部的下属单位，而HTML5Plus规范也已经成为行标，并进行了国标立项。

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\8LTWM75HC`GN)M5RQ6)[%AX.png$

1.2其他原生API – Native.js

原生API在iOS和Android上各自有40多万，有些API并不常用，而且不具有跨平台特性，比如ios的game center api。太多的API封装到HTML5plus里，会过多增加runtime的体积，但若有需求要使用这些api又很麻烦。

我们有一项突破性的技术来解决上述烦恼—Native.js，一种把40w原生API映射为JS API的技术。

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\F~8XI6K@)TI]DF)FFPC1(TB.png$

1.3原生扩展示例 - 分享

因HTML5能力限制，H5网站仅支持wap方式的分享，分享体验很糟糕，如下是一种典型实现（参考下方截图）：

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\ZH]W`Z$TG{7Y3TYNGCJ_%T1.png$

- 点击微信分享后，显示一个二维码，用户需要启动微信扫描二维码，先在微信中打开这篇文章，然后再通过微信右上角的菜单分享出去；分享路径太长，操作麻烦；

- 点击微博分享，需要登录微博wap站，完成授权后才能分享。

wap2app运行在HTML5 PLUS 引擎下，是可以通过HTML5 PLUS的share模块直接调起系统原生分享的，同样场景，稍作改造，在wap2app环境下调用原生分享，则体验会大大改观，如下为调用原生分享后的截图：

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\VFUGAPO5@{SL34)(]V7WSY4.png$

很明显，wap2app调起原生分享后，分享路径更短、体验更好，更有利于内容的分享传播。

2、接下来讲渲染加速

web页面加载渲染速度相比原生App，有较大的体验差距，以至于在移动设备上严重影响业务体验。造成这些体验差距的原因大致有如下几个：

--渲染时机：web app需要等待服务端Document下载完成后才开始启动渲染工作，无法提前分区域渲染；而原生App作为C/S结构的应用，仅向服务端请求业务数据，其它布局、样式大多在本地，故可以在用户触发打开新窗口时，立即渲染新窗口部分区域布局，服务端响应数据后，再更新对应区域的内容；

--图片资源请求时机：web app需要先下载Document，然后再根据Document中的<img>标签的src属性去异步加载图片资源，故在web app中总是先看到文字，然后再逐渐看到图片；而原生App则无需任务等待，可以直接加载图片资源，故原生App的图片显示会早于web app中的图片显示；

--业务数据请求时机：web app的实现若是前后端分离，则需要先下载封装业务逻辑的js文件，下载完毕后，再由js发起ajax请求；而原生App，则大多将业务逻辑封装在本地，无需等待下载js文件，可以更早的发起HTTP业务请求。

如何提升web页面的渲染速度，很多公司都在尝试，比如Google主导的AMP技术，以及国内百度延伸的MIP技术，这类技术以阅读类网页加速为主，不适合JS交互复杂的场景，适用范围有限。

DCloud在webview的基础上，提出了subNView技术，这是一种更为通用、可增强任意web页面渲染体验的方案。

2.1 subNView介绍

subNView，字面拆开理解就是sub native view，有两个核心点：

- native：subNView是一种原生绘制的View，和HTML5的DOM无关

- sub：subNView属于webview的一部分，并不替代完整Webview。和所属webview保持同样的生命周期，跟随webview的close、hide、zindex变化而变化。

subNView作为webview的子控件，一个webview可以包含多个subNView，一个subNView上可以绘制多个图片（包括图片轮播）、文字、区域、按钮等。

subNView在保留HTML5优势的基础上，利用原生View发挥原生渲染优势；当用户触发窗口切换时，webview按照原有逻辑继续加载Document，渲染页面；但无需等待Document加载完成，可同时在原生View上提前完成如下工作：

- 绘制固定内容区域，或可从前页获取数据的区域，例如固定地址图片、购物车按钮等，而无需等待Document下载完毕后再去请求加载图片

- 直接发起业务数据ajax请求，ajax响应后直接在原生View上绘制数据，无需等待业务封装的JS下载。

如下为一个使用subNView增强后的商品详情页示例：

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\N0P6C}{`1$Q$07ST%R0~NLX.png$

从上图可看出：

* webview按照原有逻辑，加载Document，渲染页面，刚开始内容未加载时还是白屏（中间空白区域）

* webview同时创建了2个subNView作为webview的子控件

* subNView 1展示商品详情轮播图及商品价格，是通过ajax动态获取的；轮播图片支持滑动、点击放大预览，用户可提前查看商品详情

* subNView 2展示购物车相关功能，属于固定显示内容，可直接渲染

* 购物车按钮点击后事件透传给Webview里的购物车按钮，HTML页面的所有逻辑，仍然复用。subNView只是简单的侵入动画渲染过程，不引发业务逻辑的重新编写。

如下是使用subNView加速后，页面切换过程对比：

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\NO)([IOJJW~]][E3456JFWW.png$

2.2如何使用subNView

开发者可以通过webview的subNViews属性创建或修改subNview控件，这里需要传入复杂的json对象；为简化开发，DCloud提供了NView模板技术。

NView模板类似于vue的single-file components(单文件组件)，HBuilder中新建NView模板文件，默认代码如下：

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\75JCD}01X8D3}C})N}1(TQU.jpg$

NView模板涉及模板标签、属性、样式定义、数据绑定等概念，详细移步wap2app官网查看。

五、wap2app开发方式

wap2app开发简单，主要基于json文件快速配置，规则简单，学习成本低，工作量少；一个中等规模的M站，一个前端工程师4天左右就可以转换完成。wap2app同时支持Javascript高级编程，可实现更为复杂的需求开发。

在具体开发过程中，wap2app涉及

1. wap2app本地端的工作：通过框架提供的sitemap文件，描述页面关系和动画强化方案，以达到原生的窗体切换效果。当sitemap.json配置无法满足复杂需求时，可使用app.js编程进行增强处理。

2. H5网站的改造工作：针对App运行环境（UA不同），进行适当的改造，包括去掉一些App里不应该出现的页面元素（如底部的电脑版链接，启用原生导航条后需隐藏原来HTML5的DIV导航条）。

3. 如果需要调用DCloud的HTML5+扩展能力，比如M站之前无法实现的微信分享、推送、原生支付，进行必要的编程开发，这部分工作可以在本地端实现，也可以在H5网站实现（需要区分是wap2app运行环境）。

one more thing，wap2app 完全免费！

更多信息，请移步wap2app官网：http://dcloud.io/wap2app.html

以下问题是来自51CTO开发者社群小伙伴们的提问和分享：

Q：web_何_南充：wap2app改造后可以直接上线流应用吗？

A：DCloud-崔老师：可以。

Q：无所谓：NView模板什么时候能在mui框架上？

A：DCloud-崔老师：一般是App开发，基于C/S结构的，html页面在本地，渲染速度还是可以的，NView模板意义不大。

Q：义本无言：如果已用hbuilder开发完成的app能快速逆向转到wap么？

A：DCloud-崔老师：DCloud给开发者提供了2种开发模式：

1. 从头开发，使用mui框架，开发一次，app和wap站都有了；

2. 已有wap站，则使用wap2app框架，把wap站强化为app。

Q：义本无言：这个适用场景是 wap还没有然后用咱们的开发工具开发然后可以快速的转换成app项目如果已经开发完成的wap项目是不是就不适用了呢或者说适用是不是工作量会很大。

A：DCloud-崔老师：wap、App都没有，建议使用mui，一次开发，多端发布

wap已经有了，没有App，建议使用wap2app快速发布成App。

Q：义本无言： mui和 wap2app 哪个的效果流畅度***呢？

A：DCloud-崔老师：看你目前的阶段，好好优化，都会有不错的体验。可以从http://liuyingyong.cn/

下载流应用管理器，其中唯品会、大众点评、手机京东都是基于wap2app实现的，大家可以体验一下流畅度。

Q：义本无言：问题是我使用的mui + h5+ 开发的app 然后转wap 但是wap中h5+ 的内容不支持呀

A：DCloud-崔老师：如果要调用5+ 的代码，就需要注意区分平台了，判断是5+环境下再调用，浏览器模式下就降级或隐藏该功能

Q：php-互联网+-上海：崔老师您好，我有2个问题：

问题1：

催老师上文说到：“窗口动画：wap2app底层拦截页面跳转，新页面使用新的webview加载”

说的是自动拦截了所有的 a 标签的 href 跳转吗还是需要特殊的配置？

问题2：

打包后的APK，经过解压，能看到所有的html/css/js 等前端文件，很容易泄密或者被盗用，请问后续的升级中，有没有考虑防范措施？

A：DCloud-崔老师：wap2app底层会拦截location.href跳转，不管是a标签的点击跳转，还是js的跳转。目前打包时有加密选项，

$C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\W(6~K@_O$9DRI`$30R9QE~M.jpg$

Q1：web_何_南充：那想新做一套移动端系统，覆盖webapp，流应用，微信公众号页面，安卓，IOS，即一次开发，5次发布，应该用什么技术？

Q2：开发-sanbor ：wap2app 只能在流应用中使用咯?

A：DCloud-崔老师：目前支持将wap2app项目打包成原生安装包（iOS平台的ipa安装包、Android平台的apk安装包），也支持发布到流应用平台。

Q：陈永松-信阳：我想实现登录后判断不同的权限，从而显示不同的底部选项卡，能做到不？

A：DCloud-崔老师：这个需求准确描述就是二级页面的选项卡优化，后续会支持。

Q：广州-前端-黄小文：mui可以做wap站？不是做app的么？

A：DCloud-崔老师： mui支持多端发布，通过构建工具可以发布到不同平台。

Q：广州-前端-黄小文：MUI多端发布不是指ios和安卓么？wap站也能做？mui支持做wap的M站？

A：DCloud-崔老师：你手机浏览器或微信访问：http://dcloud.io/hellomui/

这个代码其实和ios和安卓的hello mui一套代码。

Q:大数据-ta-北京：想跑wap2app应用, 还必须安装插件, 不知道的用户还以为进了钓鱼网站. 这不好吧..

A：DCloud-崔老师：安装什么插件？目前很多互联网公司的流应用是基于wap2app实现的，所以需要安装流应用管理器才能体验；但也已经由很多创业者自己实现的wap2app项目，打包成了apk/ipa，无需安装任何插件，可以直接安装到手机上运行。

Q：php-互联网+-上海：咱们底层是否对mui做过特别的支持？如果用其他前端框架比如bootstrap，或者自己原生写的效果，是否意味着不如用mui渲染的更快？

A：DCloud-崔老师：目前没有私有支持，mui的特点是轻量、原生UI、多端发布。开发者也可以使用其它的UI库。

Q：PHP-扬-厦门：一些使用前端框架如vue,angular等做的单页面或非单页面能否使用wap2app转换？

A：DCloud-崔老师：wap2app目前主要MPA做了优化，SPA模式效果不明显，不推荐。

Q：开启网络-李生：因现有的wap站有多个头部，wap2app是否支持原生头部多个样式，然后原生头部有“购物车”按钮，当购买车里有商品时，会显示个红点，现在是不是可以实现的？

A：DCloud-崔老师：可以自定义绘制导航栏，通过plus.webview.WebviewObject.getTitleNView获得导航view，然后自己绘制。

Q：php-灵感-宿迁：聊天这块,比如人才网,能获取到网页的企业id吗？这样就能聊天了。MPA是啥？SPA是啥？

A：DCloud-崔老师：SPA：single page application

Q1：软贱攻城狮：其实我对这块一直有个问题，一些wap网站是用了前端模板的比如jstl,vue,或者jfinal的enjoy，dcloud这个wap2app也能转？

Q2：前端-广州： 1. 从头开发，使用mui框架，开发一次，app和wap站都有了；这是怎样做的呢？

A：DCloud-崔老师：http://dcloud.io/mui.html建议先了解一下mui的基础。举个例子：mui.openWindow()在App中是打开新webview，浏览器下降级执行location.href跳转

Q：前端-广州：已经用mui做了app,但现在要将app转wap用于嵌入第三方的app中，如何用mui去实现？目前不清楚第三方app使用什么框架。app页面打开不是用了原生底层去实现的吗？

A1：DCloud-崔老师：直接把你开发的app代码部署到服务器上，然后使用浏览器访问一下，看是否有兼容问题，没问题就直接用了。

举个例子：mui.openWindow()在App中是打开新webview，浏览器下降级执行location.href跳转

A2：移动-小雨-北京：普通浏览器不支持5+runtime，需要将用到plus相关API的部分，做一下处理。我之前搞过类似的，不过比较简单。比如跳转，如果用mui.openWindow的话就不用处理。如果分享用的是原生的，那就得自己注册h5版的，对不同环境做下兼容。

Q：北京-unicorn-数据：HBuilder、 wap2app 商用的话收费么？是否有与 GraphQL 结合的案例？

A：DCloud-崔老师：免费，不收费。目前我已知的，还没有结合案例。

Q：php-纵横-秦皇岛：我感觉hb***的问题是没有html css的混淆，直接原生代码泄漏了

A：DCloud-崔老师：目前仅支持js加密，不支持html、css加密，不过业务逻辑也应该抽离写在js中。

【51CTO原创稿件，合作站点转载请注明原文作者和出处为51CTO.com】

责任编辑：何星来源： 51CTO开发者交流群

APP H5