微信小程序初始化項目架構

NO IMAGE

好維護的項目需要一個好的架構開始,下面的架構是我根據七個微信小程序項目總結

微信小程序初始化項目架構

開發者新建項目

該架構未使用雲開發,需要雲開發額外勾選

微信小程序初始化項目架構

使用npm

從小程序基礎庫版本 2.2.1 或以上、及開發者工具 1.02.1808300 或以上開始,小程序支持使用 npm 安裝第三方包。
首先我們需要初始化項目包,可以看到項目根目錄生成了包配置文件package.json

npm init -y

使用vant-ui

使用ui框架可以幫助我們提高開發效率,重複造輪子。Vant-Weapp框架就是一個不錯的選擇。

  • 步驟一 通過 npm 安裝
# 通過 npm 安裝
npm i @vant/weapp -S --production
  • 步驟二 構建 npm 包
    打開微信開發者工具,點擊 工具 -> 構建 npm,並勾選 使用 npm 模塊 選項,構建完成後,即可引入組件

behaviors公用行為

behaviors 是用於組件間代碼共享的特性,類似於vue中的“mixins”。每個 behavior 可以包含一組屬性、數據、生命週期函數和方法。組件引用它時,它的屬性、數據和方法會被合併到組件中,生命週期函數也會在對應時機被調用。 每個組件可以引用多個 behaviorbehavior 也可以引用其他 behavior

詳細的參數含義和使用請參考 Behavior 參考文檔。
在behaviors目錄下新建testBehavior.js,一般我會根據模塊創建behavior,像用戶模塊會新建userBehavior.js

<!--behaviors/testBehavior.js-->
export default Behavior({
properties: {
},
data: {
testData: {}
},
methods: {
/**
* @description 測試方法
*/
testMethods () {
}
}
})

components公用組件

全局公用組件components

該目錄存放著項目中公共的組件,包括一些彈出層,加載組件等。組件以大駝峰命令,組件中可以再抽離各個小組件形成。

微信小程序初始化項目架構

頁面的業務組件components

每個頁面組件應該由不同的小組件組件,這樣拆成各個小組件開發,有助於我們維護開發。

微信小程序初始化項目架構

頁面引入組件

{
"usingComponents": {
"index-child": "./components/IndexChild/index",
"index-child2": "./components/IndexChild2/index"
}
}

頁面由各個組件組件,分別處理組件的業務邏輯

<!--index.wxml-->
<view class="container">
<index-child />
<index-child2 />
</view>

config配置

在config目錄新建index.js配置項目所需的要配置

const BASE_URL = 'https://shop.freshlejia.com/apiStore/'  //接口請求的基本路徑
export default {
BASE_URL,
UPLOAD_URL: `${BASE_URL}api/common/upload` //上傳服務器的路徑
}

icons目錄配置iconfont字體

  • 步驟一:在iconfont.cn新建項目組

    微信小程序初始化項目架構

  • 步驟二:添加項目所需的icon,下載相對對應的文件

    微信小程序初始化項目架構

  • 步驟三: 項目引入相關文件
    在根目錄新建icons,存放剛才下載的文件嗎,修改iconfont.css文件成iconfont.wxss

微信小程序初始化項目架構

全局項目文件中引入

/**app.wxss**/
@import './icons/iconfont';

images圖片資源

存放圖片資源,也可按模塊新建子目錄存放。小圖標可以轉base64,具體項目根據自己需求來。

微信小程序初始化項目架構

utils工具包

utils目錄存放和項目有關的工具包文件

使用http請求庫flyio

小程序提供的官方提供了request請求,但是我們需要封裝成我們項目使用的請求才行,因為我們總會需要全局請求攔截處理,全局請求響應處理等,我們能不能在小程序中像vue項目中使用axios一樣,fiyio工具包就可以幫助我們使用這個問題。我們可以有以下兩種方式實現選擇(推薦後者面向對象):

封裝請求包對象

  • 步驟一:下載flyio包存放在utils

    微信小程序初始化項目架構

  • 步驟二:封裝http.js文件

