Platformization of 58 Anjuke Mini Programs: Multi‑Program Architecture, Development Practices, and Performance Optimization

The 58 Anjuke mini‑program team faced the need to support four different mini‑programs (WeChat, Baidu, 58, and quick‑app) while keeping development resources stable. To address this, they introduced a "line development" model and launched the "Mini‑Program Puzzle" project to create a unified host environment.

Background : With decreasing mobile internet traffic, mini‑programs became a new growth channel. The team needed to enable simultaneous development across platforms, reduce duplication, and support future platforms.

Current Situation and Design : Two main options were considered – scaling resources per platform (costly) or unifying the tech stack (impractical). The chosen solution was a gradual refactor that introduced a common host layer, providing unified APIs and capabilities for all mini‑programs.

Platform Construction : Supported both plugin and sub‑package integration for WeChat and Baidu. Defined common capabilities such as account system and micro‑chat integration. Standardized API signatures and documentation.

Technical Selection : After evaluating Taro, WePY, uni‑app, mpvue, and others, Taro was chosen for its incremental migration ability, React experience, dynamic/conditional compilation, stable ecosystem, and conversion tools.

Code Configuration (package scripts): { "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" } }

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

Define constants for conditional compilation: const config = { defineConstants: { PLATFORM, // anjuke or 58 PLATFORM_ABBR, // short name RUN_END, // weapp, swan, quickapp IS_AJK, // anjuke flag IS_WUBA, // 58 flag IS_WEAPP, // wechat flag IS_SWAN, // baidu flag IS_QUICK_APP // quick‑app flag } };

Skin Differentiation : Theme colors are extracted to Sass variables and injected per platform during build, enabling easy skin switching.

API Adaptation : Domain names and common parameters are abstracted so the same front‑end code can request data from either Anjuke or 58 back‑ends. Example request: 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 => { /* handle */ });

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

Middle‑Layer for Platform Differences : A navigation helper abstracts plugin vs. sub‑package routing differences. 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); } };

Performance Optimization : Reduced package size (CDN images, code pruning, lazy loading), optimized first‑screen requests, and minimized setData calls. Resulting metrics showed noticeable drops in download and render times.

Conclusion and Outlook : Over six months, the team unified WeChat, Baidu, and quick‑app mini‑programs, enabling seamless business migration, faster releases, and significant efficiency gains. Future work includes continued performance tuning, monitoring, and expanding the platform to new mini‑program ecosystems.