【项目实践-04】实验室移动端:对象添加新属性+webview IOS端appendJsFile()方法不生效

一、vue2对象添加新属性

在做实验室移动端时有这样一个需求,即获取下级页面的数据 (toChooseDevice()),为当前页面中的form表单数据添加新的属性和值,然后表单完成后进行提交(submitForm())操作

javascript 复制代码
toChooseDevice(str) {
				uni.navigateTo({
					url: `/pages/lab/lab-choose-device?labId=${this.form.labId}&deviceIds=${this.form[str]}`,
					// url: `/pages/lab/lab-choose-device?deviceIds=${this.form[str]}`,
					events: {
						// 获取下级页面传递回来的参数
						getSelectDevice: data => {
							let selectedDeviceIds = []
							let selectedDeviceNames = []
							JSON.parse(data).forEach(i => {
								selectedDeviceIds.push(JSON.parse(i).deviceId)
								selectedDeviceNames.push(JSON.parse(i).deviceName)
							})
                          // this.form[str] = selectedDeviceIds.toString()
                            this.form.test = '123456'
							this.$set(this.form, str, selectedDeviceIds.toString())
							this[str + 'Name'] = selectedDeviceNames.toString()
						}
					}
				})
			}


submitForm(form) {
				console.log(this.form);
				const data = {
					formData: this.form,
					key: 'share_appointment',
					startUserInfo: {
						name: this.user.nickname,
						id: this.user.id,
					}
				}
				getLabAppointmentApi(data).then(res => {
					this.$refs.uToast.show({
						message: '预约成功',
						duration: 1000,
						complete() {
							uni.$u.route({
								url: '/pages/lab/lab-reserve'
							})
						}
					})
				})
			},

遇到问题:在获取下级页面数据为form赋值时,如果使用

this.form[str] = selectedDeviceIds.toString(),在提交表单时打印form时发现新的属性和数据并没有添加成功。但使用 this.form.test = '123456',test属性添加成功了。

原因 :vue2的响应式并不是很完美,使用 变量str 作为from属性并为其赋值时,并不会触发vue2的Object.defineproperty()方法,所以不会赋值成功,只有用 this.form.属性 才可触发此方法并赋值成功。

解决 :为了解决这个问题,我们可以使用 **this.$set(obj, 'newProp', 'newValue')**方法,强制触发响应式更新

就像上述代码中的 this.$set(this.form, str, selectedDeviceIds.toString())

二、uniapp app端 html5+ webview ios端appendJsFile不生效

**遇到问题:**在项目中需要使用 webview 来获取网页上的信息并实现当前页面与网页的通讯以及交互 ,但如下代码在IOS端并未建立起当前页面和网页的通讯,在安卓端却能正常通讯及交互。

javascript 复制代码
                var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
				wv = currentWebview.children()[0]
                wv.addEventListener("loaded", () => {
					console.log('加载完成');
					this.getImg() // 加载完成后获取一次验证码图片,但可能获取为空
				}, false);
				wv.setJsFile("static/uni.webview.1.5.5.js")
				wv.appendJsFile("static/post.js")

原因: 参考了此文章 uniapp app html5+ webview ios端appendJsFile不生效_h5+app webview appendjsfile在华为可以小米不行-CSDN博客

  1. 文件地址要写正确,webview所加的 js 文件应写在 static 目录下

  2. 在 IOS 端 appendJsFile() 操作应放在监听 loaded 事件之后;

  3. wv.appendJsFile("_www/static/post.js"),地址默认要带上 '_www'

成功解决:

javascript 复制代码
                var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
				wv = currentWebview.children()[0]
				wv.addEventListener("loaded", () => {
					wv.setJsFile("_www/static/uni.webview.1.5.5.js")
					wv.appendJsFile("_www/static/post.js")
					console.log('加载完成');
					this.getImg() // 加载完成后获取一次验证码图片,但可能获取为空
				}, false);
相关推荐
2501_915918411 天前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_915909061 天前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师1 天前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj1 天前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q5110082852 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code2 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张2 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921432 天前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082852 天前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app