<!--utils/http.js-->
import config from '../config/index'
const Fly = require('./flyio/index')
const fly = new Fly
//定義請求的基本路徑
fly.config.baseURL = config.BASE_URL
//請求攔截器
fly.interceptors.request.use(request => {
//攔截處理
request.headers = { //請求頭
"Content-Type": "application/x-www-form-urlencoded",
}
return request
})
//響應攔截
fly.interceptors.response.use(response => {
//攔截處理操作
return response
})
export const api = {
//返回結果的狀態碼
CODE: {
SUCCESS: 200000, //調用成功
OPTIONS_ERROR: 5000100 //參數錯誤
},
get: (params) => {
return fly.get(params.url, params.data)
},
post: (params) => {
return fly.post(params.url, params.data, params.options)
}
}

封裝請求基類(ES6的class方式實現)

models目錄新建request目錄,創建request.js基類文件,代碼如下

import Fly from '../../utils/flyio/index'
import config from '../../config/index'
import RequestCode from './requestCode'
const fly = new Fly()
class RequestModel{
constructor () {
this.initFlySetting()
}
/**
* @description 初始化Flyio配置,全局的攔截處理
*/
initFlySetting () {
//定義請求的基本路徑
fly.config.baseURL = config.BASE_URL
//請求攔截器
fly.interceptors.request.use(request => {
//攔截處理
request.headers = { //請求頭
"Content-Type": "application/x-www-form-urlencoded",
}
return request
})
//響應攔截
fly.interceptors.response.use(response => {
//攔截處理操作
console.log('RequestCode',response)
if(response.data.code == RequestCode.CODE.OPTIONS_ERROR) {
//全局錯誤處理
}
return response.data
})
}
/**
* 
* @param {object} params 封裝的get請求: url:請求地址  data:請求數據
*/
getRequest (params)  {
return fly.get(params.url, params.data)
}
/**
* 
* @param {object} params 封裝的post請求: url:請求地址  data:請求數據 options:請求額外參數
*/
postRequest (params)  {
return fly.post(params.url, params.data, params.options)
}
}
export default RequestModel

創建全局請求相應狀態碼可以方便我們定位問題,request目錄下創建requestCode.js文件

class RequestCode { 
//請求狀態CODE碼
static CODE = {
SUCCESS: 2000000, //調用成功
OPTIONS_ERROR: 5000100 //參數錯誤
...
}
}
export default RequestCode

在其他模塊下只要繼承該請求基本,封裝相對應的數據請求即可,如用戶模塊下models/user.js

import RequestModel from './request/request'
class UserModel extends RequestModel {
constructor () {
super()
}
test () {
return this.postRequest({
url: 'index/getAdList.json'
})
}
}
export default UserModel

頁面中使用該模塊

import UserModel from "../../models/user"
const user = new UserModel()
async onLoad  () {
const res =await user.test()
if(res.status == RequestCode.CODE.SUCCESS) {
console.log('getSuccesss',res)
}
},

項目工具tool處理函數文件

新建tool.js文件,編寫項目工具小函數

const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatNumber: formatNumber
}

項目業務相關工具函數文件

新建index.js文件,編寫業務相關函數

