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

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

官网地址: https://uniapp.dcloud.net.cn/component/web-view.html#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页面

加载的 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('
                    
                    

你可能感兴趣的:(uni-app,前端,小程序,uni-app,小程序,前端,支付宝小程序,webview)