Uniapp热更新，资源包升级

我是给自己看的

完整项目地址

源码下载地址，我主页里面有

对应的全套视频链接

全套视频，开放给大家，请下载源码后，私信我，获取提取码

1. Uniapp问答社区，先看文档

DCloud问答社区

主要是用到这个，前端模块

2. 下面根据图片找不同吧，最好新建util.js放下面代码

	// 处理 热更新(直接复制的)
	update(showToast = false) {
		// #ifdef APP-PLUS  
		plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
			// uni.request({
			// 	url: 'https://ceshi.dishait.cn/api/v1/update',
			// 	data: {
			// 		version: widgetInfo.version,
			// 		name: widgetInfo.name
			// 	},
			$http.post('/update',{
				ver:widgetInfo.version, // 当前app版本号
			}).then((res)=>{
				// let [err,result] = await $http.post('/update',{
				// 	ver:widgetInfo.version, // 当前app版本号
				// }) 等于上面这种回调写法 
				let [err,result] = res;
				// 错误处理
				if(!$http.errorCheck(err,result)) return
				// 成功
				var data = result.data.data;
				/*
				   {  接收到到格式
						"msg": "ok",
						"data": {
							"id": 1,
							"url": "http://www.baidu.com",
							"version": "1.0.1",
							"status": 1,
							"create_time": null
						}
					}
				如果没有，url直接终止*/ 
				if(!data.url){
					// 无需更新
					if(showToast){ 
					return uni.showToast({
							title:'已经是最新版本了，无需更新',
							icon:'none'
						})
					}
				}
				// 需要更新
				uni.showModal({
					title:'发现新的版本', // 标题
					content:'最新版本'+data.version, // 内容
					cancelText:'暂不更新', // 取消
					confirmText:'立即更新', //确认
					success:(res)=>{ // 用户点击了确认
						if(res.confirm){
					    // 下载文件，uniapp官方的
						uni.downloadFile({
							url: data.url, //上面声明的成功返回的数据
							success: (downloadResult) => {
								if (downloadResult.statusCode === 200) {
									// 成功回调函数
									plus.runtime.install(downloadResult.tempFilePath, {
										force: false
									}, function() {
										console.log('install success...');
										plus.runtime.restart();
									}, function(e) {
										console.error('install fail...');
									});
								}
							}
						});	
					  }
					}
				})
			});
		});
		// #endif
	},

3. 错误处理函数

 // 这个是自己封装的 http请求，错误处理函数
if(!$http.errorCheck(err,result)) return 

request.js封装错误请求参数

// 错误处理
	errorCheck(err,res,errfun = false,resfun = false){
		if (err) {
			typeof errfun === 'function' && errfun();
			uni.showToast({ title: '加载失败',icon:"none" });
			return false;
		}
		if (res.data.errorCode) {
			typeof errfun === 'function' && resfun();
			uni.showToast({ title: res.data.msg,icon:"none" });
			return false;
		}
		return true;
	},c 

在man.js中直接挂在到原型上，全局就可以调用了

// 引入 封装api的 请求库
import $H from './common/request.js'
Vue.prototype.$H = $H

在APP.vue中，调用即可，用户一进入app就要检测版本更新

onLaunch: function() {
			console.log('App Launch');
			  // #ifdef APP-PLUS
			  // 检测更新
			   this.$U.update()
			  // #endif
			
			  // 网络监听	(调用main.js挂载的 $U函数)
			  this.$U.onNetWork()
		},

在版本检测页面如下 about.vue

<!-- 关于社区页面 -->
<template>
	<view>
		<view class="flex align-center justify-center flex-column pt-4 pb-3">
			<image
				src="/static/demo/datapic/6.jpg"
				mode="left"
				style="width: 300rpx;height: 300rpx;"
				class="rounded-circle"
			></image>
			<!-- #ifdef APP-PLUS -->
			<text class="font text-muted mt-2"> version {
   
   {version}}</text>
			<!-- #endif -->
		</view>
		<!-- #ifdef APP-PLUS -->
		<uni-list-item title="新版本检测" clickable showArrow @click="update"></uni-list-item>
		<!-- #endif -->
		<uni-list-item title="社区用户协议" clickable showArrow></uni-list-item>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 动态改变版本号
				version: '',
			};
		},
		onLoad() {
			/* 检测版本更新
			调用util.js里面的 plus.runtime函数*/
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
				this.version = widgetInfo.version;
			});
			// #endif
		},
		methods: {
		// 调用版本检测，util.js封装的 update检测版本方法
			update() {
		      // util.js方法中写了 showToas = true ，因为只有app需要检测版本更新
				this.$U.update(true);
			},
		},
	};
</script>

<style lang="scss"></style>

4. 在uniapp配置工具中，配置版本号，发行，打包到手机上，自己测试就行了

5. 监听网络

// 监听网络状态
onNetWork() {
		let func = (res) => {
			console.log(res.networkType);
			// 如果处于 断网状态
			if (res.networkType === 'none' || res.isConnected === false) {
				uni.showToast({
					title: '当前处于断网状态，请先连接网络',
					icon: 'none',
					duration: 2000,
				});
			} else if (res.networkType !== 'none') {
				uni.showToast({
					title: '网络连接成功',
					icon: 'none',
					duration: 2000,
				});
			}
		}
		// 获取网络类型
		uni.getNetworkType({
			success: func
		});
		// 监听网络状态变化（只有网络发生改变时才触发）
		uni.onNetworkStatusChange(func);
	},

清除缓存，功能

<uni-list-item
			title="清除缓存"
			clickable
			showArrow
			@click="clear"
			:rightText="currentSize | format"

></uni-list-item>

需要过滤器，获取系统的缓存，直接上代码

export default {
		data() {
			return {
				// 缓存大小
				currentSize: 0,
			};
		},
		// 监听页面加载时
		onLoad() {
			// 调用 同步获取 系统缓存
			this.getStorageInfo();
		},
		// 过滤器
		filters: {
			// 将缓存 kb 转换为mb保留 两位小数
			format(value) {
				/* 如果 缓存大小>1024kb，就让它 除以1024kb.并保留两位小数，
				否则直接让value保留两位小数 */
				return value > 1024 ? (value / 1024).toFixed(2) + 'MB' : value.toFixed(2) + 'KB';
			},
		},
		methods: {
			// 同步获取系统 信息缓存
			getStorageInfo() {
				// 同步获取当前Storage的 详细信息
				let res = uni.getStorageInfoSync();
				this.currentSize = res.currentSize;
			},
			// 清除缓存
			clear() {
				if (this.currentSize == 0) {
					uni.showToast({
						title: '暂无缓存可清理',
						icon: 'none',
					});
					return;
				}
				uni.showModal({
					title: '提示',
					content: '是否要清除所有缓存？',
					cancelColor: '不清除',
					confirmColor: '清除',
					success: (res) => {
						if (res.confirm) {
							// 同步清理本地 数据缓存
							uni.clearStorageSync();
							// 清除完后，还需要再次调用，获取本地数据缓存
							this.getStorageInfo();
							uni.showToast({
								title: '清除成功',
								icon: 'none',
							});
						}
					},
				});
			},
		},
	};

穷的饭吃不起了，别光看，来点人民币