uniapp开发手机app--app应用内部下载更新，代码直接复制可用奥

由于某些原因应用没有放到应用市场，而是放到了自己的服务器上，下面分享一下方法。

最近也开发了自己的公众号，会在上面分享前端方面的知识，有兴趣的话，走个关注吧！！！

1.使用了自己的版本管理方法

当然大家也可以在uniapp自己的配置文件去设置版本号，但是使用自己的配置文件可以有更大的配置自由。

在根目录新建config.js文件

// 应用全局配置
module.exports = {
	appInfo: {
		// 应用名称
		name: "app移动端",
		// 应用版本
		version: "3-1-2",
		// 应用logo
		logo: "/static/logo.png",
		// 官方网站
		site_url: "http://ruoyi.vip",
		// 政策协议
		agreements: [{
				title: "隐私政策",
				url: "https://ruoyi.vip/protocol.html"
			},
			{
				title: "用户服务协议",
				url: "https://ruoyi.vip/protocol.html"
			}
		]
	}
}

2.封装更新组件

新建文件updat.vue.大家直接粘贴可用

<template>
	<view>
		<u-overlay :show="show">
			<view class="updatetips-whole">
				<view class="updatetips">
					<view>
						<view class="updatetips-head">
							<!-- <image src="../static/images/updatetips.png"></image> -->
							<view class="updatetips-version">发现新版本 V{{ versionNum }}</view>
						</view>
						<view class="updatetips-content">{{ versionContent }}</view>
						<!-- 进度条 -->
						<u-line-progress v-if="isProgress" :percentage="progress" activeColor="#55D88A" :showText="false" height="4"></u-line-progress>
					</view>
					<view class="updatetips-btn-disable" v-if="isProgress">立即更新</view>
					<view v-else style="display: flex;justify-content: space-around;">
						<view class="updatetips-btn" @click="downloadBtn()">立即更新</view>
						<view class="updatetips-btn" @click="downBtn()">暂不更新</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
