微信小程式之間的跳轉及如何傳參互動
最近開發中有個業務需求需要跟別的小程式之間進行互動跳轉傳參,寫此篇記錄一下然後看能不能給到別人一些幫助
首先我們先了解一下微信小程式要跳轉小程式的api文件
wx.navigateToMiniProgram
這裡講一下需要注意的地方
小程式之間傳參可以通過兩個地方傳path攜帶query和extraData物件
用path的query傳參在傳遞的path路由頁面的onLoad生命週期回撥中就能接受到啦 例如
wx.navigateToMiniProgram({
appId: '需要跳轉到目標小程式appid'
path: 'pages/index/index?name=' + 111,
envVersion: 'trial' //體驗版trial 正式release
)
//另一個小程式pages/index/inde頁面中load生命週期接受到引數
onLoad(options) {
let name = options.name
}
而使用extraData的話就需要app的全域性onShow或onLaunch接收了,這裡可以通過兩種方式監聽onShow回撥接收extraData引數
1,直接在app的onShow生命週期回撥中接收代如下
onShow (options) {
//這裡就是接收到的引數啦
let data = options.referrerInfo.extraData || {}
},
2,另一種是通過本頁面監聽,小程式有個api wx.onAppShow(callback)本質上跟app的onShow方法是一樣的,我們可以在本頁面的onLoad中呼叫wx.onAppShow監聽,然後記得在頁面解除安裝之前取消監聽哦 使用 wx.offAppShow取消監聽
這種方式比較推薦 因為業務邏輯在本頁面就能掌控了
3,假設有個小程式使用上面api跳過來 我們可以通過back的形式返回跳過來的小程式 相應的api wx.navigateBackMiniProgram引數看文件就行
要帶引數的話從extraData帶上 另一個小程式一樣在app的onShow上能監聽到
4,最壞有個注意的小細節,我們開發的時候用的是體驗版測試的 跳轉時候envVersion這個引數 需要更換為trial才能跳到對方的體驗版,正式版小程式一定是跳正式。
好啦,大概需要注意的就這些啦,有啥疑問可以提問
相關文章
- 微信小程式中頁面間跳轉傳參方式微信小程式
- 微信小程式_跳轉方式微信小程式
- 微信小程式跳轉方式微信小程式
- 微信小程式如何在事件中傳參微信小程式事件
- 微信小程式的路由跳轉和傳遞引數微信小程式路由
- 微信小程式開發系列七:微信小程式的頁面跳轉微信小程式
- 微信小程式父子元件之間的資料傳遞微信小程式元件
- 微信開發之小程式頁面間如何傳遞引數
- 記一次微信小程式轉位元組跳動小程式的經驗微信小程式
- 微信小程式開發系列 (四) :微信小程式的頁面跳轉路由設計微信小程式路由
- 微信小程式 跳坑微信小程式
- 簡訊跳轉微信小程式有哪些好處?微信小程式
- 微信小程式API互動的自定義封裝微信小程式API封裝
- 微信跳轉_跳轉微信原理 weixin://dl/business/?ticket=xxx
- 微信公眾號開發之H5頁面跳轉到指定的小程式H5
- 微信小程式之物流狀態時間軸微信小程式
- 微信小程式——計算2點之間的距離微信小程式
- 微信小程式--頁面與元件之間如何進行資訊傳遞和函式呼叫微信小程式元件函式
- 血淚總結:如何從微信小程式的坑跳進支付寶小程式的大坑微信小程式
- 微信小程式中的值傳遞微信小程式
- 微信小程式之支付微信小程式
- 微信小程式之文字向上滾動效果微信小程式
- nuxt框架中路由動態傳參及結構分析之文章跳轉詳情頁面傳遞文章idUX框架路由
- 新浪微博app如何去喚起跳轉微信小程式APP微信小程式
- 微信小程式自定義元件封裝及元件傳值微信小程式元件封裝
- 微信跳轉瀏覽器如何解決!瀏覽器
- 微信小程式之wx.navigateTo不跳轉問題微信小程式
- 微信小程式 圖片上傳微信小程式
- mp-vue微信小程式多層路由跳轉問題覆盤Vue微信小程式路由
- 最簡單的Flutter路由教程——跳轉、動畫與傳參Flutter路由動畫
- 小程式間跳轉最新功能調整
- 微信小遊戲跳一跳外掛輔助程式遊戲
- vue常用操作及學習筆記(路由跳轉及路由傳參篇)Vue筆記路由
- 微信小程式、微店、門店小程式三者之間有什麼區別微信小程式
- 微信小程式旗下的宣傳是怎樣的?消費如何?微信小程式
- 微信小程式:抽獎轉盤微信小程式
- 微信小程式有旋轉動畫效果的音樂元件微信小程式動畫元件
- 【微信小程式】微信小程式 文字過長,自動換行的問題微信小程式