小程序跳轉到另一個小程序,參數傳遞以及調試,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跳轉到小程序文檔