uni-app中webview与应用内通信

2,796 阅读1分钟

用uniapp做了个地图画圈的功能,但是uniapp的app平台不能直接引入百度地图的sdk,所以用uniapp打包成H5之后再在app平台使用webview打开地图,在webview与应用内通信时遇到一些问题做一下总结

打包为H5项目之后需要集成到uniapp的hybrid文件夹下的html文件夹内, 此时index.html文件 代码格式化之后需要按下面代码格式添加uni SDK以便webview和uniapp内通信

<!-- uni 的 SDK  重点在这要在body下引入如下代码 -->
 <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  <script>
    document.addEventListener('UniAppJSBridgeReady', function() {
      uni.webView.getEnv(function(res) {
        console.log('当前环境:' + JSON.stringify(res));
      });
      // uni.webView.navigateTo(...)
    });
  </script>

app内接受参数

<web-view :src="url" @message="getMessage"></web-view>
打印getMessage方法获取的参数即可
getMessage(event) {
console.log(event)
}