每日優鮮小程式基礎元件介紹

1.基礎元件介紹

小程式基礎元件基於每日優鮮主商城小程式業務實踐演變而來。

基礎元件的名稱為：mini_app_base_module。

基礎元件的專案地址為：https://github.com/sahadev/mini_app_base_module。

2.基礎元件的結構與作用

我們理想的專案結構應該是這樣的：

也就是說，合理的專案結構應該講究層的概念，各個層之間是絕對分離的。上下層彼此通過開放介面相互通訊，杜絕跨層訪問。也就是說不應該使業務元件直接訪問RuntimeFrameworkApi層，頁面不應該直接訪問基礎元件層等等。而mini_app_base_module正是處於第三級的基礎元件層。

mini_app_base_module基礎元件提供的功能有：

baseApplication：為整個應用提供了與執行平臺隔離的環境，並做了執行時保護機制，為後期接入第三方SDK提供統一入口。目前的功能有：全域性變數管理、setData方法執行校驗、頁面常用的各種狀態方法等。

baseMonitorManager：用於為執行時API提供監控。具體實現需要業務元件提供網路訪問實現。

baseNetRequestManager：用於發起網路請求。業務元件的埋點、監控、業務網路訪問都需要通過它進行訪問。

baseStorageManager：用於管理序列化儲存功能，並提供了一鍵清除序列化值的方法。

baseUtils：提供除錯模式管理、日誌輸出、UUID建立、字串格式化等基礎工具。

performanceUtil：效能除錯工具，用於方法執行速度的效能除錯。

thirdApi：提供除網路訪問外的執行時api。

thirdNetApi：用於訪問執行時網路api。

3.基礎元件的接入方法

基礎元件瞭解了，該怎麼接入它呢？

初次引入

在專案中通過命令git submodule add https://github.com/sahadev/mini_app_base_module.git 進行引入。

引入後，將在專案中產生兩個檔案：

        .gitmodules
        mini_app_base_module

初次引入的開發者需要將這兩個檔案/資料夾commit並push。

初始化

在完成引入之後，基礎元件的程式碼並沒有存在與專案中，還需要進行初始化操作：git submodule update --init --rebase。小程式開發團隊的每位開發者都需要執行一次。

更新與維護

進行以上操作之後，專案中會多出一個資料夾mini_app_base_module以及一個檔案.gitmodules。當mini_app_base_module有更新或者有更改時，都需要進入mini_app_base_module資料夾中單獨進行fetch、rebase操作或commit push操作。

基礎元件接入

如果順利完成了引入，則開始進行接入操作。基礎元件功能的使用視業務而定。但接入BaseApplciation是必須要做的。

1.在業務程式碼中建立好application.js檔案，application.js將作為業務元件的全域性管理器，需要在application.js新增如下程式碼：

// Application 全域性管理入口
const {
    MFApp, MFPage, getApplication, registObserver
} = require('./mini_app_base_module/baseApplication');
==================
//視業務情況而定的業務程式碼
=================
module.exports = {
    MFApp, MFPage, getApplication
}

2.在app.js中引入application:

const { MFApp } = require('./application');

//將App方法呼叫替換為MFApp

App(param) => MFApp(param);

3.在對應的頁面中引入application:

// 示例 pages/mainPages/home/home.js

const { getApplication, MFPage } = require('../../../application');

const app = getApplication();

//將Page方法的呼叫替換為MFPage

Page(param) => MFPage(param)

===============================================================

在完成以上基本接入之後，後續可視情況而定完善基礎元件的其它功能。

每日優鮮主商城小程式經過大量的版本迭代之後，已經到了不得不重構的階段。該基礎元件也正是基礎主商城小程式重構的設計思路進行實現的。多個新業務小程式專案已經在此基礎之上進行了實踐，並且已經實現了大量的可共用的元件，但這些元件還需要與業務程式碼進行拆分，請大家關注後續進展，也希望大家可以一起參與進來完善壯大這個基礎元件。