微信小程序開發——打開另外一個小程序

微信小程序打開另外一個小程序，有兩種方法：1.超連接；2.點擊按鈕。

全局配置：

跳轉到其餘小程序，須要在當前小程序全局配置中配置須要跳轉的小程序列表,代碼以下：

App.json

{
  ...
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

不然會彈出如下錯誤提示：

超連接實現跳轉到小程序：

demo.wxml

 <navigator 
 target="miniProgram" 
 open-type="navigate" 
 app-id="wxdbcxxxxxxxx985f" 
 path="pages/index/index?goods_id=201" 
 extra-data="{{extraData}}"
 version="develop" 
 bindsuccess="toMiniProgramSuccess">點擊超連接打開綁定的小程序</navigator>

demo.js

data:{
　　extraData: {
　　　　from: '優享新可能nav'
　　}
}
...  
toMiniProgramSuccess(res){
    //從其餘小程序返回的時候觸發
    wx.showToast({
      title: '經過超連接跳轉其餘小程序成功返回了'
    })
}

相關參數：

屬性名	類型	默認值	說明
target	String	self	設置爲miniProgram，則跳轉都其餘小程序
app-id	String		要打開的小程序 appId
path	String		打開的頁面路徑，若是爲空則打開首頁，可帶參數
extra-data	Object		須要傳遞給目標小程序的數據，目標小程序可在 App.onLaunch()，App.onShow() 中獲取到這份數據。詳情
version	version	release	要打開的小程序版本，有效值 develop（開發版），trial（體驗版），release（正式版），僅在當前小程序爲開發版或體驗版時此參數有效；若是當前小程序是正式版，則打開的小程序一定是正式版。
bindsuccess	String		跳轉小程序成功
bindfail	String		跳轉小程序失敗
bindcomplete	String		跳轉小程序完成

備註：

1. extra-data必須爲Object類型，能夠在data中定義，而後模板中引用；

2. version能夠爲空，以小程序當前環境爲準。若是設置有值，則只在當前小程序爲非正式版時有效。若是設置爲develop,那麼最好先用微信預覽最新編譯過的須要跳轉到的小程序，而後再掃碼預覽原來的小程序。否則的話跳轉到的小程序可能不是最新版；

3. bindsuccess回調事件在跳轉到小程序返回以後觸發，wx.navigateToMiniProgram Api則是在跳轉同時觸發。

經過按鈕單擊事件實現：

demo.wxml

<button bindtap='navigateToMiniProgram'>
點擊按鈕打開其餘小程序
</button>

demo.js

  navigateToMiniProgram(){
    wx.navigateToMiniProgram({
      appId: 'wxdbcxxxxx985f',
      path: 'pages/index/index?goods_id=201',
      extraData: {
        from: 'xxxxx'
      },
      envVersion: 'develop',
      success(res) {
        // 打開其餘小程序成功同步觸發
        wx.showToast({
          title: '跳轉成功'
        })
      }
    })
  }

相關參數：

屬性	類型	默認值	是否必填	說明
appId	string		是	要打開的小程序 appId
path	string		否	打開的頁面路徑，若是爲空則打開首頁
extraData	object		否	須要傳遞給目標小程序的數據，目標小程序可在 App.onLaunch，App.onShow 中獲取到這份數據。
envVersion	string	release	否	要打開的小程序版本。僅在當前小程序爲開發版或體驗版時此參數有效。若是當前小程序是正式版，則打開的小程序一定是正式版。
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

目標小程序接收來源小程序傳遞過來的參數：

目標小程序app.js

App({
  onLaunch: function (options) {
    console.log("referrerInfo:::", options.referrerInfo)
  }
    ...
})

輸出：

{"appId":"wxcc41e47562b08129","extraData":{"from":"xxxxx"}}

開發者工具調試被打開的小程序時候正確的接收參數：

開發者工具新建編譯模式：

輸出以下：

 

注意：

1. 先選擇進入場景，輸入1037就能快速定位到從小程序進入這個選項，而後就會顯示設置appid及extraData的輸入框；

2. 尤爲要注意extraData的格式，與來源小程序中傳遞過來的格式都有點不同，請嚴格參照下邊的代碼：

{"from":"xxxxx"}

注意事項：

1. navigateToMiniProgram Api須要用戶主動觸發跳轉，且在跳轉至其餘小程序前，將統一增長彈窗，詢問是否跳轉，用戶確認後才能夠跳轉其餘小程序。若是用戶點擊取消，則回調 fail cancel；

2. 每一個小程序可跳轉的其餘小程序數量限制爲不超過 10 個；

3. 在開發者工具上調用此 API 並不會真實的跳轉到另外的小程序，可是開發者工具會校驗本次調用跳轉是否成功。

4. 開發者工具上支持被跳轉的小程序處理接收參數的調試。