需求：
app打开时自动检测是否是最新版本，如果不是出现弹框，点击升级
效果图：

实现步骤：
一，准备工作

声明一个bol值VersionFlag控制版本升级弹窗的开关，默认关闭
Website: 更新的官网地址 VersionExplain: 更新内容
myVersion: 当前版本号 （源码在最下面）

二，封装getVersion方法对版本号进行判断

这里用到的是plus方法获取版本号

请求后台接口获取后台返回的版本号
plus.runtime.version获取当前的版本
当前版本和返回的版本进行对比 如果不等于返回的版本VersionFlag变为true，打开升级弹窗 （源码在最下面）

三，点击前往升级，去升级版本

点击前往升级 plus.runtime.openURL打开升级链接，自动更新

四，打包测试
Android和iOS通用

五，源码
内联代码片 （用不到的可自行删除，rem + scss布局 ，根据自己的布局进行调整）

<template>
  <div id="app">
    <router-view v-if="!$route.meta.keepAlive" />
    <keepAlive>
      <router-view v-if="$route.meta.keepAlive" />
    </keepAlive>
    <div class="Version_cover" v-if="VersionFlag">
      <div class="center_box">
        <h1>发现新版本</h1>
        <div class="explain" v-html="VersionExplain"></div>
        <div class="btn" @click="Upgrade">前往升级</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      Website: "", //更新的官网地址
      VersionFlag: false, //版本提示开关
      VersionExplain: "", //更新内容
      myVersion: "" //当前版本号
    };
  },
  methods: {
    Upgrade() {
      plus.runtime.openURL(this.Website);
    },
    getVersion() {
    //XXXXXXX 是请求的后台接口
      this.$post("/XXXXXXX").then(res => {
        // 字段名是你家后台返回的字段名
        this.myVersion = plus.runtime.version;   //当前版本号
        this.Website = res.data.app_download;   //更新的官网地址
        this.VersionExplain = res.data.app_info;  //更新内容
        if (this.myVersion != res.data.app_version) {
          this.VersionFlag = true;
        } else {
          this.VersionFlag = false;
        }
      });
    }
  },
  created() {
    this.getVersion();
  },
  mounted() {},
  beforeDestroy() {}
};
</script>


<style lang="scss">
#app {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

* {
  margin: 0;
  padding: 0;
  font-family: PingFang-SC-Regular;
  font-weight: normal;
  font-stretch: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}

input,
textarea {
  -webkit-user-select: auto;
}

.addCard .van-field__control {
  color: #b1b1b1;
}

.Version_cover {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;

  .center_box {
    width: 80%;
    height: 5.333333rem;
    border-radius: 0.533333rem;
    background: rgba(255, 255, 255);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    h1 {
      width: 100%;
      text-align: center;
      font-size: 0.4rem;
      font-weight: bold;
      padding: 0.266666rem 0;
    }

    .explain {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      height: 2.533333rem;
      padding: 0 0.4rem;
      box-sizing: border-box;
      font-size: 0.266666rem;
      opacity: 0.9;
    }

    .btn {
      width: 80%;
      height: 1.066666rem;
      background: #ff4500;
      border-radius: 0.533333rem;
      font-size: 0.4rem;
      color: white;
      line-height: 1.066666rem;
      text-align: center;
      letter-spacing: 1px;
      position: absolute;
      bottom: 0.266666rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>