Record -- Android package check update, new version download, download progress bar display function realization in uni-app

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-appthis is one of the more cost-effective (more pitfalls) solutions. This article records the functions that are needed after uni-apptyping .安卓包检查并下载更新显示进度条

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": "操作成功"
}

applyVersionWe 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 apiand 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变量在浏览器中是没有的

版本号

效果图

147.gif

下载完毕以后,安卓自动安装

258.png

为了方便大家去验证,笔者也提供了一个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文件哦')
  }

})

至于强制更新的话,就做一个判断即可,当前版本不是服务器远端的最新版本的话,就不让往下走,不让登录即可

本文转载于:

https://juejin.cn/post/7197401681129914405

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

Guess you like

Origin blog.csdn.net/qq_40716795/article/details/129374298