每日優(yōu)鮮小程序基礎(chǔ)組件介紹

• • 1.基礎(chǔ)組件介紹
  • 2.基礎(chǔ)組件的結(jié)構(gòu)與作用
  • 3.基礎(chǔ)組件的接入方法
  • • 初次引入
    • 初始化
    • 更新與維護
    • 基礎(chǔ)組件接入

1.基礎(chǔ)組件介紹

小程序基礎(chǔ)組件基于每日優(yōu)鮮主商城小程序業(yè)務(wù)實踐演變而來。

基礎(chǔ)組件的名稱為：mini_app_base_module。

基礎(chǔ)組件的項目地址為：https://github.com/sahadev/mini_app_base_module。

2.基礎(chǔ)組件的結(jié)構(gòu)與作用

我們理想的項目結(jié)構(gòu)應(yīng)該是這樣的：

也就是說，合理的項目結(jié)構(gòu)應(yīng)該講究層的概念，各個層之間是絕對分離的。上下層彼此通過開放接口相互通信，杜絕跨層訪問。也就是說不應(yīng)該使業(yè)務(wù)組件直接訪問RuntimeFrameworkApi層，頁面不應(yīng)該直接訪問基礎(chǔ)組件層等等。而mini_app_base_module正是處于第三級的基礎(chǔ)組件層。

mini_app_base_module基礎(chǔ)組件提供的功能有：

baseApplication：為整個應(yīng)用提供了與運行平臺隔離的環(huán)境，并做了運行時保護機制，為后期接入第三方SDK提供統(tǒng)一入口。目前的功能有：全局變量管理、setData方法執(zhí)行校驗、頁面常用的各種狀態(tài)方法等。

baseMonitorManager：用于為運行時API提供監(jiān)控。具體實現(xiàn)需要業(yè)務(wù)組件提供網(wǎng)絡(luò)訪問實現(xiàn)。

baseNetRequestManager：用于發(fā)起網(wǎng)絡(luò)請求。業(yè)務(wù)組件的埋點、監(jiān)控、業(yè)務(wù)網(wǎng)絡(luò)訪問都需要通過它進行訪問。

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

baseUtils：提供調(diào)試模式管理、日志輸出、UUID創(chuàng)建、字符串格式化等基礎(chǔ)工具。

performanceUtil：性能調(diào)試工具，用于方法執(zhí)行速度的性能調(diào)試。

thirdApi：提供除網(wǎng)絡(luò)訪問外的運行時api。

thirdNetApi：用于訪問運行時網(wǎng)絡(luò)api。

3.基礎(chǔ)組件的接入方法

基礎(chǔ)組件了解了，該怎么接入它呢？

初次引入

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

引入后，將在項目中產(chǎn)生兩個文件：

.gitmodulesmini_app_base_module

初次引入的開發(fā)者需要將這兩個文件/文件夾commit并push。

初始化

在完成引入之后，基礎(chǔ)組件的代碼并沒有存在與項目中，還需要進行初始化操作：git submodule update --init --rebase。小程序開發(fā)團隊的每位開發(fā)者都需要執(zhí)行一次。

更新與維護

進行以上操作之后，項目中會多出一個文件夾mini_app_base_module以及一個文件.gitmodules。當mini_app_base_module有更新或者有更改時，都需要進入mini_app_base_module文件夾中單獨進行fetch、rebase操作或commit push操作。

基礎(chǔ)組件接入

如果順利完成了引入，則開始進行接入操作。基礎(chǔ)組件功能的使用視業(yè)務(wù)而定。但接入BaseApplciation是必須要做的。

1.在業(yè)務(wù)代碼中創(chuàng)建好application.js文件，application.js將作為業(yè)務(wù)組件的全局管理器，需要在application.js添加如下代碼：

// Application 全局管理入口 const {MFApp, MFPage, getApplication, registObserver } = require('./mini_app_base_module/baseApplication'); ================== //視業(yè)務(wù)情況而定的業(yè)務(wù)代碼 ================= module.exports = {MFApp, MFPage, getApplication }

2.在app.js中引入application:

const { MFApp } = require('./application');//將App方法調(diào)用替換為MFAppApp(param) => MFApp(param);

3.在對應(yīng)的頁面中引入application:

// 示例 pages/mainPages/home/home.jsconst { getApplication, MFPage } = require('../../../application');const app = getApplication();//將Page方法的調(diào)用替換為MFPagePage(param) => MFPage(param)

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

在完成以上基本接入之后，后續(xù)可視情況而定完善基礎(chǔ)組件的其它功能。

每日優(yōu)鮮主商城小程序經(jīng)過大量的版本迭代之后，已經(jīng)到了不得不重構(gòu)的階段。該基礎(chǔ)組件也正是基礎(chǔ)主商城小程序重構(gòu)的設(shè)計思路進行實現(xiàn)的。多個新業(yè)務(wù)小程序項目已經(jīng)在此基礎(chǔ)之上進行了實踐，并且已經(jīng)實現(xiàn)了大量的可共用的組件，但這些組件還需要與業(yè)務(wù)代碼進行拆分，請大家關(guān)注后續(xù)進展，也希望大家可以一起參與進來完善壯大這個基礎(chǔ)組件。

總結(jié)

以上是生活随笔為你收集整理的每日优鲜小程序基础组件介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。