uniapp中webview和uniapp原生的交互postMessage

在uniapp中要打包小程序和App的代码，但是因为uniapp中不支持dom，所以有的界面因为使用了第三方的库使用了dom的操作故没法直接写成uniapp的界面，可以将这部分使用了dom库的界面用uniapp中的webview进行调用h5的形式来使用，这样就能展示界面了。
所以基于以上原因，需要在uniapp中的webview跟uniapp进行互动，需要在webview中发送一个消息给uniapp原生，然后原生触发消息之后进行其他操作，下面先看看在uniapp中使用webview的代码：

<template>
  <view>
    <web-view :src="webSrc" @onPostMessage="handlePostMessage" @message="handlePostMessage" />
  </view>
</template>

可以看到上面再webview中使用了@message=handlePostMessage来操作webview中的代码的回调，然后我们需要在要在webview中使用的界面中先引入一个uniapp的webview.js文件，要将这个js文件挂在到全局中去，将现有的vue项目文件中的index.html文件中注入uni.webview.js文件
将uni.webView.js中的uni修改为webUni


上面两个图是将uni修改为webUni的地方，这样修改之后，才能再下面引用js文件之后使用webUni了

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="/src/libs/uni.webview.1.5.2.js"></script>
   
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app">
      <!--app-html-->
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

有了上面对uni.webview.js的修改和vue框架中的引用，那么现在可以在需要使用的h5页面使用webUni给webview发送消息了：

  webUni.postMessage({
    data: {
      navigateTo: {
        url: "/pages/envelope/envelope-create/envelope-create",
        params: {
          envelopeWsid: envelopeWsid
        }
      }
    }
  })

上面这个函数就是给webview发送消息，在接收后的webview中通过下面的方式拿到上面的data进行操作，这里注意的是e.detail.data是一个数组了。这里注意你要使用的参数要放在data下面，然后再webview中是e.detail.data里，再webview里面的e.detail.data是一个数组，将h5里面data下面的参数封装成了数组e.detail.data=[navigateTo, ...其他参数]

const handlePostMessage = e => {
  let data = e.detail.data[0] // 这里data是个数组对象
  if (data && data.navigateTo) {
    // 导航跳转
    let url = data.navigateTo.url
    let params = data.navigateTo.params
    let paramsArray: string[] = []
    for (const paramsKey in params) {
      paramsArray.push(paramsKey + "=" + params[paramsKey])
    }
    url += "?" + paramsArray.join("&")
    uni.navigateTo({ url: url })
  }
}
posted @ 2024-01-26 09:32  乌拉小考  阅读(3678)  评论(0)    收藏  举报