以下是展示图

带尺寸的图片:

首先把以下代码放到想要更新弹出的页面

		//template部分
		<uni-popup ref="popup" background-color="#fff">
			<versionUp @handleCloseVersion="closeVersion"></versionUp>
		</uni-popup>
			
		//script部分
		//检查版本号是否更新
			checkVersion() {
				//模拟接口获取最新版本号，版本号固定为整数,真机运行！
				let platform = uni.getSystemInfoSync().platform.toLocaleLowerCase() //手机平台
				let self = this
				//云打包时读取版本号
				
				// 获取当前app的版本
				const systemInfo = uni.getSystemInfoSync();
				// 应用程序版本号
				// 条件编译，只在APP渲染
				// #ifdef APP
				   self.version_number = systemInfo.appWgtVersion;
				// this.$modal.msg(this.version_number)
				// #endif
				// plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
					
				    //调用接口服务获取线上版本信息
					uni.request({
					  url: '请求url', //接口地址。
					  method:'GET',
					  success: (res) => {
						let dd=res.data.data
						getApp().globalData.config.version=dd.version
						getApp().globalData.config.appUrl=dd.appUrl
						dd.platForm=platform
						dd.isForceUpdate=false
						uni.setStorageSync('version', dd)
						 
						 // const newVersionName = '九官' //线上最新版本名
						const newVersionCode = parseFloat(dd.version.replace(/\./g, "")) //线上最新版本号
						const selfVersionCode = parseFloat(self.version_number.replace(/\./g, ""))//当前App版本号
						const durl = dd.appUrl
						
						 //线上版本号高于当前，进行在线升级
						if (selfVersionCode < newVersionCode) {
							 const popup = self.$refs.popup;
							 if (popup) {
								popup.open('center'); // 打开uni-popup
							 }
						}
					  },
					  // fail(res){
						 //  this.$modal.msg(res.msg)
					  // }
					})
					
				// });
			},
			closeVersion() {
				this.$refs.popup.close()
			}

创建versionUp组件

链接: 组件地址