用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

微信小程序開發打開另一個小程序的實現方法

Rolan 2020-5-19 00:11

微信小程序打開另一個小程序,有兩種方法:1.超鏈接;2.點擊按鈕。全局配置:跳轉到其他小程序,需要在當前小程序全局配置中配置需要跳轉的小程序列表,代碼如下:App.json{ ... "navigateToMiniProgramAppIdList": ...

微信小程序打開另一個小程序,有兩種方法: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: '通過超鏈接跳轉其他小程序成功返回了'
  })
}

相關參數:

屬性名類型默認值說明
targetStringself設置為miniProgram,則跳轉都其他小程序
app-idString要打開的小程序 appId
pathString打開的頁面路徑,如果為空則打開首頁,可帶參數
extra-dataObject需要傳遞給目標小程序的數據,目標小程序可在 App.onLaunch(),App.onShow() 中獲取到這份數據。 詳情
versionversionrelease要打開的小程序版本,有效值 develop(開發版),trial(體驗版),release(正式版),僅在當前小程序為開發版或體驗版時此參數有效;如果當前小程序是正式版,則打開的小程序必定是正式版。
bindsuccessString跳轉小程序成功
bindfailString跳轉小程序失敗
bindcompleteString跳轉小程序完成

備注:

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: '跳轉成功'
    })
   }
  })
 }

相關參數:

屬性類型默認值是否必填說明
appIdstring要打開的小程序 appId
pathstring打開的頁面路徑,如果為空則打開首頁
extraDataobject需要傳遞給目標小程序的數據,目標小程序可在 App.onLaunch,App.onShow 中獲取到這份數據。
envVersionstringrelease要打開的小程序版本。僅在當前小程序為開發版或體驗版時此參數有效。如果當前小程序是正式版,則打開的小程序必定是正式版。
successfunction接口調用成功的回調函數
failfunction接口調用失敗的回調函數
completefunction接口調用結束的回調函數(調用成功、失敗都會執行)

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

目標小程序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. 開發者工具上支持被跳轉的小程序處理接收參數的 調試 。

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

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 張生榮 來自: zhangshengrong
梦幻单人赚钱方法 江西快3官网 秒速赛车开奖记录app 赛车动漫 广西快3遗漏数据表 排三定位 飞艇pk10一天稳赚5000 黑龙江体彩十一选五开奖结果 股票行情趋势图 极速十一选五网上购彩 精准三个半波中特