跨平台应用开发进阶(十七) ：uni-app 内嵌 H5 应用并实现双端通信_uniappjsbridgeready(1)

最新推荐文章于 2025-05-09 11:19:51 发布

原创

最新推荐文章于 2025-05-09 11:19:51 发布

· 1.6k 阅读

22 ·

版权

文章标签：

#uni-app

	data() {
		return {
			webviewSrc: '',
			webviewStyles:{
				progress: {
					color: '#CCA152'
				}
			}
		}
	},
	onReady() {

	},
	onLoad() {
		this.webviewSrc = BASEURL + 'H5/vedioLive/hybrid/html/vedioLive.html' + '?timestamp=' + new Date().getTime();
	},
	methods: {
		message(arg) {
			console.log('-------------------message-------------------：', JSON.stringify(arg))
			this.sendMsgToWebview();
		},
		// uni-app向内嵌网页发消息
		sendMsgToWebview() {
			const
			  _funName = 'msgFromUniapp',
			  _data = {
				mode: 1,
				...
			  };
			 //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			const currentWebview = this.$scope.$getAppWebview().children()[0];
			console.log('------------------currentWebview------------------:', currentWebview)
			currentWebview.evalJS(`${\_funName}(${JSON.stringify(\_data)})`);
			console.log('------------------currentWebview2------------------:', currentWebview)
		}
	}
}


**nvue页面调用：**


html 内容如下：

双向通信Demo


或者`uni-app`中如下方式传递参数：

onLoad(){
const data = {
“name”:“张三”,
“age”:18
}
plus.storage.setItem(‘data’,“”+JSON.stringify(data));
},


`h5`通过如下方式获取参数：


或者在`uni-app`中通过如下方式传递参数：

data() {
return {
url:‘/hybrid/html/local.html?data=’
};
},
onLoad(data) {
　　//这里对要传入到webview中的参数进行encodeURIComponent编码否则中文乱码
this.url+=encodeURIComponent(data.data)
},


`h5`

最低0.47元/天解锁文章