【项目实践-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_9159184121 分钟前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张40 分钟前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
耶啵奶膘15 小时前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹15 小时前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
吴传逞16 小时前
记一次uniapp+nutui-uniapp搭建项目
uni-app
雪芽蓝域zzs19 小时前
uni-app倒计时公共组件 封装,倒计时组件
uni-app
2501_9159184121 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
清风细雨_林木木1 天前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮1 天前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple