将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结构，资源从本地加载，可以⽆需等待⽴即渲染部分元素，避免⽩屏现象；
mui框架常用组件有哪些
系统能⼒：HTML5因API限制，很多终端能⼒⽆法调⽤，导致很多功能缺失或不如原⽣，⽐如推送、扫码、分享、⽀付等；
系统梳理，这样的体验差异点还有很多，我们基于多年HTML5开发经验和⼤量项⽬实践，逐⼀解决如上的体验差异点，终于打磨出了
wap2app产品。
wap2app框架简介
wap2app是⼀个将现有HTML5⽹站快速发布成App的开发框架，通过wap2app框架，进⾏简单的配置和必要的编程，即可完成M站的体验强化，可打包成iOS平台的ipa、Android平台的apk，可上线各⼤应⽤市场，转换后的App可媲美原⽣App。
视频说明：
环境：相同的⼿机设备（⼩⽶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⼀起创建；⽀持⾃动读取页⾯标题，
即解决了滚动条通顶，也避免了页⾯全⽩问题。
选项卡切换：将选项卡区域和内容区拆分成两个单独的webview，切换选项卡时，选项卡区webview仅切换⾼亮状态，然后通知内容区webview加载新的页⾯，这样就可以避免整体⽩屏现象。
接下来，我们重点讲解能⼒扩展和渲染加速两个⽅⾯。
能⼒扩展
HTML5可⽤API⽐原⽣App少很多，很多和系统设备相关的功能⽆法实现；wap2app底层基于HTML5 PLUS引擎，可以调⽤⼏⼗万原⽣
API，实现更强的推送、分享、⽀付、定位等系统能⼒，可实现和原⽣App⼀样的功能要求。
wap2app中可调⽤的HTML5 PLUS API分两个部分。
常⽤的API – H TML5plus
包括⼆维码、摇⼀摇、语⾳输⼊、地图、⽀付、分享、⽂件系统、通讯录等常⽤API，封装成跨平台的HTML5plus规范，并将规范公开于，不做⼚商私有API。HTML5中国产业联盟⽬前已经成为⼯信部的下属单位，⽽HTML5Plus规范也已经成为⾏标，并进⾏了国标⽴项。
其他原⽣API – N a tive.js
原⽣API在iOS和Android上各⾃有40多万，有些API并不常⽤，⽽且不具有跨平台特性，⽐如ios的game center api。太多的API封装到HTML5plus⾥，会过多增加runtime的体积，但若有需求要使⽤这些api⼜很⿇烦。
我们有⼀项突破性的技术来解决上述烦恼—Native.js，⼀种把40w原⽣API映射为JS API的技术。
wap2app⽀持native.js，可以在js代码中直接调⽤原⽣代码。
原⽣扩展⽰例 - 分享
因HTML5能⼒限制，H5⽹站仅⽀持wap⽅式的分享，分享体验很糟糕，如下是⼀种典型实现（参考下⽅截图）：
点击分享后，显⽰⼀个⼆维码，⽤户需要启动扫描⼆维码，先在中打开这篇⽂章，然后再通过右上⾓的菜单分享出去；分享路径太长，操作⿇烦；
点击微博分享，需要登录微博wap站，完成授权后才能分享
wap2app运⾏在HTML5 PLUS 引擎下，是可以通过HTML5 PLUS的直接调起系统原⽣分享的，同样场景，稍作改造，在wap2app环境下调⽤原⽣分享，则体验会⼤⼤改观，如下为调⽤原⽣分享后的截图：
wap2app还可以调起系统⽀持的更多分享，⽐如微博、QQ、短信、邮件等，如下为点击“更多分享”后的⽰例：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。