注冊(cè)登錄

微信小程序頁面間跳轉(zhuǎn)如何監(jiān)聽事件?

2020-09-28
導(dǎo)讀:在微信小程序的開發(fā)過程中,我們可定會(huì)遇到頁面間相互跳轉(zhuǎn)的需求,那么如何監(jiān)聽頁面跳轉(zhuǎn)之間的事件呢?我們?cè)谥暗囊黄恼拢核圐埼⑿判〕绦蚩蚣芙M件研究(附源碼)為例,來...
在微信小程序的開發(fā)過程中,我們可定會(huì)遇到頁面間相互跳轉(zhuǎn)的需求,那么如何監(jiān)聽頁面跳轉(zhuǎn)之間的事件呢?我們?cè)谥暗囊黄恼拢核圐埼⑿判〕绦蚩蚣芙M件研究(附源碼)為例,來看一看小程序在頁面之間相互跳轉(zhuǎn)時(shí)的事件 ...

微信小程序的開發(fā)過程中,我們可定會(huì)遇到頁面間相互跳轉(zhuǎn)的需求,那么如何監(jiān)聽頁面跳轉(zhuǎn)之間的事件呢?我們?cè)谥暗囊黄恼拢?/span>藝龍微信小程序框架組件研究為例,來看一看小程序在頁面之間相互跳轉(zhuǎn)時(shí)的事件機(jī)制。

我們知道微信小程序(http://descansotropical.com/xiaocx/)提供打開新頁面、頁面重定向、頁面返回、tabBar切換四種改變視圖的機(jī)制,托管了頁面的生命周期,并為應(yīng)用提供了相應(yīng)的生命周期事件,方便應(yīng)用各階段的業(yè)務(wù)處理,但頁面之間相互跳轉(zhuǎn)并沒有相應(yīng)的事件機(jī)制,例如——

1、A頁面打開二級(jí)頁B,B頁面做了一些操作,要通知A頁面做相應(yīng)的處理。 
2、從B頁面攜帶一些數(shù)據(jù),返回到A頁面

以上兩種場(chǎng)景很常見,歸結(jié)為頁面間如何方便的進(jìn)行交互,當(dāng)然我們可以通過頁面跳轉(zhuǎn)傳參或全局?jǐn)?shù)據(jù)對(duì)象來達(dá)到目的,但是使用上有些束縛(轉(zhuǎn)換參數(shù)或維護(hù)全局對(duì)象)!

微信小程序頁面間跳轉(zhuǎn)如何監(jiān)聽事件?

所以在elong小程序項(xiàng)目中采用事件機(jī)制解決這一問題。我們重寫了navigateToAPI,A頁面調(diào)用該接口進(jìn)行頁面跳轉(zhuǎn)后,方法返回給A頁面一個(gè)事件對(duì)象 event,該對(duì)象可以注冊(cè)自定義事件,目標(biāo)頁面(B頁面)可以按照業(yè)務(wù)需求觸發(fā)事件響應(yīng),同時(shí)將相關(guān)數(shù)據(jù)作為參數(shù)傳遞到監(jiān)聽處callback。 
A頁面 

微信小程序頁面間跳轉(zhuǎn)如何監(jiān)聽事件? 
B頁面 

微信小程序頁面間跳轉(zhuǎn)如何監(jiān)聽事件?

API 

微信小程序頁面間跳轉(zhuǎn)如何監(jiān)聽事件?
微信小程序頁面間跳轉(zhuǎn)如何監(jiān)聽事件?

Event 

部分代碼如下:
    Page({

        data: {

            userInfo: {}

        },

        navigateToHttp: function () {

            var event = api.Navigate.go({

                url: '../http/index',

                params: {

                    name: 'billy'

                }

            });

            event.on("listok", function (params) {

                console.log(params)

            });

        },

        navigateToExternalComponent: function () {

            var event = api.Navigate.go({

                url: '../externalComponent/index'

            });

        },

        navigateToInternalComponent: function () {

            var event = api.Navigate.go({

                url: '../internalComponent/index'

            });

        },

        navigateToPartComponent: function (params) {

            var event = api.Navigate.go({

                url: '../partComponent/index'

            });

        },

打開二級(jí)頁面效果圖—— 

微信小程序頁面間跳轉(zhuǎn)如何監(jiān)聽事件?

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開店