Frontend Development 15 min read

Cross‑Platform Mini‑Program Migration Tool (wto‑cli), Compilation Framework (wbmp), UI Library (wbui) and Cloud SDK (mp‑scf‑sdk) Overview

This article introduces the 58 Mini‑Program Cloud project, presenting the wto‑cli migration tool, the wbmp cross‑platform compilation framework, the wbui UI component library, and the mp‑scf‑sdk cloud development SDK, detailing their architecture, core features, migration process, and practical code examples for multi‑platform mini‑program development.

58 Tech
58 Tech
58 Tech
Cross‑Platform Mini‑Program Migration Tool (wto‑cli), Compilation Framework (wbmp), UI Library (wbui) and Cloud SDK (mp‑scf‑sdk) Overview

Introduction

Mini‑programs are booming, with platforms such as WeChat, Baidu, Alibaba, and Toutiao offering their own ecosystems. While they provide new traffic channels, they also increase development and maintenance costs.

Three core problems to solve for multi‑platform deployment:

How to migrate an existing WeChat mini‑program to other platforms at low cost?

How to architect, design, and develop new projects that fit the new ecosystems?

How to transfer WeChat mini‑program cloud development capabilities to other platforms?

To address these pain points, we launched the 58小程序云 project, which provides a low‑cost migration tool ( wto-cli ) and a cross‑platform development framework with UI component library and cloud SDK.

Cross‑Platform Migration Tool (wto‑cli)

The strongest demand from business lines is cross‑platform migration. Re‑developing separate code for each platform is costly, while converting code to a cross‑platform framework (e.g., wepy, mpvue, taro) incurs high conversion costs and potential bugs.

Our wto-cli tool enables near‑zero‑cost migration of WeChat mini‑programs to other platforms.

Processing flow:

The main steps are:

Static resource copying – copies non‑code assets to the target directory.

Code conversion – transforms templates, styles, and scripts to be compatible.

Lint checking – detects cross‑platform compatibility issues and suggests solutions.

For Baidu and Toutiao mini‑programs, the main challenges are naming differences, specific conventions, and missing features. For Alibaba mini‑programs, the differences are larger, requiring additional interface and architecture adaptations.

Typical Issues and Solutions

Componentization differences: Alibaba’s components are not fully isolated, causing parent styles to affect children. wto-cli solves this by using postcss for modularizing styles and xmldom / DOMParser to replace class names in templates, binding them via hashed paths.

Interface/property mismatches: Alibaba component lifecycle functions differ from WeChat’s. wto-cli injects Alibaba lifecycle functions that internally call the corresponding WeChat functions, avoiding simple regex replacements.

Additional problems such as inconsistent lifecycle/event parameters and unsupported methods like triggerEvent are also handled, with lint warnings guiding developers.

Core Advantages

Extremely low migration cost – a single command performs the migration.

Non‑intrusive to source code – does not affect future upgrades.

High readability of generated code – easy debugging and issue location.

Horizontal extensibility – conversions for each platform are isolated.

Some platform‑specific features (e.g., Toutiao’s selectComponent ) cannot be automatically handled; they are flagged by lint warnings.

Cross‑Platform Compilation Framework (wbmp)

While wto-cli solves migration, new projects still face limitations in native WeChat development (low componentization, no third‑party modules, hard to compile to H5). A cross‑platform compilation framework addresses these issues.

Existing frameworks have drawbacks:

wepy (Tencent) – many bugs, insufficient testing.

mpvue (Meituan) – Vue‑based, flexible but hard to converge.

taro (JD) – React‑native‑like, supports many targets but large and complex.

We built wbmp on top of wepy , upgrading it to support Baidu/Toutiao compilation, fixing H5 and other platform bugs, and adding a highly customizable UI component library.

Key enhancements include support for Baidu/Toutiao compilation and extensive bug fixes, leveraging experience from wto-cli .

Cross‑Platform UI Components (wbui)

Native WeChat development suffers from low componentization and lack of reusable third‑party components. wbui is a cross‑platform UI library built on wbmp , offering rich colors, sizes, and customization mechanisms.

Module breakdown:

base(sass) – defines common mixins and variables for easy theming.

common(sass) – provides generic CSS classes (colors, backgrounds, borders).

component(sass) – defines component‑specific CSS classes.

component(wpy) – implements reusable components using the above styles.

Core advantages:

Cross‑platform – a single UI set works across all mini‑program platforms and H5.

Flexible usage – can import only base styles or individual components to control bundle size.

Highly customizable – almost all values are variable‑driven for easy configuration.

Extensible – designers can modify component definitions and integrate changes via build tools.

Cross‑Platform Cloud Development SDK (mp‑scf‑sdk)

WeChat’s cloud functions (FAAS) lowered development cost but cannot be smoothly migrated to other platforms. We created the 58 FAAS platform and the mp‑scf‑sdk to provide unified cloud function, database, and file services.

Cloud Function Service

Functions run on the 58 FAAS platform, handling scaling automatically. Example usage:

// Assume a cloud function `add` defined as
exports.main = (event, context) => {
  return event.a + event.b + event.c;
};

// Call the function via mp‑scf‑sdk
import cloud from 'mp-scf-sdk';
cloud.callFunction({
  name: 'add',
  data: {a: 1, b: 2}
}).then(sum => {
  console.log(sum); // 3
});

Cloud Database Service

The 58 FAAS platform offers a NoSQL MongoDB service. mp‑scf‑sdk wraps it with three core classes: Database , Collection , and Document . Example:

import cloud from 'mp-scf-sdk';

// Get Database instance
const database = cloud.database({appName: 'demo'});

// Get a Collection
const collection = database.collection('user');

// Get a specific record
collection.doc('nhfbwr2389238923').get().then(data => {
  console.log(data);
}, err => {
  console.log(err);
});

Cloud File Service

The WOS (distributed object storage) system provides file storage, CDN acceleration, video transcoding, and watermarking. mp‑scf‑sdk offers a simple upload interface, e.g.:

import cloud from 'mp-scf-sdk';

wx.chooseVideo({
  success(res) {
    cloud.uploadFile({
      filePath: res.tempFilePath
    });
  }
});

Conclusion

The 58小程序云 project effectively solves a series of pain points in mini‑program development. wto-cli is already used in production, converting 58微聊 and 神奇江湖 mini‑programs to Baidu, Toutiao, and Alibaba platforms. wbmp , wbui , and mp‑scf‑sdk together boost development efficiency and will shine in future product iterations.

frontendMigrationcross-platformMini-ProgramUI librarycloud-sdk
58 Tech
Written by

58 Tech

Official tech channel of 58, a platform for tech innovation, sharing, and communication.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.