uniapp支付宝小程序内嵌webview通信uniapp H5项目的解决方案

本文介绍: 本文主要提供uniapp 支付宝小程序内嵌 webview h5通信的解决方案

需求前提：

我们在uniapp 小程序中内嵌了web–view的一个 h5的页面，当点击 h5中某个按钮的时候，需要传递参数数据在小程序中接收到，下面是实现方法

在项目 h5中的配置如下：

因为uni 官方文档对于webview 通信的应用是在原生 h5中进行的

所以我们在h5项目文件中新建一个 html 页面，并且在m a n ifes t.json中的web 配置中应用该html

shop s.html 页面代码如下（注意需要使用我代码中的html 结构，否则可能导致样式丢失的问题

不管是不是uni 项目 h5中都需要引入uni的SDK。

<script type=”text/javascript” src=”https://js.cdn.aliyun.d cloud.net.cn/dev/uni–app/uni.webview.1.5.2.js”></scri pt>

<!DOCTYPE html&gt;
<html lang="zh-CN"&gt;
  <head&gt;
    <meta charset="utf-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    <title>
      <%= htmlWebpackPlugin.options.title %>
    </title>
    <!-- Open Graph data -->
    <!-- <meta property="og:title" content="Title Here" /> -->
    <!-- <meta property="og:url" content="http://www.example.com/" /> -->
    <!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
    <!-- <meta property="og:description" content="Description Here" /> -->
    <script>
      var coverSupport = 'CSS' in window &amp;&amp; typeof CSS.supports === 'function' &amp;&amp; (CSS.supports('top: env(a)') || CSS
        .supports(
          'top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
  </head>
  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
   <script type="text/javascript">
        var userAgent = navigator.userAgent;
        if (userAgent.indexOf('AlipayClient') > -1) {
          // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
          document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
        } 
      </script>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  <script type="text/javascript">
      // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function() {
      
        uni.webView.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
      });
    </script>
</html>

我们修改了默认模版需要重新跑一下项目，跑完之后若log出当前环境，则说明uni引入成功，

然后我们只需要的页面调用 api进行参数传递就可以了

（注意官方文档是错误写法，我们需要调用uni.webView方法）

     uni.webView.postMessage({
            data: {
              action: '点击了H5传递的数据'
            }
          })

比如我在项目中@click 点击事件触发 p ayfn方法进行参数传递支付宝小程序

到此为止h5的前置引入已经完成，下面是支付宝小程序的写法

在这个部分我们可以按照官网的写法，只需要监听 message 事件就可以了，支付宝代码如图所示

<template>
  <view>
    <web-view :src="url" @message="message"></web-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        url: 'http://localhost:8080/#/'
      }
    },
    methods: {
      //h5传惨监听事件
      message(e) {
        console.log(e.detail.data);

      },
    },
  }
</script>