您好,登錄后才能下訂單哦!
小編這次要給大家分享的是微信小程序開發(fā)如何實現(xiàn)打開另一個小程序,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
微信小程序打開另一個小程序,有兩種方法:1.超鏈接;2.點擊按鈕。
全局配置:
跳轉(zhuǎn)到其他小程序,需要在當(dāng)前小程序全局配置中配置需要跳轉(zhuǎn)的小程序列表,代碼如下:
App.json
{ ... "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] }
否則會彈出以下錯誤提示:
超鏈接實現(xiàn)跳轉(zhuǎn)到小程序:
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: '通過超鏈接跳轉(zhuǎn)其他小程序成功返回了' }) }
相關(guān)參數(shù):
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
target | String | self | 設(shè)置為miniProgram,則跳轉(zhuǎn)都其他小程序 |
app-id | String | 要打開的小程序 appId | |
path | String | 打開的頁面路徑,如果為空則打開首頁,可帶參數(shù) | |
extra-data | Object | 需要傳遞給目標(biāo)小程序的數(shù)據(jù),目標(biāo)小程序可在 App.onLaunch(),App.onShow() 中獲取到這份數(shù)據(jù)。詳情 | |
version | version | release | 要打開的小程序版本,有效值 develop(開發(fā)版),trial(體驗版),release(正式版),僅在當(dāng)前小程序為開發(fā)版或體驗版時此參數(shù)有效;如果當(dāng)前小程序是正式版,則打開的小程序必定是正式版。 |
bindsuccess | String | 跳轉(zhuǎn)小程序成功 | |
bindfail | String | 跳轉(zhuǎn)小程序失敗 | |
bindcomplete | String | 跳轉(zhuǎn)小程序完成 |
備注:
1.extra-data必須為Object類型,可以在data中定義,然后模板中引用;
2.version可以為空,以小程序當(dāng)前環(huán)境為準。如果設(shè)置有值,則只在當(dāng)前小程序為非正式版時有效。如果設(shè)置為develop,那么最好先用微信預(yù)覽最新編譯過的需要跳轉(zhuǎn)到的小程序,然后再掃碼預(yù)覽原來的小程序。不然的話跳轉(zhuǎn)到的小程序可能不是最新版;
3.bindsuccess回調(diào)事件在跳轉(zhuǎn)到小程序返回之后觸發(fā),wx.navigateToMiniProgram Api則是在跳轉(zhuǎn)同時觸發(fā)。
通過按鈕單擊事件實現(xiàn):
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: '跳轉(zhuǎn)成功' }) } }) }
相關(guān)參數(shù):
屬性 | 類型 | 默認值 | 是否必填 | 說明 |
---|---|---|---|---|
appId | string | 是 | 要打開的小程序 appId | |
path | string | 否 | 打開的頁面路徑,如果為空則打開首頁 | |
extraData | object | 否 | 需要傳遞給目標(biāo)小程序的數(shù)據(jù),目標(biāo)小程序可在 App.onLaunch,App.onShow 中獲取到這份數(shù)據(jù)。 | |
envVersion | string | release | 否 | 要打開的小程序版本。僅在當(dāng)前小程序為開發(fā)版或體驗版時此參數(shù)有效。如果當(dāng)前小程序是正式版,則打開的小程序必定是正式版。 |
success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
目標(biāo)小程序接收來源小程序傳遞過來的參數(shù):
目標(biāo)小程序app.js
App({ onLaunch: function (options) { console.log("referrerInfo:::", options.referrerInfo) } ... })
輸出:
{"appId":"wxcc41e47562b08129","extraData":{"from":"xxxxx"}}
開發(fā)者工具調(diào)試被打開的小程序時候正確的接收參數(shù):
開發(fā)者工具新建編譯模式:
輸出如下:
注意:
1. 先選擇進入場景,輸入1037就能快速定位到從小程序進入這個選項,然后就會顯示設(shè)置appid及extraData的輸入框;
2. 尤其要注意extraData的格式,與來源小程序中傳遞過來的格式都有點不一樣,請嚴格參照下邊的代碼:
{"from":"xxxxx"}
注意事項:
1.navigateToMiniProgram Api需要用戶主動觸發(fā)跳轉(zhuǎn),且在跳轉(zhuǎn)至其他小程序前,將統(tǒng)一增加彈窗,詢問是否跳轉(zhuǎn),用戶確認后才可以跳轉(zhuǎn)其他小程序。如果用戶點擊取消,則回調(diào)fail cancel;
2.每個小程序可跳轉(zhuǎn)的其他小程序數(shù)量限制為不超過 10 個;
3.在開發(fā)者工具上調(diào)用此 API 并不會真實的跳轉(zhuǎn)到另外的小程序,但是開發(fā)者工具會校驗本次調(diào)用跳轉(zhuǎn)是否成功。
4. 開發(fā)者工具上支持被跳轉(zhuǎn)的小程序處理接收參數(shù)的調(diào)試。
看完這篇關(guān)于微信小程序開發(fā)如何實現(xiàn)打開另一個小程序的文章,如果覺得文章內(nèi)容寫得不錯的話,可以把它分享出去給更多人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。