Vue移動端App實現自動更新

1、搭建apk文件下載路徑（Java）

@GetMapping("/download")
    public String download(HttpServletResponse response) throws IOException {
        // 下載的文件名
        String fileName = "大拇指出行.apk";

        // 如果文件名不為空，則進行下載
        if (!StringUtils.isEmpty(fileName)) {
            //設置文件路徑
            String realPath = "apk文件的路徑";
            File file = new File(realPath, fileName);
            // 如果文件名存在，則進行下載
            if (file.exists()) {
                // 配置文件下載
                response.setHeader("content-type", "application/octet-stream");
                response.setContentType("application/octet-stream");
                // 下載文件能正常顯示中文
                response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
                response.setHeader("Content-Length",""+file.length());
                // 實現文件下載
                byte[] buffer = new byte[1024];
                FileInputStream fis = null;
                BufferedInputStream bis = null;
                try {
                    fis = new FileInputStream(file);
                    bis = new BufferedInputStream(fis);
                    OutputStream os = response.getOutputStream();
                    int i = bis.read(buffer);
                    while (i != -1) {
                        os.write(buffer, 0, i);
                        i = bis.read(buffer);
                    }
                }
                catch (Exception e) {
                    log.info("Download the apk failed!");
                }
                finally {
                    if (bis != null) {
                        try {
                            bis.close();
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                    if (fis != null) {
                        try {
                            fis.close();
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                }
            }
        }
        return null;
    }

 

 

2、添加下載所需對比的json文件，並做文件映射（Java，SpringBoot2.x）

{
  "update": "yes",
  "version": "1.0.1",
  "url": "你的APK文件的下載路徑"
}

@Configuration
public class MvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/version.json").addResourceLocations("classpath:/version/version.json");
    }    

}

 

 

3、App.vue頁面的methods添加以下方法

// 獲取當前版本號
getNativeVersion(){
    let that = this;
    plus.runtime.getProperty(plus.runtime.appid, function(inf){
        that.nativeVersion = inf.version;
        that.checkUpdate(inf.version);
        localStorage.setItem("nativeVersion", inf.version);
    });
},
// 檢查更新
checkUpdate(nativeVersion){
    let that = this;
    const checkUrl = "你的更新地址?date="+new Date();
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4) {
            if(xhr.status === 200){
                let responseObj = JSON.parse(xhr.responseText);
                let serverVersion = responseObj.version;
                if(responseObj.update === "yes" && nativeVersion < serverVersion){
                    that.downloadApk(responseObj.url);
                }
            }
        }
    };
    xhr.open('GET',checkUrl);
    xhr.send();
},
// 下載apk文件
downloadApk(url){
    let that = this;
    plus.downloader.createDownload( url , {filename: "_doc/update/"}, function(d, status){
        if ( status === 200 ) {
            // 安裝apk資源包
            that.installFlag = true;
            that.path = d.filename;
        }
    }).start();
},
// 安裝apk
installApk(){
    this.installFlag = false;
    plus.nativeUI.showWaiting("安裝更新");
    plus.runtime.install(this.path,{},function(){
        plus.nativeUI.closeWaiting();
        plus.nativeUI.alert("更新完成！",function(){
            //  更新完成后重啟應用
            plus.runtime.restart();
        });
    },function(e){
        plus.nativeUI.closeWaiting();
        plus.nativeUI.toast("安裝更新失敗！");
    });
},

 

 

---

使用nginx搭建下載文件服務器，nginx默認支持斷點續傳

 

1、centos7下yum安裝方式：https://www.cnblogs.com/knightdreams6/p/11395444.html

 

2、nginx配置

server {
    listen       你的端口號;
    server_name  你的服務器IP;

    charset utf-8;
    access_log  /var/log/nginx/host.access.log  main;
    root 你的APK文件路徑;

    location / {

        default_type  'application/octet-stream';
        add_header     Content-disposition "attachment";

    }
}

這樣就可以通過  你的服務器IP:你的端口號/你的APK文件名稱進行下載