uniapp Alipay applet embedded webview communication uniapp H5 project solution

Prerequisites:

We embed an h5 page of web-view in the uniapp applet. When clicking a button in h5, the parameter data needs to be passed and received in the applet. The following is the implementation method

The configuration in project h5 is as follows:

Because the application of uni official document for webview communication is carried out in native h5

So we create a new html page in the h5 project file and apply the html in the web configuration in manifest.json

The code of the shops.html page is as follows (note that the html structure in my code needs to be used, otherwise it may cause the problem of style loss

Regardless of whether it is the uni project h5, the uni SDK needs to be introduced.

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 && typeof CSS.supports === 'function' && (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>

We have modified the default template and need to run the project again. If the log shows the current environment after running, it means that the uni import is successful.

Then we only need the page to call the api for parameter passing

(Note that the official document is wrongly written, we need to call the uni.webView method)

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

For example, in my project, the @click click event triggers the payfn method to transfer parameters to the Alipay applet

So far, the pre-introduction of h5 has been completed. The following is the writing method of the Alipay applet

In this part, we can follow the writing method of the official website, just need to listen to the message event, the Alipay code is shown in the figure

<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>

At this point, we can get the data passed back by h5 for logic writing.

During the test, we can turn off Alipay's verification of the webview and domain name, so that we only need to run the built-in service. Domain name correspondence needs to be configured during production.

As for the Alipay applet webview, it is relatively simple to transfer parameters to h5

You only need to splice the parameters in the path, and you can get it in the onload lifecycle hook in h5.