uniapp提供了uni.postMessage()
来实现网页=>APP的通信,实现在网页中点击来实现app的交互

如何使用uni.postMessage()
? 其实在文档中已经写明,只需将gitcode.net/dcloud/uni-... 中的代码引入到我们的网页端代码中,就可以正常使用,但是需要注意的是,由于浏览器的安全策略影响,我们可能需要将这个文件中的代码拷贝到我们的本地或者自己的服务 ,否则在访问window.uni的时候可能会出现undefined;挂在完成后,我们访问 window.uni

我们可以通过监听 UniAppJSBridgeReady
事件来监听通讯初始化完成事件
之后我们便可以通过来向APP端发送消息
js
w.uni.postMessage({
data: {
type: 'start',
data: {}
},
})
消息发送之后,在app代码中,在对应的web-view
标签的内使用@message
事件来接受消息(注意平台兼容性差异)
vue
<web-view ref="webview" src="/hybrid/html/index.html" @message="getMessage"></web-view>
此处扩展: App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 uni-app 项目根目录->hybrid->html
文件夹下或者 static
目录下
getMessage.js
const getMessage = (e) => {
console.log(e.detail.data) // 读取的时候注意格式,一般为数组,读取e.detail.data[0]就是发送的数据
}
至此,网页向APP的通信完成,以下是APP向网页端通信;
在uniapp的webview中,我们是可以通过eval
来对目标网页注入js代码以执行的,首先我们需要获取到我们的目标window对象
js
const pages = getCurrentPages()
const page = pages[pages.length - 1] // 取当前页面
const currentWebView = page.$getAppWebview()
const targetWindow = currentWebView.children()[0] // 取当前页面的webview
-
1.
getCurrentPages()
函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面 -
page.$getAppWebview()
: 获取当前页面的webview对象实例
当我们拿到
targetWindows
之后,就可以只用evaJS来在网页中注入执行一段代码,方式很多,只取一两个示例 -
示例1:
js// 网页中定义一个函数(例:getParentMessage)挂在在window上,然后直接执行window.getParentMessage window.getParentMessage = function (data) { console.log(data) } // app中直接执行 targetWindow.evalJS('getParentMessage("你好")') // 网页中打印: 你好
-
示例2:
js
// app执行
const jsStr = `window.postMessage({ type: 'parentMessage', l: 11 }, '*')`
//网页中监听
window.addEventListener('message', (e) => {
console.log('收到消息:', e.data)
})