vue 实现app项目版本迭代自动更新热更新

灰太狼 2023-07-25 08:50 7阅读 0赞

**需求：**  
app打开时自动检测是否是最新版本，如果不是出现弹框，点击升级  
**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70]  
**实现步骤：**  
**一，准备工作**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70 1]  
声明一个bol值**VersionFlag**控制版本升级弹窗的开关，默认关闭  
**Website:** 更新的官网地址 **VersionExplain:** 更新内容  
**myVersion:** 当前版本号 （**源码在最下面**）

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

这里用到的是plus方法获取版本号  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70 2]  
请求后台接口获取后台返回的版本号  
plus.runtime.version获取当前的版本  
当前版本和返回的版本进行对比 如果不等于返回的版本VersionFlag变为true，打开升级弹窗 （**源码在最下面**）

**三，点击前往升级，去升级版本**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70 3]  
点击前往升级 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70]: /images/20230528/99c40b804c8147fc8545e7487dace413.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70 1]: /images/20230528/1522c1d105144dce80c951f81cbb7d08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70 2]: /images/20230528/bccc140f59d4433c92c5b791ead68eff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70 3]: /images/20230528/70cd3963f3274dbf9f8d9da433dae7d2.png