微信小程序開發(fā)打開另一個(gè)小程序的實(shí)現(xiàn)方法
微信小程序打開另一個(gè)小程序,有兩種方法:1.超鏈接;2.點(diǎn)擊按鈕。
全局配置:
跳轉(zhuǎn)到其他小程序,需要在當(dāng)前小程序全局配置中配置需要跳轉(zhuǎn)的小程序列表,代碼如下:
App.json
{
...
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
]
}
否則會(huì)彈出以下錯(cuò)誤提示:

超鏈接實(shí)現(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">點(diǎn)擊超鏈接打開綁定的小程序</navigator>
demo.js
data:{
extraData: {
from: '優(yōu)享新可能nav'
}
}
...
toMiniProgramSuccess(res){
//從其他小程序返回的時(shí)候觸發(fā)
wx.showToast({
title: '通過超鏈接跳轉(zhuǎn)其他小程序成功返回了'
})
}
相關(guān)參數(shù):
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| 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(體驗(yàn)版),release(正式版),僅在當(dāng)前小程序?yàn)殚_發(fā)版或體驗(yàn)版時(shí)此參數(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)境為準(zhǔn)。如果設(shè)置有值,則只在當(dāng)前小程序?yàn)榉钦桨鏁r(shí)有效。如果設(shè)置為develop,那么最好先用微信預(yù)覽最新編譯過的需要跳轉(zhuǎn)到的小程序,然后再掃碼預(yù)覽原來的小程序。不然的話跳轉(zhuǎn)到的小程序可能不是最新版;
3.bindsuccess回調(diào)事件在跳轉(zhuǎn)到小程序返回之后觸發(fā),wx.navigateToMiniProgram Api則是在跳轉(zhuǎn)同時(shí)觸發(fā)。
通過按鈕單擊事件實(shí)現(xiàn):
demo.wxml
<button bindtap='navigateToMiniProgram'> 點(diǎn)擊按鈕打開其他小程序 </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ù):
| 屬性 | 類型 | 默認(rèn)值 | 是否必填 | 說明 |
|---|---|---|---|---|
| appId | string | 是 | 要打開的小程序 appId | |
| path | string | 否 | 打開的頁面路徑,如果為空則打開首頁 | |
| extraData | object | 否 | 需要傳遞給目標(biāo)小程序的數(shù)據(jù),目標(biāo)小程序可在 App.onLaunch,App.onShow 中獲取到這份數(shù)據(jù)。 | |
| envVersion | string | release | 否 | 要打開的小程序版本。僅在當(dāng)前小程序?yàn)殚_發(fā)版或體驗(yàn)版時(shí)此參數(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)用成功、失敗都會(huì)執(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í)候正確的接收參數(shù):
開發(fā)者工具新建編譯模式:

輸出如下:

注意:
1. 先選擇進(jìn)入場(chǎng)景,輸入1037就能快速定位到從小程序進(jìn)入這個(gè)選項(xiàng),然后就會(huì)顯示設(shè)置appid及extraData的輸入框;
2. 尤其要注意extraData的格式,與來源小程序中傳遞過來的格式都有點(diǎn)不一樣,請(qǐng)嚴(yán)格參照下邊的代碼:
{"from":"xxxxx"}
注意事項(xiàng):
1.navigateToMiniProgram Api需要用戶主動(dòng)觸發(fā)跳轉(zhuǎn),且在跳轉(zhuǎn)至其他小程序前,將統(tǒng)一增加彈窗,詢問是否跳轉(zhuǎn),用戶確認(rèn)后才可以跳轉(zhuǎn)其他小程序。如果用戶點(diǎn)擊取消,則回調(diào)fail cancel;
2.每個(gè)小程序可跳轉(zhuǎn)的其他小程序數(shù)量限制為不超過 10 個(gè);
3.在開發(fā)者工具上調(diào)用此 API 并不會(huì)真實(shí)的跳轉(zhuǎn)到另外的小程序,但是開發(fā)者工具會(huì)校驗(yàn)本次調(diào)用跳轉(zhuǎn)是否成功。
4. 開發(fā)者工具上支持被跳轉(zhuǎn)的小程序處理接收參數(shù)的調(diào)試。
到此這篇關(guān)于微信小程序開發(fā)打開另一個(gè)小程序的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)小程序打開另一個(gè)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序 wx.request(接口調(diào)用方式)詳解及實(shí)例
- 微信小程序調(diào)用攝像頭隱藏式拍照功能
- 微信小程序頁面調(diào)用自定義組件內(nèi)的事件詳解
- 微信小程序如何調(diào)用json數(shù)據(jù)接口并解析
- 微信小程序調(diào)用攝像頭實(shí)現(xiàn)拍照功能
- 微信小程序調(diào)用微信登陸獲取openid及java做為服務(wù)端示例
- 微信小程序調(diào)用支付接口的完整流程記錄
- 使用微信小程序API,調(diào)用微信的各種內(nèi)置能力。
- 微信小程序頁面與組件之間信息傳遞與函數(shù)調(diào)用
- 微信外喚起微信小程序的方法詳解
相關(guān)文章
javascript 簡(jiǎn)練的幾個(gè)函數(shù)
看CSDN上別人的代碼,感覺比較精煉,拿來主義,需要的朋友可以看下。2009-08-08
JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法,數(shù)組亂序的意思是,把數(shù)組內(nèi)的所有元素排列順序打亂,需要的朋友可以參考下2014-10-10
Kendo Grid editing 自定義驗(yàn)證報(bào)錯(cuò)提示的解決方法
Kendo UI是一個(gè)強(qiáng)大的框架用于快速HTML5 UI開發(fā)?;谧钚碌腍TML5、CSS3和JavaScript標(biāo)準(zhǔn)。今天小編通過分享本文給大家介紹Kendo Grid editing 自定義驗(yàn)證報(bào)錯(cuò)提示的解決方法2016-11-11
echarts中幾種漸變方式的具體實(shí)現(xiàn)方式
在使用echarts繪制圖表時(shí),有的時(shí)候需要使用漸變色,下面這篇文章主要給大家介紹了關(guān)于echarts中幾種漸變方式的具體實(shí)現(xiàn)方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
JavaScript設(shè)計(jì)模式之原型模式分析【ES5與ES6】
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之原型模式,簡(jiǎn)單描述了原型模式的概念、原理,并結(jié)合實(shí)例形式分析了ES5與ES6實(shí)現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
JavaScript中this的四個(gè)綁定規(guī)則總結(jié)
相信大家都知道,ES5及之前時(shí)代的JavaScript中this的綁定機(jī)制是讓很多開發(fā)者頭疼不已的事情。this 的綁定變化多端,讓筆者也吃了不少虧。所以本文總結(jié)了this的四條綁定規(guī)則,在此記錄,以防自己遺忘,也方便他人參考借鑒。下面來一起看看吧。2016-09-09

