【项目实践-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);
相关推荐
xx24065 小时前
UniApp学习笔记
uni-app
七七小报9 小时前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app
lh_12549 小时前
uniapp 常用开发技巧与实战指南
uni-app
某公司摸鱼前端10 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_10 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
晨集10 小时前
Uni-App 多端电子合同开源项目介绍
java·spring boot·uni-app·电子合同
盛夏绽放14 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++
xixixin_14 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
一夜枫林20 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^21 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app