wap/h5打包成app

最近工作接到一个要求，把一个可以在微信运行的h5链接（wap站）转换打包成app，不要求重新写，尽可能少代码快速地转换打包，可以使用uniapp、wap2app或者5+app完成，择优使用。经过各种波折，现在完成了，仅此记录总结。

一、工具选择

1、wap2app

一开始查看dcloud官网，建议是使用wap2app转换的，但经过实践，wap2app适合一切完备的wap站，如果要额外在wap2app中添加代码，必然要先执行显示h5（wap站）本来的样式，再闪动改变。使用体验挺不好的，而且因为每个页面都会默认创建一个新的webview，返回上一个webview是不会自动刷新的，所以刷新问题也很难解决（也可能是我没找到）。于是尝试其他工具。

2、5+app

网上找到用5+app转换的方法，但是看完后发现不适合我的项目，于是放弃，以下附上我找到的链接，有需要的可以参考。
链接: 5+app打包h5项目

3、uniapp

uniapp的打包方法也是在网上找到的，使用uniapp中的webview组件做外壳打包，使用体验比wap2app良好很多，也没有了刷新问题，但也会有些别的问题，下面会附上解释和解决方法。有需要的也可以去dcloud官方文档看看webview的使用方法。
链接: dcloud官方webview文档

二、具体操作

1、简单打包（也可以作为小程序中引入h5网页使用）

1.新建uniapp项目（用于打包，引入的话新建vue文件就可以了）
2.找到pages -> index -> index.vue文件删掉所有代码，粘贴以下的代码进去。（ps：src中填上h5网页/wap站首页地址）

<template>
  <view>
    <web-view src=""></web-view>
  </view>
</template>

2、安卓打包成apk后出现的问题

安卓手机物理返回键返回退出app

原因应该是因为只有一个webview。通过监听手机物理返回事件解决。仍然是修改index.vue代码，以下附上完整代码。

<template>
  <view>
    <web-view :src="src"></web-view>
  </view>
</template>

<script>
var wv; //计划创建的webview
export default {
   
  data() {
   
    return {
   
      src: "",//h5或wap首页地址
      canBack: false,
    };
  },
  onBackPress() {
   
    if (wv && this.canBack) {
   
      wv.back();
      return true;
    }
    return false;
  },
  onReady(<