微信小程序打開另一個小程序，有兩種方法：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: '優(yōu)享新可能nav'
　　}
}
... 
toMiniProgramSuccess(res){
  //從其他小程序返回的時候觸發(fā)
  wx.showToast({
   title: '通過超鏈接跳轉其他小程序成功返回了'
  })
}

相關參數：

備注：

1.extra-data必須為Object類型，可以在data中定義，然后模板中引用；

2.version可以為空，以小程序當前環(huán)境為準。如果設置有值，則只在當前小程序為非正式版時有效。如果設置為develop,那么最好先用微信預覽最新編譯過的需要跳轉到的小程序，然后再掃碼預覽原來的小程序。不然的話跳轉到的小程序可能不是最新版；

3.bindsuccess回調事件在跳轉到小程序返回之后觸發(fā)，wx.navigateToMiniProgram Api則是在跳轉同時觸發(fā)。

通過按鈕單擊事件實現：

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) {
    // 打開其他小程序成功同步觸發(fā)
    wx.showToast({
     title: '跳轉成功'
    })
   }
  })
 }

相關參數：

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

目標小程序app.js

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

輸出：

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

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

開發(fā)者工具新建編譯模式：

輸出如下：

注意：

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

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

{"from":"xxxxx"}

注意事項：

1.navigateToMiniProgram Api需要用戶主動觸發(fā)跳轉，且在跳轉至其他小程序前，將統(tǒng)一增加彈窗，詢問是否跳轉，用戶確認后才可以跳轉其他小程序。如果用戶點擊取消，則回調fail cancel；

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

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

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

到此這篇關于微信小程序開發(fā)打開另一個小程序的實現方法的文章就介紹到這了,更多相關小程序打開另一個小程序內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論