/**
* @description 檢查是否需要更新小程序
*/
export function checkUpdateApp() {
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 請求完新版本信息的回調
if (res.hasUpdate) {
console.log('res.hasUpdate====')
updateManager.onUpdateReady(function () {
wx.showModal({
title: '發現新版本',
content: '升級至新版本,享受最新最全的活動內容',
showCancel: false,
success: function (res) {
// res: {errMsg: "showModal: ok", cancel: false, confirm: true}
if (res.confirm) {
// 新的版本已經下載好,調用 applyUpdate 應用新版本並重啟
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下載失敗
wx.showModal({
title: '已經有新版本了喲~',
content: '新版本已經上線啦~,請您刪除當前小程序,重新搜索打開喲~',
showCancel: false
})
})
}
})
}
}

models模塊封裝類

該模塊主要是採用MVC的M層,處理數據層面,主要包括相關的http請求等。

import { api } from '../utils/http'
class UserModel{
/**
* @description 獲取當前登錄的用戶信息
*/
getUserInf (id) {
return api.post({
url: 'store/user/info',
data:{
id
}
})
}
}
export default UserModel

pages視圖層

該模塊主要是採用MVC的V層,建議按照模塊分目錄解構,比如用戶模塊的業務全部建議在user文件夾下。

微信小程序初始化項目架構

wxs過濾器

項目中我們總會需要對數據進行過濾修改,我們就需要在項目中使用wxs過濾器

<!--order.wxs-->
/**
* @description 將整數保留兩位小數,若為整數或一位小數則補零
* @param x 
*/
var keepTwoDecimals = function(x) {
var f = Math.round(x * 100) / 100;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
}
module.exports = {
keepTwoDecimals:keepTwoDecimals
}

頁面組件中使用wxs

<!-- order.wxml -->
<wxs src="../../../../../filter/store.wxs" module="tools"></wxs>
<view class="statistics-content-total__count">
{{earnings.earningsAllCount ? tools.keepTwoDecimals(earnings.earningsAllCount) : 0.00}}
</view>

擴展小程序api支持promise

小程序官方現在提供的api接口是通過回調函數的方式處理,但是我們可以藉助相當於的npm工具實現api支持promise,這樣我們的代碼就可以不用擔心單調地獄並且可以很優雅的寫。

<!--現在官方提供的寫法-->
wx.getSystemInfo({
success (res) {
console.log(res)
}
})

首先需要安裝相當應的npm,安裝完記得在開發者工具構建npm

npm install --save miniprogram-api-promise

utils/index.js業務工具包添加相當於的處理函數

import { promisifyAll } from 'miniprogram-api-promise';
/**
* @description promise化小程序api接口
* @returns {object} promise化後api集合
*/
export function promiseWXApi() {
const wxp = {}
// promisify all wx's api
promisifyAll(wx, wxp)
return wxp
}

在小程序入口(app.js)調用該函數,存取到全局globalData數據中中

//app.js
import { promiseWXApi } from './utils/index'
App({
onLaunch: function () {
this.setPromiseForWXApi()
},
globalData: {
//全局數據管理
wxp: {} //全局微信api-Promise化管理器
},
/**
* @description 設置全局promise化微信小程序api
*/
setPromiseForWXApi () {
this.globalData.wxp = promiseWXApi()
}
})

頁面中使用promise化Api

const { globalData } =  getApp()
Page({
data: {
},
onLoad  () {
globalData.wxp.getSystemInfo().then(res => {
console.log('getSystemInfo2',res)
})
},
})

當然也可以使用async/await寫法,更加優雅

async onLoad  () {
const res = await globalData.wxp.getSystemInfo()
console.log('res',res)
},

vscode插件預處理器轉wxss輔助開發

less

在開發微信小程序時,寫css會比較麻煩,效率不高,最好的辦法就是使用less或者sass,可以使用gulp等配置編譯,但是使用此法又略顯麻煩,最好的辦法就是使用Vscode裝一個less轉wxss插件, Easy LESS

微信小程序初始化項目架構

1.在Vscode中搜索easy less 插件並安裝;
2.在項目下建一個.vscode文件夾,並在.vscode文件夾下建一個settings.json,settings.json 中配置內容如下:

"less.compile": {
"outExt": ".wxss"
}

3.outExt 參數為導出文件名,默認為.css,可以配置為.wxss,其他配置項可查看文檔
也可以配置文件生成目錄:

"less.compile": {
"out": "${workspaceRoot}\\css\\css\\"
}

${workspaceRoot}代表當前項目的根目錄,後面路徑自行配置。

sass

  • vscode安裝Easy Sass插件

    微信小程序初始化項目架構

  • settings.json配置sass

...
{
"easysass.formats":[
{
"format": "expanded",  // 沒有縮進的、擴展的css代碼
"extension": ".wxss"  //轉化的後綴名
},
]
}

styles全局樣式

項目中我們需要很多公共的樣式,結合less可以幫助我們提高開發的效率

微信小程序初始化項目架構

API Mock

為了讓開發者更方便地開發小程序,開發者工具提供了 API Mock 的能力,可以模擬部分 API 的調用結果。Mock數據可以讓我們不必等待服務端的接口,提前完成接口對接工作。微信官方開發者工具已經支持,開發文檔

分包加載

某些情況下,開發者需要將小程序劃分成不同的子包,在構建時打包成不同的分包,用戶在使用時按需進行加載。具體需不要分包,根據自己的項目情況來,建議是項目一開始就要分模塊分包,以後後期項目拓展太大超過2M,官方分包文檔

github項目地址

github.com/250786898/w…

相關文章

入行AI,程序員為什麼要學習NLP?

不懂Webpack4的前端不是好工程師(基礎篇)

vscode配置使vue項目支持斷點調試

小程序自定義導航欄,兼容適配所有機型(附完整案例)