支付宝小程序内嵌H5——支付宝小程序webview里面h5跳回道支付宝小程序页面

古月水告

已于 2023-07-16 16:31:05 修改

阅读量2.1k

点赞数

分类专栏：小程序文章标签：小程序 javascript 前端

于 2023-02-25 09:44:26 首次发布

本文链接：https://blog.csdn.net/qq_28378665/article/details/129211919

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景

小程序开发避免不了要和h5交互，怎么和h5互通信息呢？

代码

1、h5页面手动引入 https://appx/web-view.min.js (此链接仅支持在支付宝客户端内访问）；

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>认证跳转</title>
</head>
<body>
<!-- 如该 H5 页面需要同时在非支付宝客户端内使用，为避免该请求404，可参考以下写法 -->
<!-- 请尽量在 html 头部执行以下脚本 -->
<script>
  if (navigator.userAgent.indexOf('AlipayClient') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  }
</script>

<script>
  my.redirectTo({url: '/pages/certificationTransfer/certificationTransfer?pageName=supplierTwo&certificationType=法人'});
  // 网页向小程序 postMessage 消息
  my.postMessage({name:"认证跳转"});
  // 接收来自小程序的消息。
  my.onMessage = function(e) {
    console.log(e); // {'sendToWebView': '1'}
  }
  // 判断是否运行在小程序环境里
  my.getEnv(function(res) {
    console.log(res.miniprogram) // true
  });
  my.startShare();
</script>
</body>
</html>