微信小程式開發優化

一、開發優化一

1.使用Vant Weapp

1.1 什麼是Vant Weapp

Vant Weapp官網鏈接

• Vant Weapp是有贊前端團隊開源的一套小程式UI組件庫，助力開發者快速搭建小程式應用。它所使用的是MIT開源許可協議，對商業使用比較友好。

1.2 安裝Vant Weapp組件庫

安裝快速上手

• 在小程式項目中，安裝組件庫步驟如下：
  • npm i @vant/weapp -S --production
  • 構建npm包
  • 修改app.json，將 app.json 中的 "style": "v2" 移除

1.3 使用Vant Weapp組件庫

使用快速上手

• 引入組件

  • 以 Button 組件為例，只需要在app.json或index.json中配置 Button 對應的路徑即可。

  • 所有組件文檔中的引入路徑均以 npm 安裝為例，如果你是通過下載源代碼的方式使用 @vant/weapp，請將路徑修改為項目中 @vant/weapp 所在的目錄。

    // 通過 npm 安裝
    // app.json
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
    

• 使用組件

  • 引入組件後，可以在 wxml 中直接使用組件

    <van-button type="primary">按鈕</van-button>
    

1.4 使用css變數定製主題樣式

定製主題

• 在app.wxss中，寫入CSS變數，即可對全局生效。

二、開發優化二

1.API的Promise化

1.1 什麼是API的Promise化

• API Promise化，指的是通過額外的配置，將官方提供的、基於回調函數的非同步API，升級改造為基於Promise的非同步API，從而提高代碼的可讀性、維護性，避免回調地獄的問題。

1.2 實現API的Promise化

• 在小程式中，實現API Promise化主要依賴於 miniprogram-api-promise 這個第三方的npm包。它的安裝和使用步驟如下：

  • 安裝：npm install --save [email protected]

    // 在小程式入口文件中(app.js)，只需調用一次 promisifyAll() 方法
    // 即可實現非同步API的Promise化
    import { promisifyAll } from 'miniprogram-api-promise'
    const wxp = wx.p = {}
    promisifyAll(wx, wxp)
    

  • 註：安裝完每個包之後需要重新構建，在對應文件夾下強制刪除miniprogram_npm，然後在工具中重新構建npm。

1.3 調用Promise化之後的非同步API

// 頁面的 .wxml 結構
<van-button type="danger" bindtap="getInfo">vant按鈕</van-button>

// 在頁面的 .js 文件中，定義對應的事件處理函數
async getInfo () {
    const { data: res } = await wx.p.request({
        method: 'GET',
        url: 'https://www.escook.cn/api/get',
        data: {
            name: 'zs',
            age: 20
        }
    })
    console.log(res)
}

三、開發優化三

1.全局數據共用

1.1 小程式中的全局共用方案

1.2 小程式全局數據共用MobX步驟

參考資料一

參考資料二

四、開發優化四

1.分包

分包載入官網鏈接

五、提高微信小程式的應用速度的方法

1.小程式啟動載入性能

• 控制代碼包的大小
• 分包載入
• 首屏體驗（預請求，利用緩存，避免白屏，及時反饋）

2.小程式渲染性能

• 避免不當的使用setData
• 使用自定義組件
  • 自定義組件的更新並不會影響頁面上其他元素的更新