小程序里的h5页面调起小程序支付

转载已于 2022-05-27 17:58:03 修改 · 3.1k 阅读

2 ·

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

原文链接：https://www.csdn.net/tags/NtTagg5sNDQxNjItYmxvZwO0O0OO0O0O.html

标签

#微信小程序

于 2022-05-27 17:54:54 首次发布

本文介绍如何从H5页面触发小程序支付流程。通过在H5中使用微信JS-SDK判断当前环境是否为小程序环境，并据此决定是否调用小程序支付接口。文中提供H5页面与小程序端的代码示例。

小程序里的H5页面调起小程序支付

实现思路：在H5页面点击支付回跳到小程序，打开支付页调小程序支付，不支持小程序里的H5页面调用H5的微信支付

1.H5代码

<body >
	<div class="container">
	    <button  onclick="testPay()">支付</button>
	</div>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<script language="javascript">
	    function testPay() {
	        var mini=false;
	        wx.miniProgram.getEnv(function(res){
	            if (res.miniprogram){
	                //发起小程序支付
	                wx.miniProgram.navigateTo({url: "/pages/wxpay/wxpay"});
	                mini=true;
	            }
	        });
	    }
	</script>
</body>

2.小程序跳转H5代码

testH5.wxml

<view class="container">
  <view class="pageH5">
    <web-view src="https://wx.rengu.cc:30003/web/miniPay/index"></web-view>
  </view>
</view>

3.H5跳转小程序支付代码

Page({
  data: {
  },
  onLoad: function (options) {
    var that = this;
    console.log("回到小程序")
    console.log(options)
   //业务流程
  }

参考地址：

web-view | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html