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

这篇具有很好参考价值的文章主要介绍了uniapp实现支付宝小程序中嵌入H5并且实现相互通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

场景：在小程序开发中（无论是支付宝、微信、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域名合法校验
小程序嵌套h5实现实时交互功能,uni-app,前端,小程序,uni-app,小程序,前端,支付宝小程序,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在开发工具上调试步骤
小程序嵌套h5实现实时交互功能,uni-app,前端,小程序,uni-app,小程序,前端,支付宝小程序,webview

以上就是小程序和webview的简单通讯。文章来源地址https://www.toymoban.com/news/detail-804353.html

到了这里，关于uniapp实现支付宝小程序中嵌入H5并且实现相互通信的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Toy模板网

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

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2