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

一、vue2对象添加新属性

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

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端并未建立起当前页面和网页的通讯，在安卓端却能正常通讯及交互。

                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' 

成功解决： 

                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);