uniapp实现支付宝小程序中嵌入H5并且实现相互通信

原创已于 2023-03-07 11:23:19 修改 · 4k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#uni-app #小程序 #前端 #支付宝小程序 #webview

于 2023-03-07 11:00:50 首次发布

前端同时被 3 个专栏收录

16 篇文章

订阅专栏

小程序

7 篇文章

订阅专栏

uni-app

3 篇文章

订阅专栏

场景：在小程序开发中（无论是支付宝、微信、Uniapp等）会遇到在小程序中使用或者跳转一些自己的公司开发过的，或三方地址，在小程序中的开发文档中大家可以看到，只是有一些基本的内部跳转方式，但通过仅有的跳转方式无法满足我们的跳转外部页面的需求，这个时候我们就可以使使用webView
下面例子皆以支付宝小程序为例 h5和支付宝小程序都使用uniapp实现：

官网地址： https://uniapp.dcloud.net.cn/component/web-view.html#web-view
<web-view>组件
web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面

小程序页面

<template>
  <view>
    <web-view :src="url" onMessage="onmessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.baidu.com'
    }
  },
  methods:{
  //接受H5数据
  onmessage(e){
    console.log("接受webView数据",e)
  }
 }
}
</script>

在上面的示例中，我们引入了web-view组件，并指定它要加载的URL地址为 https://www.baidu.com。
在小程序中使用web-view会有以下注意事项：

不支持个人小程序使用，仅支持企业小程序
每个页面只能有一个web-view，会自动铺满整个页面并覆盖其他组件
不支持多个页面web-view间的通讯；不支持横屏以及全屏展示
小程序端web-view组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom
对 web-view组件无效。
调试请以真机效果为准。

其中最重要的一点便是个人小程序并不支持使用，并且在开发中使用web-view还要到相应的小程序管理平台，做对应的域名配置，再开发工具大家可以点击详情-选中最下面的忽略webview域名合法校验
在这里插入图片描述
注意事项：

包含中文等特殊字符的 URL，请先使用 encodeURL() 编码。
主文档 URL、iframe 里的主文档 URL，以及后续跳转的主文档 URL，其域名均需要加入 H5 域名白名单，否则无法访问。
H5 域名白名单维护方法请参见配置 H5 域名。不支持添加阿里（天猫、淘宝等）域名，且域名总数量不超过 20 个。
H5 域名白名单变更后需要小程序发版，新的白名单仅对新版小程序生效。

以上就是webview简单的使用方法

下面就说一下h5与小程序之间是如果实现通讯的
大家可以看到在上面代码中web-view标签上有一个onMessage属性，这个属性就是用来接收H5发送过来的数据的
那么在H5中向小程序发送信息呢：

H5页面

在 <web-view> 加载的 HTML 中，添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网络网页</title>
    <style type="text/css">
      .btn {
        display: block;
        margin: 20px auto;
        padding: 5px;
        background-color: #007aff;
        border: 0;
        color: #ffffff;
        height: 40px;
        width: 200px;
      }

      .btn-red {
        background-color: #dd524d;
      }

      .btn-yellow {
        background-color: #f0ad4e;
      }

      .desc {
        padding: 10px;
        color: #999999;
      }

      .post-message-section {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <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>')
      } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
        // QQ 小程序
        document.write(
          '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
        )
      } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
        // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>'
        )
      } else if (/toutiaomicroapp/i.test(userAgent)) {
        // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>'
        )
      } else if (/swan/i.test(userAgent)) {
        // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
        )
      } else if (/quickapp/i.test(userAgent)) {
        // quickapp
        document.write(
          '<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>'
        )
      }
    </script>
    <!-- uni 的 SDK -->
    <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
    <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
    <script type="text/javascript">
      // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function() {
      // 向小程序发送数据
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });

        document.getElementById('postMessage').addEventListener('click', function() {
          uni.postMessage({
            data: {
              action: 'message'
            }
          });
        });
      });
    </script>
  </body>
</html>

也可在每个页面内使用

uni.postMessage({
            data: {
                action: 'message'
            }
        });

以上就是简单的h5向小程序传参并且小程序内接受参数
下面就讲一下小程序向h5传参并在h5内接受参数
支付宝小程序官方文档：https://opendocs.alipay.com/mini/component/web-view

下面先放代码
支付宝小程序实现传参数

<template>
  <view>
    <web-view :src="url" onMessage="onmessage" id="web-view-1"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.baidu.com',
      webViewContext:null,
    }
  },
  onLoad(){
     this.webViewContext = my.createWebViewContext('web-view-1')
  },
  methods:{
  // 向H5传递参数
  test(e){
     this.webViewContext.postMessage({ sendToWebView: '1' });
 },
  // 接受H5数据
  onmessage(e){
    console.log("接受webView数据",e)
  }
 }
}
</script>

H5页面接受参数代码入下

   my.onMessage = (e) => {
   // h5接受参数
    console.log(e) // {'sendToWebView': '1'}
 }

其他：
webView在开发工具上调试步骤
在这里插入图片描述

以上就是小程序和webview的简单通讯。