export default {
//分别对应是否显示组件 ， 软件最新版本号    软件更新表述     下载软件的链接
	props: ['show', 'versionNum', 'versionContent', 'downloadUrl'],
	data() {
		return {
			progress: 0,
			isProgress: false
		};
	},
	methods: {
        //不更新
		downBtn() {
			// this.show = false;
			this.$emit('showF', false);
			uni.$u.toast('我的-应用设置内也可更新');
		},
            //更新
		downloadBtn() {
			this.isProgress = true;
			const downloadTask = uni.downloadFile({
				url: this.downloadUrl,
				success: res => {
					//安装
					plus.runtime.install(
						res.tempFilePath,
						{
							force: true
						},
						function(_res) {
							plus.runtime.restart();
						}
					);
				},
				fail: err => {
					uni.$u.toast('下载失败');
				}
			});
			// 查看下载进度
			downloadTask.onProgressUpdate(res => {
				console.log(res.progress);
				this.progress = res.progress;
			});
		}
	}
};
</script>
<style scoped>
.updatetips-whole {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.updatetips {
	position: relative;
	width: 80%;
	min-height: 100rpx;
	background-color: #fff;
	border-radius: 20rpx;
}
.updatetips-head {
	position: relative;
	width: 100%;
	height: 200rpx;
}
.updatetips-head > image {
	position: absolute;
	top: -72rpx;
	width: 100%;
	height: 280rpx;
}
.updatetips-version {
	position: absolute;
	top: 30rpx;
	left: 50rpx;
	/* color: #fff; */
	font-size: 40rpx;
}
.updatetips-content {
	width: 80%;
	min-height: 100rpx;
	margin: 40rpx auto;
}
.updatetips-btn-disable {
	height: 120rpx;
	line-height: 120rpx;
	text-align: center;
	color: #e6e6e6;
}
.updatetips-btn {
	height: 120rpx;
	line-height: 120rpx;
	text-align: center;
	color: #55d88a;
}
.updatetips-btn::before {
	content: '';
	width: 85%;
	height: 1px;
	background-color: #e6e6e6;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>

3.使用vuex管理，后端返回数据，完成进入app弹出更新框逻辑

vuex文件内容如下：

import { getNewApp, listByIds } from '@/api/indexpage/user.js';
const updateApp = {
	state: {
		MiaoShu: null,
		newVesion: null,
		isTrue: false,
		id: null,
		url: null
	},

	mutations: {
		setState: (state, data) => {
			state.MiaoShu = data.content
			state.newVesion = data.version,
				state.id = data.url
		},
		setisTrue: (state) => {
			state.isTrue = true
		},
		setisFalse: (state) => {
			state.isTrue = false
			// console.log(1111);
		},
		setUrl: (state, url) => {
			state.url = url
		},
	},
	actions: {
		//获取版本号，和新版本的下载链接
		getNewsApplist({ commit }) {
            //获取软件更新信息
			getNewApp().then(res => {
				commit("setState", res.data)
				//获取本地app版本号与更新版本号对比
				let oldVeions = getApp().globalData.config.appInfo.version
                //对比版本号
				if (res.data.version !== oldVeions) {
                    //获去下载链接
					listByIds(res.data.url).then(res => {
						console.log(res);
						res.data.map(item => {
							commit("setUrl", item.url)
						})
					})
                    //把组件显示状态，修改为true
					commit("setisTrue")
				}
			});
		},
	},
}

export default updateApp

4.在登录请求成功后调用

// 登录成功后，处理函数
		loginSuccess(result) {
			// 设置用户信息
			this.$store.dispatch('GetInfo').then(res => {
				//获取app是否更新的
				this.$store.dispatch('getNewsApplist');
				//跳转到主页
				this.$tab.reLaunch('/pages/index');
			});
		}

5.在首页中调用组件

<template>
	<view class="zhuye">
		<!-- app更新模块 -->
		<update
			@showF="ShowON"
			:show="$store.state.updateApp.isTrue"
			:versionNum="$store.state.updateApp.newVesion"
			:downloadUrl="$store.state.updateApp.url"
			:versionContent="$store.state.updateApp.MiaoShu"
		></update>
		<!-- app更新模块 -->
		<Tabbar :value="'首页'"></Tabbar>
	</view>
</template>
<script>
import Tabbar from '@/components/tabbar/tabbar.vue';
import update from '@/components/update/update.vue';
export default {
	name: 'index',
	components: { Tabbar, update },
	data() {
		return {
			isTF: this.$store.state.updateApp.isTrue,
		};
	},
	methods: {
		ShowON(e) {
			//通知vuex改变变量
			this.$store.commit('setisFalse');
		},
    }
};
</script>

这样就完成了进入首页立即弹出更新内容的部分啦

4.完成点击检查更新弹出更新框逻辑

<template>
	<view class="setting-container" :style="{ height: `${windowHeight}px` }">
		<view class="menu-list">	
			<view class="list-cell list-cell-arrow" @click="getNewsApplist">
				<view class="menu-item-box">
					<view class="iconfont icon-refresh menu-icon"></view>
					<view>检查更新</view>
				</view>
			</view>
		</view>
		<!-- app更新模块 -->
		<update @showF="ShowON" :show="show" :versionNum="newVesion" :downloadUrl="urL" :versionContent="MiaoShu"></update>
		<!-- app更新模块 -->
	</view>
</template>

<script>
import { getNewApp, listByIds } from '@/api/indexpage/user.js';
export default {
	data() {
		return {
			urL: null,
			MiaoShu: null,
			show: false,
			newVesion: null
		};
	},
	methods: {
		ShowON(e) {
			this.show = e;
		},
		
		//更新app
		//获取版本号，和新版本的下载链接
		getNewsApplist() {
			getNewApp().then(res => {
				console.log(res);
				this.MiaoShu = res.data.content;
				this.newVesion = res.data.version;
				//获取本地app版本号与更新版本号对比
				let oldVeions = getApp().globalData.config.appInfo.version;
				// console.log(oldVeions);
				if (res.data.version !== oldVeions) {
					listByIds(res.data.url).then(res => {
						console.log(res);
						res.data.map(item => {
							this.urL = item.url;
						});
					});
					this.show = true;
				}
			});
		},
	}
};
</script>