uniapp中APPwebview与网页的双向通信

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() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
1. 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)
    })