# li-updateModel

**Repository Path**: FLB0821/li-update-model

## Basic Information

- **Project Name**: li-updateModel
- **Description**: uniApp更新窗口 NVue页面 开箱即用
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-30
- **Last Updated**: 2025-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## App更新窗口 NVue页面 开箱即用

该插件修改自：
[下载更新](https://ext.dcloud.net.cn/plugin?id=2663)
[全局弹窗可覆盖原生导航栏和原生tabbar](https://ext.dcloud.net.cn/plugin?id=1555)
感谢以上两位的优秀插件！！

做出来的样式和原版相差无几，只是原版是vue插件的，APP端不能覆盖导航栏和tabbar，主页显示时不太美观，所以有了改成NVue页面的想法。

### 注意事项：
1：顶部的图片突出效果是已整个图片来的，背景上部分透明，下部分白色，Nvue超出会直接不显示，有更好解决方式的，麻烦告诉我一下，毕竟是图片，P得麻烦。

2：非组件形式的，需要在pages注册

3：弹窗关闭时会触发原页面onShow,因为弹窗本质上是一个nvue页面


### 文件目录组成： 

```javascript
/common/AppUpdateModel.js  //请求接口和判断更新等操作
/pages/appUpdateModel/appUpdateModel.nvue	//更新弹窗页面
/static/upgrade.png	//更新弹窗页面顶部图片
```


### 使用方式： 

在 ``script`` 中引用组件 

```javascript
import AppUpdateModel from "@/common/AppUpdateModel.js";
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			//预加载更新页面，此方式加载可以让更新页面一直后台，安卓后台下载适用
			uni.preloadPage({
				url: "/pages/appUpdateModel/appUpdateModel"
			});
		},
		onShow() {
			//延迟，防止和其他弹窗冲突，引发页面错误
			setTimeout(() => {
				this.updateApp();
			}, 500);
		},
		methods: {
			getUpdateInfoOnly(){//仅获取更新信息，适用于进入关于我们页面时，获取更新信息显示，但不弹窗
				AppUpdateModel.checkUpdate({
					forceCheck: true,
					checkOnly:true,
					success: function(res) {
						console.log(res);
					}
				});
			},
			forceUp(){ //强制更新，跳过检查间隔，适用于用户主动检查版本更新
				AppUpdateModel.checkUpdate({
					forceCheck: true
				});
			},
			updateApp() { //检查app更新
				if (this.UpdateFail) {
					return;
				}
				console.log("updateApp")
				// #ifdef APP-PLUS
				this.$nextTick(() => {
					AppUpdateModel.checkUpdate({
						fail: () => {
							console.log(11)
							//更新失败时，防止重刷
							this.UpdateFail = true;
							setTimeout(() => {
								this.UpdateFail = false;
							}, 5000);
						}
					});
				})
				//#endif
			},
		}
	}
```

### pages注册 
``` javascript
{ //App更新弹窗
			"path": "pages/appUpdateModel/appUpdateModel",
			"style": {
				"navigationStyle": "custom",
				"app-plus": {
					"animationType": "fade-in",
					"background": "transparent",
					"backgroundColor": "rgba(0,0,0,0)",
					"popGesture": "none"
				}
			}
		}
```


### checkUpdate方法 属性说明： 

|属性名		|类型|默认值	|说明|
|---|----|---|---|
|forceCheck	|Boolean	|false|强制更新，跳过检查间隔，适用于用户主动检查版本更新|
|checkOnly	|Boolean	|false|仅获取更新信息，适用于进入关于我们页面时，获取更新信息显示，但不弹窗	|
|success	|function	|-|获取更新信息回调|
|fail	|function	|-|安装失败回调|

 					
### 接口参数 说明：

|属性名		|类型|默认值	|说明|
|---|----|---|---|
|isForceUpgrade	|Boolean	|false|是否强制更新，强制更新时，不会显示取消下载按键|
|info	|String	|-|更新内容，我内部按字符串然后根据;号切割成数组，再排列显示，自己可以改页面|
|version	|String	|-|显示的更新版本号	|
|url	|String	|-|更新路径|

如：
``` javascript
{
	isForceUpgrade:true  ,//是否强制更新，强制更新时，不会显示取消下载按键
	info:"1、修复了大量bug11;2、增加新功能，xx体验提升，速度快2;3、增加新功能，xx体验提升3，速度快;4、1增加新功能，xx体验提升，速度快;"  ,//升级内容
	version: '1.0.1',
	url: 'http://www.baidu.com',
}
```