首页/文章/vue

uni-app和Node.js实现app更新功能

2024-08-19

1105 字约 4 分钟

...

学习

业务背景

uniapp 打包 ios，android 之后，有时候紧急修复或修改 ui，还需要走应用市场审核，往往审核时间就需要几天，如果是有bug需要升级就会很着急，有热更之后，可以避免应用市场长时间审核，用户很快就能收到更新。

整体思路：

要在uni-app中实现app更新功能，并使用Node.js作为后端服务，可以按照以下思路和步骤进行：

1、后端服务

使用Express创建一个简单的Web服务器。
提供两个API接口:
- /checkForUpdate/:version 用于检查是否有新版本。
- /downloadApp/:version 用于下载app。

2、uni-app前端

在页面加载时调用checkForUpdate方法检查是否有新版本。
如果有新版本，弹出提示框询问用户是否要更新。
如果用户选择更新，则下载新版本文件并下载安装过程。

步骤一创建Node.js后端服务

1、安装必要依赖：

安装 express 或其他 Node.js web 框架来做后端服务。
安装 cors 用于处理跨域请求。

npm install express cors

2、创建一个简单的后端服务：

在项目根目录下创建一个名为 public 的文件夹，并在其中创建一个名为 apps 的文件夹用于存放要更新的 App 。
将app打包好的app命名为：appx.x.x.wgtapp更新文件放到 apps 文件夹中。
在项目根目录下创建一个名为 server.js 的文件，并写入以下代码：



const express = require('express'); 
const cors = require('cors'); 
const fs = require('node:fs'); 
const path = require('node:path');

const app = express(); 

app.use(cors()); 


app.use('/public', express.static(path.join(__dirname, 'public')));


const appDir = path.join(__dirname, 'public/apps');


let serverAddress = ''


 * 根据客户端提供的版本号检查是否有新版本。
 */
app.get('/checkForUpdate/:version', async (req, res) => {

  
  const appCurrentVersion = req.params.version
  
  let appLatestVersion = ''

  try {
    
    const files = fs.readdirSync(appDir);

    
    const appFiles = files.filter(file => path.basename(file).startsWith('app'));

    
    const sortedFiles = appFiles.sort((a, b) => {
      const aParts = a.split('.').map(Number);
      const bParts = b.split('.').map(Number);

      for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
        if (aParts[i] > bParts[i]) return 1;
        if (aParts[i] < bParts[i]) return -1;
      }

      return 0;
    });

    
    appLatestVersion = sortedFiles.pop()

    
    appLatestVersion = appLatestVersion.replace(/^app/, '').replace(/\.wgt$/, '')

  } catch (error) {
    throw new Error('Error reading public directory:' + error)
  }

  
  if (appLatestVersion > appCurrentVersion) {
    res.send({
      version: appLatestVersion, 
      url: `${serverAddress}/downloadApp/${appLatestVersion}`, 
      update: true, 
      mandatoryUpdate:true 
    })
  } else {
    res.send({
      version: '',
      url: '',
      update: false,
      mandatoryUpdate:false
    })
  }
})


 * 提供文件下载
 */
app.get('/downloadApp/:version', async (req, res) => {
  
  const version = req.params.version
  const appName = `app${version}.wgt`
  
  const appFilePath = `${appDir}/${appName}`

  
  fs.stat(appFilePath, (err, stats) => {
    if (err) {
      throw new Error(`未找到 app${version}版本下载地址`)
    }

    
    
    res.setHeader('Content-Disposition', `attachment; filename=${appName}`);
    
    res.setHeader('Content-Type', 'application/octet-stream');

    
    const fileStream = fs.createReadStream(appFilePath);

    
    fileStream.on('end', () => {
      console.log('File download completed.');
    });

    
    fileStream.on('error', (error) => {
      throw new Error('Error downloading the file.:' + error)
    });

    
    fileStream.pipe(res);
  });
})

const port = 3000; 

const server = app.listen(port, () => {
  
  const addressInfo = server.address();
  const host = addressInfo.address === '::' ? 'localhost' : addressInfo.address;
  const port = addressInfo.port;
  serverAddress = `http://${host}:${port}`
  console.log(`Server is running at http://${host}:${port}`);
});

3. 启动后端服务

打开终端，进入到项目根目录，执行以下命令:

node server.js

步骤二创建uni-app前端应用

1、创建uni-app项目

打开HBuilderX 选择菜单栏上的 [文件] -> [新建] -> [项目] 创建一个新的uni-app项目。

2、实现检查更新逻辑

打开项目根目录下的pages/index/index.vue文件，新增checkForUpdate方法，并在onLoad生命周期中调用该方法。

<template>
	<text class="title" style="text-align: center;">
		当前app资源版本为：{{appWgtVersion}}
	</text>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const appWgtVersion = ref('')


onLoad(() => {
	checkForUpdate()
})


 * 检查是否需要更新app
 */
function checkForUpdate() {
	
	
	
	const systemInfo = uni.getSystemInfoSync()
	
	appWgtVersion.value = systemInfo.appWgtVersion
	
	uni.request({
		url: 'http://192.168.43.245:3000/checkForUpdate/' + appWgtVersion.value,
		success: (res) => {
			console.log('request-res', res);
			if (res.data && res.data.update) {
				uni.showModal({
					title: '新版本发布',
					content: '检查到当前有新版本,需要更新吗？',
					showCancel: true,
					confirmText: '立即更新',
					cancelText: '暂不更新',
					
					success: (modalRes) => {
						if (modalRes.confirm) {
							
							uni.showLoading({
								title: '正在下载'
							})
							console.log('res.data.url',res.data.url);
							
							const downloadTask = uni.downloadFile({
								url: res.data.url,
								success: (downloadRes) => {
									if (downloadRes.statusCode === 200) {
										uni.showLoading({
											title: '正在安装更新...'
										});
										plus.runtime.install(downloadRes.tempFilePath, {
											force: true
										}, () => {
											console.log('install success...');
											uni.hideLoading()
											plus.runtime.restart();
										}, (e) => {
											console.log('install fail...', e);
											uni.hideLoading()
											uni.showToast({
												title: '安装失败:' + JSON.stringify(e),
												icon: 'fail',
												duration: 1500
											});
										});
										setTimeout(() => {
											uni.hideLoading();
											uni.showToast({
												title: '安装成功！',
												icon: 'none'
											});
										}, 3000);
									}
								},
								
								fail: (fail) => {
									console.log('网络错误，下载失败！', fail);
									uni.hideLoading();
								},
								
								complete: () => {
									console.log('----------------Complete----------------:', downloadTask)
									downloadTask.offProgressUpdate(); 
								}
							});
							
							downloadTask.onProgressUpdate(res => {
								
								
								
							});
						} else {
							
							
							if(res.data.mandatoryUpdate){
								if (systemInfo.platform === 'android') {
									
									plus.runtime.quit();
								} else {
									
									plus.ios.import("UIApplication").sharedApplication().performSelector("exit");
								}
							}
						}
					}
				});
			}
		},
		fail: (fail) => {
			console.log('检查更新请求失败！', fail);
		}
	});
	
}
</script>