中国领先的IT技术网站
|
|

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

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

作者:崔红保来源:51CTO开发者交流群|2017-11-09 18:10

Tech Neo技术沙龙 | 11月25号,九州云/ZStack与您一起探讨云时代网络边界管理实践


将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】

【责任编辑:何星 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢
24H热文
一周话题
本月最赞

读 书 +更多

J2ME手机游戏设计技术与实战

本书主要介绍了在手机上开发J2ME游戏的方法,作者在介绍了J2ME游戏开发相关知识背景的基础上,以大富翁手机游戏的设计开发为例,详细讲述了...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× CTO训练营(深圳站)