【uniapp】热更新前后台方法(简单实现)

前端使用uniapp打包的app应用

前端:

在项目app.vue中加入以下代码

methods:{
			update() {
				//console.log(this.risun)
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					console.log('widgetInfo', widgetInfo)
					uni.request({
						url: '',  //检查更新接口地址
						data: {
							version: widgetInfo.version,
							versionCode: widgetInfo.versionCode
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						method: 'POST',
						success: function(result) {
							console.log('result', result) 
							var data = result.data;
							console.log('data', data)
							if (data.versionStatus == '2') {
								//console.log('进入方法',data.updateUrl)
								uni.downloadFile({
									url: data.updateUrl,//热更新包地址
									success: function(downloadResult) {
										console.log('downloadResult',
											downloadResult)
										if (downloadResult.statusCode === 200) {
											console.log('statusCode200');
											uni.showModal({
												title: '有新版本更新',
												content: '是否下载更新',
												success: function(res) {
													
													if (res.confirm) {
														console.log('用户点击确定');
														plus.runtime
															.install(
																downloadResult
																.tempFilePath, {
																	force: true
																},
																function() {
																	uni.showToast({
																		title: "安装成功",
																		icon: 2000,
																		duration: 1000
																	})
																	setTimeout
																		(function() {
																				plus.runtime
																					.restart();
																			},
																			1100
																			)
																},
																function(
																	e
																	) { // }) 
																	console
																		.log(
																			e
																			)
																	uni.showToast({
																		title: "安装失败",
																		icon: 2000,
																		duration: 1000
																	})
																});
													} else if (res
														.cancel) {
														console.log(
															'用户点击取消'
																					);
								return;
													}
												}
											})
			
										}
									},
									fail: function(res) {
										console.log('失败')
									}
								});
							}
						}
					});
				});
			}
		}

后端:

类:

public class AppUpdateEntity 
{
    /// <summary>
    /// 版本
    /// </summary>
    /// <returns></returns>
    public string Version { get; set; }
    /// <summary>
    /// 版本代码
    /// </summary>
    /// <returns></returns>
    public string VersionCode { get; set; }
    /// <summary>
    /// 数据创建时间
    /// </summary>
    /// <returns></returns>
    [JsonConverter(typeof(DateTimeJsonConverter))]
    public DateTime? CreateDate { get; set; }
    /// <summary>
    /// 文件地址
    /// </summary>
    /// <returns></returns>
    public string FilePath { get; set; }
}

方法:(已yisha框架为例)

[HttpPost]
public async Task<object> CheckVersion([FromForm] string version = "", [FromForm] string versionCode = "")
{
    object obj = new { message = "操作失败", versionStatus = "0", updateUrl = "" };
    TData<List<AppUpdateEntity>> tdata = await new AppUpdateBLL().GetList(null);//获取数据库中存储的更新信息集合
    List<AppUpdateEntity> list = new List<AppUpdateEntity>();
    if (tdata.Tag == 1)
    {
        list = tdata.Data;
        if (list != null && list.Count > 0)
        {
            AppUpdateEntity aPPUpdateEntity = list.OrderByDescending(a => a.CreateDate).ToList().FirstOrDefault();//获取集合中最新一条数据
            //如果传入版本号和当前最新一条版本号不匹配,则返回更新信息
            if (!version.Equals(aPPUpdateEntity.Version))
            {
                obj = new { message = "更新版本", versionStatus = "2", updateUrl = aPPUpdateEntity.FilePath };
            }
            else
            {
                obj = new { message = "无需更新", versionStatus = "1", updateUrl = "" };
            }
        }
        else
        {
            obj = new { message = "操作失败", versionStatus = "1", updateUrl = "" };
        }
    }
    else
    {
        obj = new { message = "操作失败", versionStatus = "0", updateUrl = "" };
    }
    return (obj);
}

在Node.js中可以使用Express框架来搭建后台服务器,使用Ajax或者Fetch等方式发送请求,然后在后台使用路由来处理请求并返回数据。 在Uniapp中,可以使用uni.request来发送请求,其中包含请求地址、请求方式、请求参数等信息。在接收到后台返回的数据后,可以使用uni.showModal、uni.showToast等方法来展示数据。 具体实现步骤如下: 1. 在Node.js中安装Express框架,并搭建后台服务器。 2. 在Uniapp中使用uni.request方法发送请求,包括请求地址、请求方式、请求参数等信息。 3. 在Node.js中使用路由来处理请求,并返回数据。 4. 在Uniapp中接收返回数据,并使用相关方法展示数据。 例如,以下是一个简单的示例: 在Node.js中: ```javascript const express = require('express'); const app = express(); // 处理请求 app.get('/data', function (req, res) { const data = { name: '张三', age: 20, gender: '男' }; res.send(data); }); // 监听端口 app.listen(3000, function () { console.log('服务器已启动,端口号为3000'); }); ``` 在Uniapp中: ```javascript uni.request({ url: 'http://localhost:3000/data', method: 'GET', success: function (res) { uni.showToast({ title: res.data.name + ',' + res.data.age + '岁,' + res.data.gender, icon: 'none' }); } }); ``` 以上示例中,Uniapp使用uni.request方法发送GET请求到Node.js服务器的/data路由,Node.js接收到请求后返回一个包含name、age、gender属性的JSON对象。Uniapp接收到返回数据后,使用uni.showToast方法展示数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值