vue使用h5puls做APP自动更新

首先我们先来理清思路在来一步步的做 确保当前有h5puls的第三方库 或者使用HBuilder X 或者HBuilder 来打包webapp APK中就自动集成了h5puls（或者可以写道其他事件里面触发检查更新下载版本）

这里APP自动更新全部都在App.vue 页面完成

h5puls官方文档

1. 先检查安装的apk的版本号，
   文档链接Runtime

   使用 plus.runtime.getProperty  API	官方文档代码
   

		// 获取应用信息
		function getAppInfo() {
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
				//appid属性
				var wgtStr = "appid:"+wgtinfo.appid;
				//version属性
				wgtStr += "<br/>version:"+wgtinfo.version;
				//name属性
				wgtStr += "<br/>name:"+wgtinfo.name;
				//description属性
				wgtStr += "<br/>description:"+wgtinfo.description;
				//author属性
				wgtStr += "<br/>author:"+wgtinfo.author;
				//email属性
				wgtStr += "<br/>email:"+wgtinfo.email;
				//features 属性
				wgtStr += "<br/>features:"+wgtinfo.features;
				console.log( wgtStr );
			} );
		}

	这里我们也使用这个API 来获取APPID

	window.plus.runtime.getProperty(window.plus.runtime.appid,(inf)=>{
		 console.log(inf) //当前APP的数据包含了APP的版本号
		  console.log(inf.version) //当前APP的版本号
		
		})

2. 从服务端获取APP（服务端是我打包好的APP,以及对应的版本）
   获取服务端的数据 进行APP版本号的比较

   使用Downloader模块进行APK下载 管理文件下载，用于从网络下载各种文件，可支持跨域访问操作
   Downloader
   官方示例

// 创建下载任务
function createDownload() {
	var dtask = plus.downloader.createDownload("http://www.abc.com/a.doc", {}, function(d, status){
		// 下载完成
		if(status == 200){ 
			console.log("Download success: " + d.filename);
		} else {
			 console.log("Download failed: " + status); 
		}  
	});
	//dtask.addEventListener("statechanged", onStateChanged, false);
	dtask.start(); 
}

这里我们新建一个自己的下载模块

var downToaknew = window.plus.downloader.createDownload(‘APK下载地址’, {
                  filename: ''  //filename: (String 类型 )下载文件保存的路径  
                },
                function (d, status) {
                  if (status == 200) {
                    // 当前下载的状态
                    installApp(d.filename) // 调用安装的方法
                  } else {
                    window.plus.nativeUI.alert('下载失败')
                  }
                }
              )

downToaknew.start() //调用APP下载方法

 // app自动更新进度  下面放发会显示 当前APK下载进度 已经APK的大小
 downToaknew.addEventListener('statechanged', function ( task,status){
}

3.调用APP 安装模块 plus.runtime.install

调用自动安装放发

				//APK下载的路基 前面我们设置了APK下载的路基  调用放发时候 传入路径即可
              function installApp (path) {
                window.plus.nativeUI.showWaiting('安装文件...')
                window.plus.runtime.install(
                  path, {
                    // true表示强制安装，不进行版本号的校验；false则需要版本号校验，如果将要安装应用的版本号不高于现有应用的版本号则终止安装，并返回安装失败。 仅安装wgt和wgtu时生效，默认值 false
                    force: false
                  },
                  function () {
                    window.plus.nativeUI.closeWaiting()
                    console.log('安装文件成功！')
                    _this.hidedownloader = false
                    window.plus.nativeUI.alert('应用资源更新完成！', function () {
                      window.plus.runtime.restart()
                    })
                  },
                  function (e) {
                    window.plus.nativeUI.closeWaiting()
                    window.plus.nativeUI.alert('安装文件失败' + e.message)
                    _this.hidedownloader = false
                    sessionStorage.setItem('nextCheckTime', 'UnupdateId')
                  }
                )
              }

4.在APK下载完成后调用APK安装放法

完成代码

<template>
  <div id="app">

    <!-- PersonalCenter -->
      <router-view v-on:public_header="public_header" @toFather="getFlag" @toFatherDetail="getDetailFlag" />

  </div>
</template>

<script>

  export default {
    name: 'App',
    data () {
      return {
        versionInformation: []
      }
    },
    mounted () {
      this.examine()
      let _this = this
      document.addEventListener('plusready', function () {
        setTimeout(() => {
          // 获取当前的APP版本号
          window.plus.runtime.getProperty(window.plus.runtime.appid, function (inf) {
            console.log(inf)
            // 判断最新版本的版本号是否大于当前的版本
            if (_this.versionInformation[0].versionNumber > inf.version) {
              var downToaknew = window.plus.downloader.createDownload(
                _this.versionInformation[1].urldownloader +
                _this.versionInformation[0].downloadAddress, {
                  filename: ''
                },
                function (d, status) {
                  if (status == 200) {
                    // 当前下载的状态
                    installApp(d.filename) // 调用安装的方法
                  } else {
                    window.plus.nativeUI.alert('下载失败')
                  }
                }
              )
              // 等于空代表，用户没有点击取消的任何操作
                let ThereIsAnew = confirm('发现新的版本啦,是否要更新')
                if (ThereIsAnew) {
                  downToaknew.start() // 开启下载的任务
                  // app自动更新进度
                  downToaknew.addEventListener('statechanged', function (
                    task,
                    status
                  ) {
                    // 给下载任务设置一个监听 并根据状态  做操作
                    switch (task.state) {
                      case 1:
                        console.log('正在下载')
                        break
                      case 2:
                        console.log('已连接到服务器')
                        break
                      case 3:
                        // console.log(task)
                        // console.log(task.downloadedSize)//当前的大
                        // console.log(task.totalSize)//安装包的大小
                    }
                  })
              // 自动更新
              // eslint-disable-next-line no-inner-declarations
              function installApp (path) {
                window.plus.nativeUI.showWaiting('安装文件...')
                window.plus.runtime.install(
                  path, {
                    // true表示强制安装，不进行版本号的校验；false则需要版本号校验，如果将要安装应用的版本号不高于现有应用的版本号则终止安装，并返回安装失败。 仅安装wgt和wgtu时生效，默认值 false
                    force: false
                  },
                  function () {
                    window.plus.nativeUI.closeWaiting()
                    console.log('安装文件成功！')
                    window.plus.nativeUI.alert('应用资源更新完成！', function () {
                      window.plus.runtime.restart()
                    })
                  },
                  function (e) {
                    window.plus.nativeUI.closeWaiting()
                    window.plus.nativeUI.alert('安装文件失败' + e.message)
                  }
                )
              }
            } else {
              console.log('没有最新的版本')
            }
          }
        }, 3000)
      })
    })
    },
    methods: {
      // 检查当前版本是否是最新的
      examine: async function () {
        let params = {
          versionType: 1
        }
        const res = await this.http.post(this.api.examine, params)
        if (res.data.rc == 0) {
          this.versionInformation = this.versionInformation.concat(res.data.data)
          this.versionInformation.push({
            urldownloader: this.api.updateAPP
          })
        } else {
          // 获取最新版本失败
        }
      }

    }
  }
</script>

<style lang="less" scoped>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 0px;
  }

</style>