阿里前端工程师——细谈WEB APP自动更新，网友两个字：优秀！

朱雀 2022-02-05 03:29 157阅读 0赞

我们的手机软件每天都要经营，经常需要更新，比如程序的Bug，好的功能，好的洁面... ... 这就需要我们的用户打开web app时候自动更新客户端程序，而不是再去应用程序商店从新下载。今天的笔记就是完成这项工作。

![1240][]

**一、服务器端**

服务器很简单，只存放一个json文档，这个文档你可以用服务器端语言生成，也可以直接建立一个.json文件就可了，数据格式如下。\[\{"VisonID":"1.0.0","downURI":"http://yuanziyu.com/down/yzsc.apk"\}\]

VisonID表示web APP版本号，downURI表示安装文件url

![1240 1][]

**二、客户端**

为了提高用户使用感受，首先提示进行更新检查。

var showLoading = plus.nativeUI.showWaiting("检查更新...");

获取当前web APP版本号：plus.runtime.getProperty(plus.runtime.appid, function(inf) \{inf.version\}。其中inf.version表示web APP版本号。

版本版本笔记如果，服务器端版本号高于客户端版本号，对web APP 进行更新，版本号等于或小于不进行更新。

//版本比较o表示客户端版本号，n表示服务器端版本号。

function checkvison(o, n) \{

var tempo = o.split('.');

var tempn = n.split('.');

if ((tempo\[0\] \* 100 + tempo\[1\] \* 10 + tempo\[2\] \* 1) < (tempn\[0\] \* 100 + tempn\[1\] \* 10 + tempn\[2\] \* 1)) \{

return true;

\} else \{

return false;

**（一）获取服务端数据。**

通过mui.ajax获取服务器端JSON文件。其中参数 Date.parse( new Date())是获取时间戳，防止服务器端缓存，目地主要是为了调试用，如果正式发布可以删除，因为我们跟新速度没有那么快。mui.ajax方法介绍：

mui.ajax(url,\{//url表示服务地址

data:\{\},表示向服务器提交的数据

dataType:'json',//服务器返回json格式数据

type:'post',//HTTP请求类型

async: false,//表示是否异步

timeout:10000,//超时时间设置为10秒；

success:function(json)\{

\},

error:function(xhr,type,errorThrown)\{

//异常处理；

mui.alert('网络延时,请重新加载!', '系统提示');

\});

**（二）下载网络文件。**

我们更新文件或者是APP我们必须先从网络下载文件，然后更新APP软件。下载网络文件我们主要用到的是这个方法html5+中Downloader对象。Downloader对象是模块管理文件下载，用于从网络下载各种文件，可支持跨域访问操作。我们主要用到以下几个方法

**1.createDownload方法，表示新建下载任务。**

Download plus.downloader.createDownload( url, option, completedCB );

说明：表示请求下载管理创建新的下载任务，创建成功则返回Download对象，用于管理下载任务的各种状态。

参数：url (DOMString) 可选 要下载文件的url地址，仅支持网络资源地址。必须是http或https协议；option (DownloadOption) 可选 可通过此参数设置自定义任务属性，自定义属性值仅支持字符串类型；completedCB (DownloadCompletedCallback) 可选 下载任务完成后的回调。

**2.start 表示开始下载任务**

void download.start();

说明：

开始下载任务，如果任务已经处于开始状态则无任何响应。 通常在创建任务或暂停任务后重新开始。

**3.Downloader中的DownloadStateChangedCallback回调，表示下载任务完成时的回调**

vaoid onCompleted( Download download, Number status ) \{

// Download file complete code

说明：下载任务完成时的回调函数，在下载任务完成时调用。 下载任务失败也将触发此回调。

参数：download (Download) 可选 下载任务对象，这里面我们经常用到的一个属性filename，DOMString，只读属性，下载任务在本地保存的文件路径，在DownloadCompleteCallback事件和DownloadStateChangedCallback事件触发时更新。还有很多其它属性我就不记录了，用到的时候在翻手册吧。status (Number) 可选 Http传输协议状态码，如果未获取传输状态则其值则为0，如下载成功其值通常为200

**4.Downloader中的DownloadStateChangedCallback回调，表示下载任务状态变化回调，我们主要用于显示下载进度。**

void onStateChanged( Download download, status ) \{

// Download state changed code.

说明：下载任务状态变化回调。

参数：同DownloadStateChangedCallback。

*Ok，我们用到的主要对象和方法基本介绍完了，本来想给你们看一下完整代码但是貌似有点长，如果需要****源码学习****的话可以***qq群 732171417 即可**领取

![1240 2][]

[1240]: /images/20220205/a3a0b225743749e78279319ca4f0f4de.png
[1240 1]: /images/20220205/ecdd9350377c4000a333e96fee7cb427.png
[1240 2]: /images/20220205/eb23977aa6d641d2bf78345f2bd381ae.png