探索支付寶小程式：如何與前端工程結合？

  • 2019 年 12 月 31 日
  • 筆記

小程式的技術棧中，最吸引人的點莫過小程式專屬流量入口了，例如小程式收藏、小程式搜索。小程式作為一個全新的生態，上手開發會和一般的前端技術棧，有很大的差別。那麼小程式又如何和前端工程結合呢？

從研發痛點到小程式工程

痛點

第一階段——搭積木

原生的小程式工程和前端工程差異比較遠。官方文檔也只會教你如何使用小程式的基礎語法來開發。業務方時間排期緊，最重要的任務是將H5工程遷移至小程式。按照官方文檔的指示，用App、Page、Component的方式組織好程式碼，保持整個小程式App純度。此時，小程式的生命周期也局限於請求數據、處理、展示、交互。

第二階段——工程化

融合了小程式標準之後，開發者也可以向前端工程邁進。讓小程式更貼近團隊前端技術棧。包括對於特定業務模組，可以像Mini-UI一樣，獨立出功能型組件。對於複雜的小程式項目，可建立以SubApp的方式組織小程式工程。

小程式工程

為了讓小程式更能貼近日常開發的前端工程模式，下面列出小程式工程所需的一些重要工程配套。

狀態管理

狀態管理使小程式有了數據流，讓小程式真正的「活」起來。最原始的小程式多個Page之間、Page和App之間數據難以共享。藉助狀態管理，Page和App之間的數據可以打通。

在狀態管理中，我們使用 herculex 。而小程式官方將來也會推出官方的腳手架。如果只是想藉助狀態管理而不想讓它管理更新Data，也可以使用Redux和Mobx。只不過萬變不離其宗，小程式使用狀態管理後，結合小程式自身的特性，會有一些神奇的效果。

  1. 利用頁面保活更新數據 小程式如果兩個Page都打開過，在一定的時間內兩個頁面都會保活。如果有兩個Page同時監聽一個Store Data，用戶操作，更新了可視頁面Store Data，而在非可視頁面內的Store Data會被靜默更新，觸發渲染。這樣非可視頁面重新出現時，其實用戶已經看到了新的數據源渲染的頁面。
  2. 優化更新數據 小程式官方文檔中，有提到 小程式性能優化 ，而小程式訂製的狀態管理工具herculex已經幫開發者做掉了 this.setData 操作，開發者不用關心。

Mock方案

我們利用 Datahub 方案，Mock小程式的底層介面。

// datahub.config.js  module.exports = {  port: 5678,  store: require('path').join(__dirname, 'data'),  }
// package.json  "scripts": {    "datahub": "datahub server -c datahub.config.js",  },

Datahub 方案，在小程式的IDE開發環境下，可以通過 npm run datahub 先啟動Datahub，介面層通過 my.request 方式請求到Datahub平台。

// request  my.request({    url: `http://127.0.0.1:5678/data/#你的業務名#/${#你的介面名#}`,    method,    data: params,    dataType: 'json',    success: res => resolve(res.data),    fail: (res) => {      reject(res)      my.showToast({  type: 'exception',        duration: 3000,        content: 'DataHub 網路異常，請檢查 DataHub 配置',      })    },  })

在小程式中使用Datahub有下列幾個優點。

  1. 使用Datahub方案，Mock數據源不會被依賴跟隨構建打包。
  2. 場景切換，場景數據可共享，可以一鍵切換任意返回結果。
  3. Mock數據可以多人共享。

監控

小程式官方提供了監控的能力，這對業務來說非常重要，建議在程式碼中加上 my.reportAnalytics 監控。按照碼以內部的業務經驗來說，需要 my.reportAnalytic s所需要的地方如下：

  1. 介面報錯，try-catch
  2. 全局App onError
  3. 關鍵用戶行為，包括重要區塊曝光與點擊
  4. 其他關鍵業務模組 如果是上報錯誤的話，建議可以採用 Error 格式上報
new Error([message[, fileName[, lineNumber]]])

國際化多語言

//app.js  my.getSystemInfo({  success: res => {  this.globalData.i18n = require(`./i18n/${languageMap[res.language] || 'zh-CH'}.js`)    },  fail: () => {  this.globalData.i18n = require('./i18n/zh-CH.js')    },  })
//util.js  export function getText (key, defaultValue) {  return getApp().globalData.i18n[key] || defaultValue || key  }

使用：通過小程式App初始化中取得容器App語言資訊，完成多語言選擇，並保持在全局數據中。在需要地方，完成語言取用。

擴展

組件庫

按照業務的需要，可以自己定義一套類似mini-ui的組件，通過npm包的形式進行復用。

# shell  yarn add mini-program-component
// page.json  "usingComponents": {  "treasure-card": "mini-program-component/es/treasure-card/index",  }

SubApp

針對非常複雜的小程式，想對業務進行隔離但是又有共同的數據，可以將小程式中分割出不同的App模組。用SubApp的形式來組織。

.  ├── README.md  ├── app.acss  ├── app.js # App  ├── app.json  ├── package.json  ├── store # App Store  │   └── index.js  ├── subApp1 # Sub App 1  │   ├── components  │   ├── pages # Page 1  │   └── store # Sub App Store 1  └── subApp2      ├── components      ├── pages # Page 2      └── store  # Sub App Store 2

小程式生態建設

將小程式擴展到上圖中的生態，基本小程式也能有接近前端工程的能力。

對小程式未來的預測

小程式有以下兩個高潛價值方向。

跨端生態

小程式作為一個統一標準的技術，為各個業務線和各個客戶端上的應用能力互通打下了基礎。理想情況下，一套應用程式碼，可以部署到各個支援標準小程式的客戶端上。能較好地解決目前各個客戶端上技術棧不同導致的壁壘問題。如我們可以使用除H5以外的方案在其他不同客戶端上進行業務的開發，可以更好地將我們的業務進行多端外投。在小程式方向的技術建設上各個團隊也容易達成共識和形成共建合力。

外部生態

對於三方開發者，以小程式這樣輕量化的上層應用開發方式，可以快速地挖掘一批用戶日常的應用，通過這些貼合生活的應用，來快速地聚合吸引一批用戶。

VirMach 便宜 VPS

QNews

QNews