微信小程序开发打开另一个小程序的实现方法
微信小程序打開另一個小程序,有兩種方法:1.超鏈接;2.點擊按鈕。
全局配置:
跳轉到其他小程序,需要在當前小程序全局配置中配置需要跳轉的小程序列表,代碼如下:
App.json
{..."navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"] }否則會彈出以下錯誤提示:
超鏈接實現跳轉到小程序:
demo.wxml
<navigatortarget="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: '通過超鏈接跳轉其他小程序成功返回了'}) }相關參數:
| target | String | self | 設置為miniProgram,則跳轉都其他小程序 |
| app-id | String | ? | 要打開的小程序 appId |
| path | String | ? | 打開的頁面路徑,如果為空則打開首頁,可帶參數 |
| extra-data | Object | ? | 需要傳遞給目標小程序的數據,目標小程序可在?App.onLaunch(),App.onShow()?中獲取到這份數據。詳情 |
| version | version | release | 要打開的小程序版本,有效值 develop(開發版),trial(體驗版),release(正式版),僅在當前小程序為開發版或體驗版時此參數有效;如果當前小程序是正式版,則打開的小程序必定是正式版。 |
| bindsuccess | String | ? | 跳轉小程序成功 |
| bindfail | String | ? | 跳轉小程序失敗 |
| bindcomplete | String | ? | 跳轉小程序完成 |
備注:
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: '跳轉成功'})}})}?
相關參數:
| appId | string | ? | 是 | 要打開的小程序 appId |
| path | string | ? | 否 | 打開的頁面路徑,如果為空則打開首頁 |
| extraData | object | ? | 否 | 需要傳遞給目標小程序的數據,目標小程序可在?App.onLaunch,App.onShow?中獲取到這份數據。 |
| envVersion | string | release | 否 | 要打開的小程序版本。僅在當前小程序為開發版或體驗版時此參數有效。如果當前小程序是正式版,則打開的小程序必定是正式版。 |
| success | function | ? | 否 | 接口調用成功的回調函數 |
| fail | function | ? | 否 | 接口調用失敗的回調函數 |
| complete | function | ? | 否 | 接口調用結束的回調函數(調用成功、失敗都會執行) |
?
目標小程序接收來源小程序傳遞過來的參數:
目標小程序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. 開發者工具上支持被跳轉的小程序處理接收參數的調試。
?
?
總結
以上是生活随笔為你收集整理的微信小程序开发打开另一个小程序的实现方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: c中国姓氏的由来。
- 下一篇: 微信小程序里页面滚动到底部