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

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

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

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

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

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

 
B頁(yè)面 

API 

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í)頁(yè)面效果圖——