Vue-typescript 打包成app后如何自动更新

taixingyiji

发布于 2022-07-25 15:10:12

1.3K0

文章被收录于专栏：taixingyiji的博客笔记taixingyiji的博客笔记

# Vue typescript 打包成app后如何自动更新

# 前言

项目需要有一个手机app，则通过Hbuilder云打包生成apk。但是由于没有上架应用商店等问题，所以使用wgt包的方式进行app升级，免去了重新安装的问题。

# 一、前置条件

提示

项目使用的是vue+ts，使用组件 vue-property-decorator 写法，具体请参考链接说明。

使用前，使用者已经知道如何将vue打包成一个app

# 二、代码

话不多说直接上代码

# 1. 如何自动更新

在生命周期函数 created()中调用方法 autoUpdate()

而autoUpdate()方法就是检查更新的操作

created() {
  this.autoUpdate()
}

# 2. 更新方法

window 为浏览器的对象，window.plus 为打包成后app可以调用的api，电脑访问是无法调用的。需要进行判断是否可用。

autoUpdate() {
  if ((window as any).plus) {
    this.plusReady()
  } else {
    document.addEventListener('plusready', this.plusReady, false)
  }
}

# 3. 检查更新

检查是否需要更新，我的更新版本为每次都写入 http://xxx.xxxx.xxx/manifest.json 文件中。

通过 axios 进行操作，获取文件中版本内容，若需要更新则下载 http://xxx.xxxx.xxx/wgt/xxxx.wgt 文件。

plusReady() {
  // 获取本地应用资源版本号
  (window as any).plus.runtime.getProperty((window as any).plus.runtime.appid, (inf: any) => {
    this.checkVersion(inf.version)
  })
}

// 检查版本
checkVersion(currentV: any) {
  // 这里是你获取版本号的方式
  const url = 'http://xxx.xxxx.xxx/manifest.json'
  axios.get(url).then((res: any) => {
    if (res.status === 200) {
      const result = res.data ? res.data : ''
      if (result && currentV && currentV !== result.version) {
        // 这里使用了element-ui的组件 你也可以更换别的
        this.$confirm('检测到有新版本, 是否更新?', '更新提示', {
          closeOnClickModal: false,
          confirmButtonText: '更新',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.downloadWgt('http://xxx.xxxx.xxx/wgt/xxxx.wgt')
        }).catch(() => {
          let plus = (window as any).plus
          plus.runtime.restart()
        })
      }
    }
  }).catch(err => {
    console.log(err)
  })
}

# 4. 完整代码

项目中此处是直接写在App.vue中，可根据自己代码习惯及需求自行更改。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import axios from 'axios'

@Component({
  name: 'App',
})
export default class extends Vue {

  created() {
    this.autoUpdate()
  }

  autoUpdate() {
    if ((window as any).plus) {
      this.plusReady()
    } else {
      document.addEventListener('plusready', this.plusReady, false)
    }
  }


  plusReady() {
    // 获取本地应用资源版本号
    (window as any).plus.runtime.getProperty((window as any).plus.runtime.appid, (inf: any) => {
      this.checkVersion(inf.version)
    })
  }

  // 检查版本
  checkVersion(currentV: any) {
    // 这里是你获取版本号的方式
    const url = 'http://xxx.xxx.xxx/manifest.json'
    axios.get(url).then((res: any) => {
      if (res.status === 200) {
        const result = res.data ? res.data : ''
        if (result && currentV && currentV !== result.version) {
          // 这里使用了element-ui的组件 你也可以更换别的
          this.$confirm('检测到有新版本, 是否更新?', '更新提示', {
            closeOnClickModal: false,
            confirmButtonText: '更新',
            cancelButtonText: '取消',
            type: 'success'
          }).then(() => {
            this.downloadWgt('http://xxxx.xxx.xxx/wgt/xxx.wgt')
          }).catch(() => {
            let plus = (window as any).plus
            plus.runtime.restart()
          })
        }
      }
    }).catch(err => {
      console.log(err)
    })
  }

  // 下载wgt包
  downloadWgt(url: any) {
    let plus = (window as any).plus
    plus.nativeUI.showWaiting('下载更新文件中...')
    try {
      let download = plus.downloader.createDownload(url, {filename: '_doc/update/'}, (d: any, status: any) => {
        if (status === 200) {
          this.installWgt(d.filename) // 安装wgt包
        } else {
          plus.nativeUI.alert('下载更新文件失败！')
        }
        plus.nativeUI.closeWaiting()
      })
      download.start()
    } catch (err) {
      this.$message.error(err)
    }

  }

  // 安装wgt包
  installWgt(path: string) {
    let plus = (window as any).plus
    plus.nativeUI.showWaiting('安装更新文件...')
    let runtime = plus.runtime
    runtime.install(path, {}, this.success, this.error)
  }

  success() {
    let plus = (window as any).plus
    plus.nativeUI.closeWaiting()
    plus.nativeUI.alert('应用资源更新完成！', function () {
      plus.runtime.restart()
    })
  }

  error(e: any) {
    let plus = (window as any).plus
    plus.nativeUI.closeWaiting()
    plus.nativeUI.alert('安装更新文件失败[' + e.code + ']：' + e.message)
  }
}
</script>