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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

thirdApi：提供除網(wǎng)絡(luò)訪問(wèn)外的運(yùn)行時(shí)api。

thirdNetApi：用于訪問(wèn)運(yùn)行時(shí)網(wǎng)絡(luò)api。

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

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

初次引入

在項(xiàng)目中通過(guò)命令git submodule add https://github.com/sahadev/mini_app_base_module.git 進(jìn)行引入。

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

.gitmodulesmini_app_base_module

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

初始化

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

更新與維護(hù)

進(jìn)行以上操作之后，項(xiàng)目中會(huì)多出一個(gè)文件夾mini_app_base_module以及一個(gè)文件.gitmodules。當(dāng)mini_app_base_module有更新或者有更改時(shí)，都需要進(jìn)入mini_app_base_module文件夾中單獨(dú)進(jìn)行fetch、rebase操作或commit push操作。

基礎(chǔ)組件接入

如果順利完成了引入，則開(kāi)始進(jìn)行接入操作。基礎(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.在對(duì)應(yīng)的頁(yè)面中引入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)過(guò)大量的版本迭代之后，已經(jīng)到了不得不重構(gòu)的階段。該基礎(chǔ)組件也正是基礎(chǔ)主商城小程序重構(gòu)的設(shè)計(jì)思路進(jìn)行實(shí)現(xiàn)的。多個(gè)新業(yè)務(wù)小程序項(xiàng)目已經(jīng)在此基礎(chǔ)之上進(jìn)行了實(shí)踐，并且已經(jīng)實(shí)現(xiàn)了大量的可共用的組件，但這些組件還需要與業(yè)務(wù)代碼進(jìn)行拆分，請(qǐng)大家關(guān)注后續(xù)進(jìn)展，也希望大家可以一起參與進(jìn)來(lái)完善壯大這個(gè)基礎(chǔ)組件。

總結(jié)

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

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