业务场景:企业A的小程序内嵌了企业B的H5
问题:企业A内嵌企业B的H5发起微信支付的时候,绕不过微信的限制.总是支付失败.
问题解决思路:企业B新建一个小程序,让企业A调用企业B的小程序, B内嵌H5,支付的时候,H5打开B,然后发起支付
注意:调用接口的时候也要在公众号上配置服务器域名.内嵌的H5也是要在公众号上配置业务域名
A小程序打开B小程序,A小程序的设置:
// app.json添加下面代码
"pages": [...],
"navigateToMiniProgramAppIdList": [
"wx4c9212345679" // B小程序的appId
],
// index.wxml
<view bindtap="skipB">跳转到B小程序</view>
// index.js
skipB() {
wx.navigateToMiniProgram({
appId: 'wx4c9212345679',// B小程序的appId
path: 'pages/index/index',// 跳转到B小程序的路径
extraData: { // 传给B小程序的参数
user_id: 111,
store_id: 222,
userName: '张三'
},
envVersion: 'develop',
success(res) {} // 打开成功
})
}
B小程序接受A小程序的参数
// app.js 下面俩都可以获取的到
onShow: function (options) {console.log(options.referrerInfo.extraData)}
onLaunch: function (options) {console.log(options.referrerInfo.extraData)}
在B小程序里面点击添加编译模式,做如下图设置,然后选中"调试A过来的",再点击编译,就会看到图二的结果:
B小程序内嵌H5 :
<web-view src="https://fjweichataccounttest.xxx.com/wx/h5.html"></web-view>
H5跳转到到小程序B的支付页面,注意H5跳转navigateTo,也有可能是switchTab,主要看小程序那边:
<button onclick="pay()">支付</button>
<script>
function pay(){
wx.miniProgram.navigateTo({ url: '/pages/pay/pay?data=1234' })
}
</script>