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文件名称进行下载