背景

在提效、服務進階的大背景下(xià)，為了讓同一支團隊，把一個(gè)業(yè)務做精做深，提高研發效率，HBG的産研團隊，進行了新的劃分：分線開發。

分線開發以後，安居客二手房(fáng)前端團隊要維護小程序從 1 變成 4 個(gè)。

現狀分析與設計

小程序七巧闆架構圖

小程序平台化建設

圖左是首頁，圖右是二手房(fáng)房(fáng)源列表

小程序下(xià)載耗時

小程序初次渲染耗時

6、 規範化、流程化

二手房(fáng)業(yè)務跨平台開發

随着平台化的标準化、統一和(hé)完善，不難看出，隻要58二手房(fáng)小程序也接入标準的宿主接口，那麼二手房(fáng)業(yè)務要适配的小程序的能力基本上就統一了，接下(xià)來隻需要考慮業(yè)務的實現即可(kě)。

圖左58二手房(fáng)房(fáng)源列表，圖右安居客二手房(fáng)房(fáng)源列表

通(tōng)過以上圖片對比，我們發現業(yè)務邏輯差異較大，想要同步開發還存在不少(shǎo)困難，經過與産品、UED一起溝通(tōng)協商(shāng)，58、安居客保證頁面結構統一，支持業(yè)務、皮膚差異性。借助Taro支持多小程序轉換，考慮如(rú)何實現定制皮膚與實現業(yè)務差異化即可(kě)。整體設計如(rú)下(xià)：

打包和(hé)集成

{
  "scripts": {
    "build:weapp": "taro build --type weapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "build:anjuke": "cross-env WEAPP=anjuke && npm run build:weapp",
    "dev:anjuke": "cross-env WEAPP=anjuke && npm run dev:weapp"
  }
}

然後在config/index.js裡面利用環境變量加載對應小程序的自定義配置，具體代碼代碼如(rú)下(xià)：

const WEAPP = process.env.WEAPP ? process.env.WEAPP : 'anjuke'
module.exports = function(merge) {
    return merge({}, config, require(`./${WEAPP}`));
};

此處 config 代表打包通(tōng)用配置以及默認配置。如(rú) babel、源碼目錄等。
為了讓每個(gè)平台、終端打包出來的代碼大小都是最優的，利用配置defineConstants 屬性配置編譯時的全局變量，從而實現小程序按照平台、終端、功能差異上實現條件編譯。我們的實踐是按照業(yè)務平台、平台屬性、小程序終端做了劃分：

const config = {
    defineConstants: {
        PLATFORM, // 網站(zhàn)平台 anjuke 或 58
        PLATFORM_ABBR, // 小程序名字簡寫，用來區分同平台同類型小程序
        RUN_END, // 運行端 weapp、swan、quickapp
        
        IS_AJK, // 是否是 anjuke
        IS_WUBA, // 是否是 58

        IS_WEAPP, // 是否是 微信
        IS_SWAN, // 是否是 百度
        IS_QUICK_APP // 是否是 快應用
    }
}

在編譯的時候，根據目标小程序的特性，為上面變量注入對應的值。
2） 皮膚差異化
二手房(fáng)業(yè)務要同時支持58同城、安居客兩個(gè)平台。二者之間頁面結構是一緻的，但各自有些主題色，我們将主題色提取成Sass變量，在編譯打包時，按照平台引入平台主題色，從而達到換膚的功能。比如(rú)在安居客小程序打包是通(tōng)過plugins引入安居客主題色：

const path = require("path");
module.exports = {
    plugins: {
        sass: {
            resource: [
                "src/scss/ajktheme.scss"
            ],
            projectDirectory: path.resolve(__dirname, "..")
        }
    }
};

import { fetchList } from "./api";
fetchList({
    page: this.list.page,
    page_size: PAGE_SIZE,
    user_id: userInfo.userId || "",
    open_id: userInfo.openId || "",
    union_id: userInfo.udid || "",
    ...this.filterOptions
}).then(res => {
    // do some thing
})

然後我們在 api.js 底層針對58、安居客平台适配一下(xià)API接口域名，代碼如(rú)下(xià)：

import { base } from './config';
const urlBase = isOldAjk => {
  if (IS_WUBA) return base.wbBase;
  if (isOldAjk) return base.oldAjkBase;
  if (IS_AJK) return base.ajkBase;
};

通(tōng)過API 适配平台、業(yè)務邏輯的差異，使前端邏輯在多小程序之間保持獨立、統一，從而達到多小程序平移的目的，前端專注于數據展示和(hé)交互即可(kě)。

export const goToPage = (wx, params, type) => {
    if (MAIN.Common.isWubaPlugin()) {
        let isObject = typeof params === 'object';
        let entry = isObject ? params : { url: params };
        entry.url = `plugin-private://${ pluginId }` + entry.url;
        MAIN.Common.goToPage(wx, entry, type);
    } else {
        MAIN.Common.goToPage(wx, params, type);
    }
};

總結和(hé)展望

回顧過去，通(tōng)過半年多技術(shù)和(hé)業(yè)務的升級和(hé)統一。安居客實現了微信、百度、快應用等小程序的平台化，支持房(fáng)産垂直業(yè)務在多小程序上實現無縫平移，可(kě)以快速落地生成更多的小程序，同時二手房(fáng)核心業(yè)務完成在多小程序的同步開發，大幅度的提升了小程序開發效率，在小程序的流量風口上為業(yè)務落地做好後勤保障。
接下(xià)來我們會持續優化小程序性能、完善性能監控、JS錯誤監控等。擁抱公司小程序協同項目，持續完善安居客小程序平台建設，為業(yè)務快速接入、落地做好準備。

寫到最後

安居客小程序實現平台化以及實現二手房(fáng)核心業(yè)務重構與順利落地，離(lí)不開其他前端、後端、QA等兄弟團隊的支持與積極配合，另一方面，在我們統一小程序基礎功能，如(rú)雲賬号、微聊等方面，也離(lí)不開 TEG同學的大力支持與幫助，因此在此對你(nǐ)們說一聲感謝。個(gè)人能力也有限，如(rú)果大家發現文(wén)章中(zhōng)的錯誤或者實現方案上的不完美，歡迎交流指正。

參考文(wén)獻

1、https://developers.weixin.qq.com/miniprogram/dev/framework/
2、https://nervjs.github.io/taro/docs/config.html
3、https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html

作者簡介

閱讀推薦