微信小程序开发打开另一个小程序的实现方法
微信小程序打開另一個(gè)小程序,有兩種方法:1.超鏈接;2.點(diǎn)擊按鈕。
全局配置:
跳轉(zhuǎn)到其他小程序,需要在當(dāng)前小程序全局配置中配置需要跳轉(zhuǎn)的小程序列表,代碼如下:
App.json
{..."navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"] }否則會彈出以下錯(cuò)誤提示:
超鏈接實(shí)現(xiàn)跳轉(zhuǎn)到小程序:
demo.wxml
<navigatortarget="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ù):
| 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ù):
| 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)用成功、失敗都會執(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)入場景,輸入1037就能快速定位到從小程序進(jìn)入這個(gè)選項(xiàng),然后就會顯示設(shè)置appid及extraData的輸入框;
2. 尤其要注意extraData的格式,與來源小程序中傳遞過來的格式都有點(diǎn)不一樣,請嚴(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 并不會真實(shí)的跳轉(zhuǎn)到另外的小程序,但是開發(fā)者工具會校驗(yàn)本次調(diào)用跳轉(zhuǎn)是否成功。
4. 開發(fā)者工具上支持被跳轉(zhuǎn)的小程序處理接收參數(shù)的調(diào)試。
?
?
總結(jié)
以上是生活随笔為你收集整理的微信小程序开发打开另一个小程序的实现方法的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: c中国姓氏的由来。
- 下一篇: 微信小程序里页面滚动到底部