配合原生APP,云端实现h5的Zip更新文档

2018-12-24

使用h5开发的APP,经常会需要更新一些需求或者解决bug,每次重新打包发布之后，用户需要重新下载APP,给开发调试和实际使用中带来很多不便，遂开发版本自动检查更新功能

前端部分：

1.APP在打包的时候生成一份Json文件，保存该版本的基本信息

在build文件夹下新建build-version.js

const fs = require('fs')
const ENV = require('../config/prod.env')

module.exports = () => {
  fs.writeFileSync(
    './dist/version.json',
    JSON.stringify(
      {
        version: ENV.VERSION_ENV.replace(/\"/g, ''), // app版本
        pid: ENV.PID_ENV.replace(/\"/g, ''), // 项目pid
        time: parseInt(ENV.BUILDTIME_ENV.replace(/\"/g, '')), // 打包时间（用作zip的版本号）
        address: '$ADDRESS', // 下载路劲
        md5: '$MDS' // 下载文件所需的参数
      },
      null,
      2
    )
  )
}

在build.js中引入build-version.js，打包时执行，保存版本信息

const buildVersion = require('./build-version') // 引入

webpack(webpackConfig, (err, stats) => {
    ...other code...
    buildVersion() // 执行该方法，生成版本json文件
})

每次打开app的时候执行检查更新的函数，在app.vue中调用以下方法：

oldAppVersion：本地的app版本号
newAppVersion：云端拉取回来的版本号（最新）

比较两个版本号，如果相同，说明没有大版本的更新（APP没有做改动），即可进行H5更新，再进行build版本号比较，如果云端版本更高，则调用APP的window.Matrix.upgradeH5 进行更新，
如果大版本号不相等，则zip更新无效，提示用户重新到运用市场下载最新版本

import axios from 'axios'
import { Dialog } from 'vant'

export function zipUpdate () {
  let apiEnv = process.env.API_ENV
  let pidEnv = process.env.PID_ENV
  let versionEnv = process.env.VERSION_ENV
  let buildTimeEnv = process.env.BUILDTIME_ENV
  console.log('当前APP版本号', versionEnv)
  console.log('当前build版本号', buildTimeEnv)
  axios.get(`https://hy.hekr.me/h5update/version-${pidEnv}-${apiEnv}.json?` + Math.random())
    .then(({ data }) => {
      let newVersion = data.h5
      let oldAppVersion = versionEnv.split('.').join('')
      let newAppVersion = newVersion.version.split('.').join('')
      if (oldAppVersion === newAppVersion) {
        if (Number(newVersion.time) > Number(buildTimeEnv)) {
          Dialog.confirm({
            title: '温馨提示',
            message: '发现新的版本，是否更新？否则可能会影响您的正常使用！',
            className: 'hk-dialog'
          })
            .then(() => {
              let url = 'https://hy.hekr.me/h5update/' + newVersion.address.slice(2)
              let md5 = newVersion.md5
              window.Matrix.upgradeH5(`${newVersion.version}(${newVersion.time})`, url, md5)
            })
            .catch(() => {
              console.log('update error')
            })
        }
      } else if (Number(newAppVersion) > Number(oldAppVersion)) {
        Dialog.alert({
          title: '温馨提示',
          message: '发现新版本的应用程序，需要下载重装新应用！否则可能会影响您的正常使用！',
          className: 'hk-dialog'
        })
      }
    })
}