声明一个bol值VersionFlag控制版本升级弹窗的开关,默认关闭
    Website: 更新的官网地址 VersionExplain: 更新内容
    myVersion: 当前版本号
    image.png

    用plus方法获取版本号
    请求后台接口获取后台返回的版本号
    plus.runtime.version获取当前的版本
    当前版本和返回的版本进行对比 如果不等于返回的版本VersionFlag变为true,打开升级弹窗
    image.png

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

    1. <template>
    2. <div id="app">
    3. <router-view v-if="!$route.meta.keepAlive" />
    4. <keepAlive>
    5. <router-view v-if="$route.meta.keepAlive" />
    6. </keepAlive>
    7. <div class="Version_cover" v-if="VersionFlag">
    8. <div class="center_box">
    9. <h1>发现新版本</h1>
    10. <div class="explain" v-html="VersionExplain"></div>
    11. <div class="btn" @click="Upgrade">前往升级</div>
    12. </div>
    13. </div>
    14. </div>
    15. </template>
    16. <script>
    17. export default {
    18. name: "App",
    19. data() {
    20. return {
    21. Website: "", //更新的官网地址
    22. VersionFlag: false, //版本提示开关
    23. VersionExplain: "", //更新内容
    24. myVersion: "" //当前版本号
    25. };
    26. },
    27. methods: {
    28. Upgrade() {
    29. plus.runtime.openURL(this.Website);
    30. },
    31. getVersion() {
    32. //XXXXXXX 是请求的后台接口
    33. this.$post("/XXXXXXX").then(res => {
    34. // 字段名是你家后台返回的字段名
    35. this.myVersion = plus.runtime.version; //当前版本号
    36. this.Website = res.data.app_download; //更新的官网地址
    37. this.VersionExplain = res.data.app_info; //更新内容
    38. if (this.myVersion != res.data.app_version) {
    39. this.VersionFlag = true;
    40. } else {
    41. this.VersionFlag = false;
    42. }
    43. });
    44. }
    45. },
    46. created() {
    47. this.getVersion();
    48. },
    49. mounted() {},
    50. beforeDestroy() {}
    51. };
    52. </script>