一．頁面間跳轉(zhuǎn)如何監(jiān)聽事件

小程序提供打開新頁面、頁面重定向、頁面返回、tabBar切換四種改變視圖的機制，托管了頁面的生命周期，并為應用提供了相應的生命周期事件，方便應用各階段的業(yè)務處理，但頁面之間相互跳轉(zhuǎn)并沒有相應的事件機制，例如——

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

以上兩種場景很常見，歸結(jié)為頁面間如何方便的進行交互，當然我們可以通過頁面跳轉(zhuǎn)傳參或全局數(shù)據(jù)對象來達到目的，但是使用上有些束縛(轉(zhuǎn)換參數(shù)或維護全局對象)，在此elong小程序項目中采用事件機制解決這一問題。我們重寫了navigateToAPI，A頁面調(diào)用該接口進行頁面跳轉(zhuǎn)后，方法返回給A頁面一個事件對象 event，該對象可以注冊自定義事件，目標頁面(B頁面)可以按照業(yè)務需求觸發(fā)事件響應，同時將相關(guān)數(shù)據(jù)作為參數(shù)傳遞到監(jiān)聽處callback。 
A頁面 

 
B頁面 

API 

Event 

打開二級頁面效果圖—— 

二、前后端同時開發(fā)過程中，前端如何方便的mock數(shù)據(jù)、特殊場景下前端如何方便的調(diào)整后端數(shù)據(jù)

涉及到http(s)接口請求數(shù)據(jù)，除了上述問題外，其實還有一些hook任務要做，比如統(tǒng)一的 缺省入?yún)ⅰ⑷罩尽⑿袨榻y(tǒng)計、超時處理等，這就需要框架層面對小程序原生接口 wx.request做一層封裝以便擴展。

每個頁面所需要的后端接口配置在獨立service文件中，頁面中引用對應的service，統(tǒng)一由此調(diào)用http接口，減少頁面業(yè)務邏輯的復雜度。 

url:后端接口url 
params：接口入?yún)ⅲ襞渲昧藚?shù)列表，則按參數(shù)列表自動序列化參數(shù)，若不配置，默認取調(diào)用接口時的第一個參數(shù)作為params 

method: 默認為 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 
noLoading: 默認false，即每個網(wǎng)絡接口均出現(xiàn)loading效果 
mockData：模擬后端數(shù)據(jù)，并行開發(fā)過程中必不可少 
dataTransform:轉(zhuǎn)換數(shù)據(jù)，滿足特殊性處理 
loading效果圖—— 

數(shù)據(jù)請求—— 

三、若要所有的頁面支持自定義事件、業(yè)務組件擴展等功能，又不想所有的頁面中添加量大的方法，這就需要框架層提供統(tǒng)一的機制解決，elong小程序框架在此封裝了Page、require等原生方法

1、require如果提供基準目錄層次__dirname

a)require非相對目錄時會自動補充相等層次 
b)直接調(diào)用原生require

2、未提供基準目錄層次_dirname，按當前目錄尋找 

3、Page 構(gòu)造函數(shù)用來注冊一個頁面。接受一個object參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等，框架對Page做了重寫，這樣可以方便的使用擴展能力(頁面事件、全局事件、內(nèi)部組件、外部組件)，使用時僅需將原來的業(yè)務代碼用包裝器包裝一下即可

重寫后的Page增加了 委托生命周期函數(shù)、擴展事件機制、內(nèi)置內(nèi)部組件和外部組件擴展等功能(詳見overwrite.js 文件) 

四、小程序中提供了模板機制，

可以方便的復用一段頁面（wxml）代碼，但需要手動將模板中綁定的事件、數(shù)據(jù)注冊到當前頁面的Page下，而且不可以出現(xiàn)重名屬性和方法，相當于僅是一個“插入”操作，目前無法像使用原生組件一樣使用一個外部的獨立組件。比如，業(yè)務中有一個獨立的功能日歷，我們通常希望這個日歷組件是獨立一體的，放在一個component文件夾下，日歷組件包含自己的wxml、wxss、js，其中js的事件、數(shù)據(jù)注冊不受太多限制（不關(guān)心是否和使用者命名沖突等），為此 elong 小程序框架在重寫Page時提供了擴展外部組件的功能。 

詳細使用規(guī)范—— 
1、wxml需要以模板的形式引入組件的wxml 
<template is="filter" data="{{ ...typeFilter }}" /> 
2、wxss 需要引入組件的wxss 
@import "filter/index.wxss"; 
3、js需要引入組件的js文件 
var filter = require('./filter/index'); 
4、組件和頁面見的事件傳遞需要在組件配置中聲明 

這些事件函數(shù)需要注冊在頁面中，組件中可以通過fireEvent的形式觸發(fā)到這些事件。 
5、組件中不可使用Page構(gòu)造方法，因為組件不是頁面，不需要注入小程序頁面列表中，其他的事件函數(shù)、方法、數(shù)據(jù)的定義沒有任何限制，不需要擔心方法和屬性的同名沖突，框架層將組件的屬性和方法命名空間化賦予頁面對象，并且如果組件中的方法用到this，在組件的方法執(zhí)行時，框架會動態(tài)改變要操作的數(shù)據(jù)對象，保證組件中詞法this就是組件的。 

*實現(xiàn)詳見 overwrite.js > extendComponents方法。 
日歷組件—— 

picker組件效果圖—— 

獨立外部組件效果圖—— 

項目地址：https://github.com/eLong-opensource/XCX-scaffold 
項目下載：XCX-scaffold-master (1).zip