一、需求说明

如果我们只有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产品。