每日優鮮小程序基礎組件介紹

• • 1.基礎組件介紹
  • 2.基礎組件的結構與作用
  • 3.基礎組件的接入方法
  • • 初次引入
    • 初始化
    • 更新與維護
    • 基礎組件接入

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 進行引入。

引入后，將在項目中產生兩個文件：

.gitmodulesmini_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方法調用替換為MFAppApp(param) => MFApp(param);

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。