Here I will share with you some of the knowledge I have summarized on the Internet, I hope it will be helpful to everyone
Description of Requirement
If you want to make one app
, there are many options, and uni-app
this is one of the more cost-effective (more pitfalls) solutions. This article records the functions that are needed after uni-app
typing .安卓包
检查并下载更新
显示进度条
The code is applied in your own company project, so you can use it with confidence.
need:
- Check if the version is the latest version
- If it is not the latest version, download the latest apk package from the remote server
- During downloading, it is necessary to display how much has been downloaded. When the download reaches 100%, the interface will be automatically installed
Idea analysis
For example, we have a settings page, where we can update the version.
1. Check if it is the latest version
Every time you enter the settings page, onShow钩子
you will send a request to the backend to get the latest version information and compare it with the current version information.
For example, the backend provides an interface to obtain the latest version information
// 接口请求,返回数据如下:
{
"code": 1,
"success": true,
"data": {
"id": 123456, // 存在数据库的id
"applyName": "拼夕夕", // 版本名称
"applyVersion": "1.2.3", // 版本号
"versionDescribe": "此版本新增,是兄弟就帮忙砍一刀功能", // 版本描述
"fileSize":11566511, // 文件的总大小,计算下载进度百分比需要使用
"filePath": "http://ashuai.work:10000/appSrc/pdd.apk", // 版本的url路径,正常在浏览器地址栏中输入即直接下载了
... // 等等
},
"msg": "操作成功"
}
applyVersion
We first get the value "1.2.3" of this field returned by the backend 当下的版本值
to work with 对比
. If the version number of the latest version on the remote side is higher than the current version number, it means that it needs to be updated. Otherwise, the current version is the latest version, so there is no need to update it.
So here comes the question again, how can I get the current version? It doesn't matter, the official ones are available api
and can be obtained directly. The code is as follows:
plus.runtime.getProperty(plus.runtime.appid, (info) => {
this.currentVersion = info.version; // 将当下版本存到currentVersion字段中去
})
Note that the operation of obtaining the version number is asynchronous, asynchronous, asynchronous.
Then "a.b.c"
convert the version number string 数字
to compare.
There are many ways, such as:a*100000 + b*1000 + c*1
// 当然这里需要
if(this.applyVersionVal > this.currentVersionVal){
// 需要更新
this.AndroidUpdate()
}else {
// 当前已是最新版本
uni.showToast({
title: '当前已是最新版本',
duration: 2000,
icon:'none'
});
return
}
2. Update the apk file on the remote end of the download server & progress bar display
Call the Android method to create a download task, you can get the size of the downloaded file at a certain time, and compare the total size to get the download progress percentage
AndroidCheckUpdate() {
const _this = this
uni.showModal({
title: "版本更新",
content: 'APP有新版本发布,点击 立即更新 进行最新版本下载。',
confirmText: '立即更新',
cancelText: '稍后进行',
success: function(res) {
if (res.confirm) {
_this.show = true // show变量控制一个下载进度弹框(这个UI样式自己写即可)
// 创建一个下载任务,并根据后端返回的apk静态资源地址filePath进行下载
var dtask = plus.downloader.createDownload(_this.filePath, {}, function(d, status) {
// 下载完成
if (status == 200) {
_this.show = false // 下载完成再把下载进度弹框关闭即可
plus.runtime.install(plus.io.convertLocalFileSystemURL(d
.filename), {}, {}, function(error) {
uni.showToast({
title: '安装失败',
duration: 1500
});
})
} else {
uni.showToast({
title: '更新失败',
duration: 1500
});
}
});
dtask.start(); // 下载任务开始下载
// 关于进度的获取是使用定时器不断获取已经下载的文件的大小,再对比总大小即可
let timer = setInterval(() => {
let percent = (dtask.downloadedSize / this.fileSize).toFixed(2) // fileSize文件总大小,后端返回的
_this.percentVal = Math.floor(percent * 100) // 转成整数展示
if (percent >= 1) { // 注意百分比,及时清除定时器即可
clearInterval(timer)
}
}, 18)
} else if (res.cancel) {
console.log('稍后更新');
}
}
});
}
The progress bar uses the u-popup component, as follows:
<u-popup :round="10" :show="show" mode="center">
<view class="progressBox">
<u-loading-icon size="36"></u-loading-icon>
<text class="words">下载中 请勿退出 {
{percentVal}}%</text>
</view>
</u-popup>
注意,下载这一块是要在手机模拟器上,才能看到效果哦。笔者工作中使用的是逍遥模拟器,挺好。
因为
plus
变量在浏览器中是没有的
版本号
效果图
下载完毕以后,安卓自动安装
为了方便大家去验证,笔者也提供了一个apk静态资源包filePath: http://ashuai.work:10000/appSrc/pdd.apk
,在地址栏输入就可以访问了。
静态资源apk接口
express
同级目录下,新建文件夹app
存放一下apk
文件
// 先查询有没有这个app,有的话返回这个静态app资源url地址
route.get('/findAppUrl', (req, res) => {
res.header('Access-Control-Allow-Origin', '*');
let appName = (req.query.appName ? req.query.appName : 'pdd') + '.apk'
let files = fs.readdirSync('./app')
if (files.includes(appName)) { // 库存有
res.send({
code: '00000000',
url: "http://ashuai.work:10000/appSrc/" + appName
})
} else { // 库存没有
res.send({
code: '00000000',
url: ""
})
}
})
// 当访问app资源时,就把对应的资源以流的形式返回去
route.get('/appSrc/:fileName', (req, res) => {
res.header('Access-Control-Allow-Origin', '*');
let fileName = req.params.fileName // wms2month.apk
try {
// 存储一份app的路径
let appUrl = './app/' + fileName
let stat = fs.statSync(appUrl)
res.writeHead(200, {
'Content-Type': 'application/vnd.android.package-archive', // 安卓
'Content-Length': stat.size,
})
//创建可读流
let readStream = fs.createReadStream(appUrl)
// 将读取的结果以管道pipe流的方式返回
readStream.pipe(res);
} catch (error) {
res.send('暂无此app文件哦')
}
})
至于强制更新的话,就做一个判断即可,当前版本不是服务器远端的最新版本的话,就不让往下走,不让登录即可