wap2app： vue2.0单页面h5站 改造APP

公司的移动端H5项目上线后，有新需求需要快速生成APP，于是开始准备使用wap2app封壳改造APP，现在基本功能已经完成。

准备写上一篇填坑的记录，和大家共同讨论，目前相关的资料特别少，所以把遇到的问题就列举出来。

本文不定期更新中。。

本人联系方式 qq：393268240

准备工作篇

H5网站配置：webpack自动化构建，vue2.0前端框架，flexble js适配方案

打包配置：HBuilderX新版，苹果证书，安卓证书。

项目构建

1新建wap2app项目

2选择默认模板

3开始配置manifest.json。
1）应用入口页面地址为：wap站首页url，注意一定要用https，如果使用http会被各种广告注入，包括什么联通，电信，还有一些乱七八糟的广告。

2）图标配置：每个分辨率都要准备png图片。

3）启动图配置：每个分辨率都上传，我只适配竖屏，横屏的图片就忽略了，注意图片压缩，不压缩会特别占空间。启动界面选项我配置的是延迟500毫秒自动关闭。tip：如果使用了自己的启动图记得不启用界面显示等待雪花，否则会显示0.3秒的Hbuild的LOGO再打开启动图，特别丑。

4）SDK配置：我只启用的支付部分，使用了支付宝支付。tip：此处的支付接口需要服务端生成订单信息orderstr用于入参，此处的服务端接口我们， 直接使用了支付宝小程序的接口，APP和小程序是通用的。

5）模块权限配置：我只启用了 支付，此处要和SDK同步启用模块

调试篇
1使用hbuild的运行功能进行真机调试

2连接真机到电脑，运行-运行到手机或模拟器-你的设备

3开始运行后，会在设备上安装一个hbuild的APP，通过这个APP打开项目可以在Hbuild控制台看到console.log信息。

4通过下列代码可以判断设备是否是APP环境

let userAgent = navigator.userAgent;
if (/Html5Plus/.test(userAgent)) { //APP客户端

}

改造篇
1分析需求：

列举从H5改造为APP需要调整的模块，我的APP主要改造部分为：头部导航栏，登录，支付，打开外链

1）登录模块：

原H5适用于，浏览器环境，微信公众号环境，所以使用了手机号验证码登录和微信授权登录。
APP登录方式，通过判断为APP环境后只显示手机号验证码登录