小程序跳转到另一个小程序,参数传递以及调试,H5跳转小程序,小程序内嵌H5,

业务场景:企业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>

小程序H5跳转到小程序文档

发布了112 篇原创文章 · 获赞 149 · 访问量 55万+

猜你喜欢

转载自blog.csdn.net/l284969634/article/details/102953168