把H5网站改成APP，不是简单的包裹一个WebView外壳，关键是要实现原版的功能和体验。wap2app是一个前端开发框架，将H5网站转化为Apps。底层基于HTML5PLUS引擎，可调用数十万原生API，实现推送、支付、分享、定位等更强大的能力，解决M站API不足带来的问题。缺少功能。那么，如何实现快速将M站转化为App的前端开发框架呢？特此邀请DCloudCTO崔洪宝先生进行直播分享。内容介绍1.H5网站转App的要求2.webApp与原生App的体验差距3.wap2app框架介绍4.wap2app实现方案5.wap2app开发方法大家好，今天分享的话题是：《将H5网站转换成原生体验的App》1.H5网站转APP的要求如果我们只有H5网站，没有APP，那么生成APP有哪些选择呢？目前的技术路线大致有3种：1、使用Android/Object-c原生语言，在单独的平台上重新开发；这将导致H5、Android、iOS并行化，成本最低，效率最高；2、使用ReactNative/weex/mui/Cordova等跨平台技术，一套代码覆盖Android和iOS两个平台；这样需要维护H5和跨平台App两套代码，成本和效率居中；3、复用H5网站，直接将H5网站转化为APP，这样只需要维护一套H5代码，成本最低，效率最高。第三种方案虽然成本最低，但做起来难度极大；如果仅仅使用webview进行简单的包装，功能体验与原生app相去甚远，终端用户不会买账。将H5网站转化为APP，关键是要实现原生版本的功能和体验。这是业界长期存在的转换问题，很多人甚至已经放弃了希望。2、WebApp与原生App的体验差距WebApp与原生App的体验差距主要体现在：窗口动画：H5网页在手机浏览器上通过href跳转到当前页面，无动画??；而原生App是通过NativeView动画来切换，体验更好；滚动条顶部：H5网页标题栏在div模式下一般固定在顶部，页面滚动条会到顶部，覆盖标题栏右侧。这种效果非常原始。虽然使用div滚动也可以解决滚动条top，但是div滚动在Android上的效率还没有商用。下拉刷新：DIV在H5网页上模拟的下拉刷新并不流畅，甚至很多M站根本不做下拉刷新。但这是App中常见且重要的交互操作。标签切换：在原生应用中切换标签时，标签区域保持不变，只有内容区域的视图发生变化；然而，当webapp切换标签时，整个页面将被重新加载，通常会导致白屏。返回按钮处理：如果用户之前的操作触发了弹出层的显示（比如地址选择），当用户按下返回按钮时，原生App会先关闭弹出层，而不是直接关闭当前页面；但是webapp会直接执行history.back()逻辑，导致整个页面回退。渲染速度：H5网站属于B/S结构，需要先下载再渲染；而原生App多为C/S结构，资源从本地加载，部分元素无需等待即可立即渲染，避免白屏现象；系统能力：HTML5由于API限制，很多终端能力无法调用，导致很多功能缺失或者不如原来的，比如推送、扫码、分享、支付等；系统梳理，这样的体验还是有很多差异的，我们根据多年的HTML5开发经验和大量的项目实践，将以上的体验差异一一解决，最终打磨出wap2app这个产品。3、wap2app框架介绍wap2app是一个开发框架，可以将已有的HTML5网站快速发布成Apps。通过wap2app框架，简单的配置和必要的编程即可完成M站的体验提升，并可打包成iOS平台的ipa。,安卓平台apk可在各大应用市场上线，转换后的App与原App媲美。你不相信它能与原作媲美吗？观看视频：https://v.qq.com/x/page/x05025vurui.html视频说明：-环境：同款手机（小米6，同款MIUI），同款网络，使用前清空内存，原生APP使用***版本。-结论：wap2app新页面的渲染速度与原版相当，动画300毫秒以内即可渲染完成，动画流畅。wap2app框架具有以下特点：1、提供原生渲染能力，让界面渲染速度和动画效果实现原生体验2、提供丰富的系统原生能力（定位、分享、支付、推送等）实现原生功能3.通过json配置页面规则和增强规则，工作量小，学习成本低4.M站只需要稍作修改，改造成本低。自动包含更新的业务逻辑4.wap2app实现方案wap2app的底层实现非常复杂，涉及到大量的native和HTML5优化。针对每一种体验差异我们都有相应的优化方案，例如：窗口动画：wap2app底层拦截页面跳转，新页面加载新的webview，然后使用view的原生动画切换（比如slide-in-右或弹出）；scrollbartop：使用原生标题栏代替HTML5标题栏，与webview一起创建；支持页面标题自动读取，解决了顶部滚动的问题，避免了全白页面的问题。选项卡切换：将选项卡区域和内容区域拆分为两个独立的webview。切换tab时，tab区域webview只是切换高亮状态，然后通知content区域webview加载新页面，从而避免了整体白屏现象。接下来，我们将重点关注能力扩展和渲染加速两个方面。1.能力扩展HTML5可用的API比nativeapp少很多，很多与系统设备相关的功能无法实现；wap2app底层基于HTML5PLUS引擎，可调用数十万原生API，实现更强大的推送、分享、支付、定位等系统能力，可实现与原生App相同的功能需求。wap2app中可以调用的HTML5PLUSAPI分为两部分。1.1常用API——HTML5plus将二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API封装成一个跨平台的HTML5plus规范，规范发布于www.HTML5plus。org，没有供应商私有API。HTML5中国产业联盟现已成为工信部下属单位，HTML5Plus规范也成为行业标准，国家标准立项。1.2其他原生API——Native.js在iOS和Android上分别有超过40万个原生API。有些API不常用，不具备跨平台的特性，比如ios的gamecenterapi。将过多的API封装到HTML5plus中，运行时的体积会增加太多，但如果需要使用这些API又很麻烦。我们有一个突破性的技术来解决以上的烦恼——Native.js，一种将40w个原生API映射到JSAPI的技术。1.3原生扩展示例——分享由于HTML5能力的限制，H5网站只支持wap分享，分享体验很差。下面是一个典型的实现（参考下面的截图）：-点击微信分享后，会显示一个二维码，用户需要启动微信扫描二维码，首先在微信中打开这篇文章，然后然后通过微信右上角的菜单分享；分享路径太长，操作麻烦；-点击微博分享，需要登录微博wap站才能完成仅授权分享。wap2app运行在HTML5PLUS引擎下，可以通过HTML5PLUS的分享模块直接调用系统原生的分享。同样的场景，稍微修改一下，在wap2app环境下调用nativeshare，体验会大大提升。下面是对原生分享的调用。截图：显然，wap2app调用原生分享后，分享路径更短，体验更好，更有利于内容的分享和传播。2、接下来说一下渲染加速。与原生应用相比，网页的加载和渲染速度存在较大的体验差距，严重影响了移动端的业务体验。造成这些体验差距的原因大致如下：--渲染时机：webapp需要等待服务端Document下载后才能开始渲染工作，无法按区域提前渲染；作为一个C/S结构的应用，原生App只是向服务端请求业务数据，其他大部分布局和样式都是本地的，所以当用户触发打开新窗口时，新窗口部分区域的布局可以立即渲染，服务器响应数据后可以更新相应区域的内容；--图片资源请求时机：webapp需要先下载Document，然后根据Document中![]()
标签的src属性异步加载图片资源，所以webapp总是先看到文字，然后图片逐渐被看到；而nativeapp不需要等待任务，可以直接加载图片资源，所以nativeapp的图片显示会早于webapp中的图片显示；--业务数据请求时机：如果webapp的实现是前后端分离的，需要先下载封装了业务逻辑的js文件，下载完成后js发起ajax请求；而原生应用大多在本地封装业务逻辑，可以更早发起HTTP业务请求，无需等待js文件下载完成。如何提高网页的渲染速度，很多公司都在尝试，比如谷歌主导的AMP技术，国内百度推广的MIP技术。这种技术主要用于加速阅读网页，不适合JS交互复杂的场景。适用范围有限。DCloud在webview的基础上提出了subNView技术，这是一个更通用的解决方案，可以提升任何网页的渲染体验。2.1subNView引入subNView，字面意思是subnativeview，核心有两点：-native：subNView是原生绘制的View，与HTML5DOM无关-sub：subNView是webview的一部分，不会替代完整的Webview.它与所属的webview保持相同的生命周期，随着webview的close、hide、zindex变化而变化。subNView是webview的子控件。一个webview可以包含多个subNView，可以在一个subNView上绘制多张图片（包括图片轮播）、文本、区域、按钮等。subNView在保留HTML5优点的基础上，使用原生View，发挥原生渲染的优势；当用户触发窗口切换时，webview继续按照原来的逻辑加载Document和渲染页面；但不需要等待文档加载完成，可以同时在原生View上进行推进完成以下任务：-绘制固定内容区域，或者可以从上一页获取数据的区域，比如如固定地址图片、购物车按钮等，无需等待文档下载完毕再请求加载图片——直接发起业务数据ajax请求，ajax响应后直接在原生View上绘制数据，无需等待用于业务包的JS下载。下面是一个使用subNView增强的商品详情页示例：从上图可以看出：*webview按照原来的逻辑加载Document并渲染页面。一开始内容没加载的时候还是白屏（中间空白区域）*webview同时创建了2个subNView作为webview的子控件*subNView1显示商品详情轮播和商品价格,通过ajax动态获取；轮播图片支持滑动，点击放大预览，用户可以提前查看商品详情*subNView2展示购物车相关功能属于固定显示内容，可以直接渲染*购物车按钮点击后，事件透传到Webview中的购物车按钮，HTML页面的所有逻辑仍然被复用。subNView只是简单的侵入了动画渲染过程，不会造成业务逻辑的重写。下面是使用subNView加速后的页面切换过程对比：2.2如何使用subNView开发者可以通过webview的subNViews属性来创建或修改subNview控件，这里需要传入复杂的json对象；为了简化开发，DCloud提供了NView模板技术。NView模板类似于Vue的单文件组件（single-filecomponents）。在HBuilder中创建了一个新的NView模板文件。默认代码如下：NView模板涉及模板标签、属性、样式定义、数据绑定等概念。详情请访问wap2app官网。5、Wap2app开发方法Wap2app开发简单，主要以json文件快速配置为主，规则简单，学习成本低，工作量小；一个中型的M站，一个前端工程师4天左右就可以改造完成。wap2app还支持Javascript高级编程，可以实现更复杂的需求开发。在具体的开发过程中，wap2app涉及到1.wap2app的本地工作：通过框架提供的sitemap文件，描述页面关系和动画增强方案，实现原生的窗口切换效果。当sitemap.json配置不能满足复杂需求时，可以使用app.js编程进行增强处理。2、H5网站改造：根据App运行环境（不同的UA），进行适当的修改，包括去掉一些不应该出现在App中的页面元素（比如底部的电脑版链接，启用原生后导航栏，需要隐藏原来的HTML5divnavbar）。3、如果需要调用DCloud的HTML5+扩展能力，如M站之前无法实现的微信分享、推送、原生支付等，并进行必要的编程开发，这部分工作可以在本地实现，也可以在H5上实现网站（需要区分的是wap2app运行环境）。此外，wap2app是完全免费的！更多信息请访问wap2app官网：http://dcloud.io/wap2app.html以下是开发者社区小伙伴的提问和分享：Q:web_He_Nanchong：wap2app改造后，可以直接去直播app吗？A：DCloud-崔老师：是的。Q：没关系：NView模板什么时候可以在mui框架上使用？A：DCloud-崔老师：一般是App开发，基于C/S结构，html页面在本地，渲染速度还是可以的，NView模板意义不大。Q：意思无语：如果用hbuilder开发的app可以快速逆向wap？A：DCloud-崔老师：DCloud为开发者提供两种开发模式：1.从头开发，使用mui框架，一次开发，app站和wap站同时拥有；2.如果你已经有wap站，使用wap2app框架，将wap站强化为app。Q：意思无语：这个适用场景是wap还没有用我们的开发工具开发出来，可以快速转成app项目。如果开发了wap项目，是不是不适用了？还是申请工作量大？会很大。A：DCloud-崔老师：没有wap，也没有App。推荐使用mui，一次性开发，多设备发布。Q：意思无语：mui和wap2app哪个效果流畅度最好？A：DCloud-崔老师：看你现在的阶段，如果你优化好，你会有很好的体验。流媒体应用管理器可以在http://liuyingyong.cn/下载，其中唯品会、大众点评、京东都是基于wap2app实现的。您可以体验流畅度。Q：意思无语：问题是我用的是mui+h5+开发的app，然后转成wap，但是wap里面h5+的内容不支持。A:DCloud-崔老师：如果要调用5+的代码，需要注意区分平台是的，判断是在5+环境下调用，功能会降级或隐藏在浏览器模式下Q:php-Internet+-Shanghai:崔老师您好，我有2个问题：问题1：提醒老师上面提到的：“窗口动画：wap2app底层拦截页面跳转，新页面是加载了一个新的webview。”是说a标签的所有href跳转都会被自动拦截还是需要特殊配置？问题2：打包后的APK解压后，可以看到html/css/js等所有前端文件，这些文件很容易泄露或被盗。在后续的升级中，有没有考虑过什么防范措施？A：DCloud-崔老师：wap2app底层会拦截location.href跳转，不管是a标签的点击跳转还是js跳转。目前打包时有加密选项。Q1：web_He_Nanchong：那我想搭建一个新的移动端系统，涵盖webapp、流应用、微信公众号页面、Android、IOS，即一次开发，五次发布，应该用到什么技术？Q2:Development-sanbor:wap2app只能用于流媒体应用吗？A：DCloud-崔老师：目前支持将wap2app工程打包成原生安装包（iOS平台ipa安装包，Android平台apk安装包），支持发布到流媒体应用平台。Q：陈永松-新阳：我想在登录后判断不同的权限，从而显示不同的底部标签，可以吗？A：DCloud-崔老师：这个需求准确的描述是二级页面的tab优化，以后会支持。Q：广州-前端-黄晓雯：mui可以做wap站吗？这不是一个应用程序吗？A：DCloud-崔老师：mui支持多端发布，可以通过构建工具发布到不同平台。Q：Guangzhou-Frontend-HuangXiaowen：MUI多机发布不是指ios和Android吗？wap站也可以吗？mui支持wap的M站吗？A：DCloud-崔老师：手机浏览器或微信访问：http://dcloud.io/hellomui/这段代码其实是ios和安卓hellomui的一套代码。Q：大数据-ta-Beijing：如果要运行wap2app应用，必须安装插件。不知道的用户还以为进入了钓鱼网站。这样不好..A：DCloud-崔老师：装什么插件？目前很多互联网公司的流媒体应用都是基于wap2app实现的，所以需要安装流媒体应用管理器才能体验；但是很多创业者自己实现的wap2app项目都是打包成apk/ipa，不需要安装任何插件，直接在手机上安装运行即可。Q：php-Internet+-Shanghai：我们底层有没有对mui进行特殊的支持？如果你用其他的前端框架比如bootstrap，或者你自己原生写的效果，是不是就没有用mui渲染那么快？A：DCloud-崔老师：目前没有私有支持，mui的特点是轻量级、原生UI、多设备发布。开发人员还可以使用其他UI库。Q：PHP-杨-厦门：一些用vue、angular等前端框架做的单页或非单页的页面可以用wap2app转换吗？A：DCloud-崔老师：wap2app目前对主MPA进行了优化，SPA模式效果不明显，不推荐。Q：打开互联网-李生：因为现有的wap站点有多个header，wap2app是否支持原始header的多种样式，然后nativeheader有一个“购物车”按钮。当购物车里有商品时，会显示一个红点，现在可以实现吗？A：DCloud-崔老师：可以自定义导航栏的绘制，通过plus.webview.WebviewObject.getTitleNView获取导航视图，然后自己绘制。Q:php-Inspiration-Suqian:在人才网等聊天栏中，可以获取网页的企业id吗？这将允许您聊天。什么是海洋保护区？什么是水疗？A:DCloud-崔老师:SPA:singlepageapplicationQ1:软攻狮：其实我一直对这个有疑问。有的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跳转问：前端-广州：我已经用mui做了一个app，现在想转换apptowapforembedding在第三方app中，如何使用mui实现呢？目前尚不清楚第三方应用程序使用什么框架。App页面的打开不是使用原生底层实现的吗？A1：DCloud-崔老师：把自己开发的app代码直接部署到服务器上，然后用浏览器访问看看有没有兼容性问题。如果没有问题，直接使用。例如：mui.openWindow()在App中打开一个新的webview，浏览器降级执行location.href跳转A2：手机-小鱼-北京：普通浏览器不支持5+runtime，需要使用plus相关的forAPI部分，做一些处理。我以前做过类似的事情，但它更简单。比如跳转，如果使用mui.openWindow，就不需要处理了。如果用原来的做分享，就得自己注册h5版本，才能兼容不同的环境。Q：北京独角兽数据：HBuilder和wap2app商业使用收费吗？是否有与GraphQL结合的案例？A：DCloud-崔老师：免费，不收费。据我所知，没有合并的案例。Q：php-纵横-秦皇岛：感觉hb***的问题是没有htmlcss混淆，native代码直接泄露。A：DCloud-崔老师：目前只支持js加密，不支持html、css加密，但是业务逻辑应该也是提取出来用js写的。【原创稿件，合作网站转载请注明原作者和出处为.com】
