精品！藝龍小程序：開發項目遇到的問題以及解決方案

發布時間：2017-12-06 17:05 所屬欄目：小程序開發教程

一．頁面間跳轉如何監聽事件小程序提供打開新頁面、頁面重定向、頁面返回、tabBar切換四種改變視圖的機制，托管了頁面的生命周期，并為應用提供了相應的生命周期事件，方便應用各階段的業務處理，但頁面之間相互跳轉 ...

一．頁面間跳轉如何監聽事件

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

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

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

B頁面

API

Event

打開二級頁面效果圖——

二、前后端同時開發過程中，前端如何方便的mock數據、特殊場景下前端如何方便的調整后端數據

涉及到http(s)接口請求數據，除了上述問題外，其實還有一些hook任務要做，比如統一的缺省入參、日志、行為統計、超時處理等，這就需要框架層面對小程序原生接口 wx.request做一層封裝以便擴展。

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

url:后端接口url
params：接口入參，若配置了參數列表，則按參數列表自動序列化參數，若不配置，默認取調用接口時的第一個參數作為params

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

數據請求——

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

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

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

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

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

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

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

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

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

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