uniapp web-view组件之应用向网页实时发送消息

uniapp的web-view组件,官网提供了网页向应用实时 postMessage的方法,但没有说应用如何向网页实时发送消息。然而实际上,某些时候,这个也是有必要的。

解决办法:在Webview窗口中执行JS脚本

1、hybird中的html网页,由于引用了 Vue,这个接收来自应用消息并处理的方法写在了Vue的方法中。

// 在Webview窗口中执行JS脚本
postJS(msg) {
	console.log(msg);
	msg = JSON.parse(msg);
    //do something
},

2、应用内web-view页面,监听来自其他页面的信息。下面的代码监听的是上一页uni.navigateBack时传递的数据,然后通过调用html页面中Vue中的postJS方法,将应用内的消息实时的传递给网页。

/*
 * 监听上一页发送的更新指令
 * @param {String} msg - 上一页传递的数据
 * @return void
*/
upData: function(msg) {
	// #ifdef APP-PLUS
	var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
	var wv = currentWebview.children()[0]
	wv.evalJS(`vueINS.postJS('${msg}')`);
	// #endif
}

通过这种方式,html页面中就能实时接收到来自应用内的消息了。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值