微信小程式初始化專案架構

肥仔快樂水發表於2020-04-06
微信小程式架構

好維護的專案需要一個好的架構開始，下面的架構是我根據七個微信小程式專案總結

微信小程式初始化專案架構

開發者新建專案

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

微信小程式初始化專案架構

使用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 可以包含一組屬性、資料、生命週期函式和方法。元件引用它時，它的屬性、資料和方法會被合併到元件中，生命週期函式也會在對應時機被呼叫。 每個元件可以引用多個 behavior ，behavior 也可以引用其他 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方式實現)

重寫封裝中(待定)...

專案工具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>
複製程式碼

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

待更新中

styles全域性樣式

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

微信小程式初始化專案架構

githua專案地址

github.com/250786898/w…

相關文章