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

最新推荐文章于 2024-08-05 10:38:15 发布

2401_84447207

最新推荐文章于 2024-08-05 10:38:15 发布

阅读量993

点赞数 10

分类专栏：程序员文章标签： uni-app

本文链接：https://blog.csdn.net/2401_84447207/article/details/138431548

版权

本文介绍了如何在uni-app中内嵌H5页面，并实现uni-app与H5的双向通信。通过示例代码展示了数据的传递、解码、事件监听以及页面导航操作，同时提及了uni-app的JSBridge使用方法。

摘要由CSDN通过智能技术生成

	},
	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`中通过如下方式接收参数：

console.log(getQuery(‘data’)); //获取 uni-app 传来的值
//取url中的参数值
function getQuery(name) {
// 正则：[找寻’&’ + ‘url参数名字’ = ‘值’ + ‘&’]（'&'可以不存在）
let reg = new RegExp(“(^|&)”+ name &