Mpx: Framework Đa Nền Tảng Của DiDi Cho Mini-Program
Mpx là framework đa nền tảng của riêng DiDi, biên dịch một codebase thành mini-program cho WeChat, Alipay, Baidu và các nền tảng khác, cộng bản Web và React Native cho iOS, Android và Harmony. Chọn Mpx nếu bạn đang phát triển cho hệ sinh thái mini-program ở Trung Quốc và muốn single-file component kiểu Vue thay vì viết tay ba file native mỗi màn hình; bỏ qua nếu không nhắm tới nhóm nền tảng này, vì tài liệu và cộng đồng Mpx chủ yếu tiếng Trung.
Mpx Là Gì?
Mpx là framework mã nguồn mở, đa nền tảng do DiDi xây dựng và duy trì, biên dịch một codebase kiểu Vue xuống thành mini-program cho WeChat, Alipay, Baidu, ByteDance, QQ và JD, cộng bản Web và app React Native cho iOS, Android và Harmony. Thay vì đưa một framework web vào chạy trong runtime mini-program, Mpx mở rộng cú pháp template gốc của từng nền tảng bằng trải nghiệm phát triển kiểu web, theo đúng thiết kế mà README mô tả.
Tính Năng Và Khả Năng Cốt Lõi
- ✓Dữ liệu reactive qua gán trực tiếp, cộng với watch và computed.
- ✓Hỗ trợ Composition API bên cạnh API kiểu options tiêu chuẩn.
- ✓Cú pháp template mở rộng: dynamic component, binding style/class, hàm xử lý sự kiện inline, two-way binding, và refs.
- ✓Runtime nhỏ gọn — README nói sau khi nén và gzip chỉ còn 14KB — đi kèm tối ưu kích thước bundle ở bước build.
- ✓Compiler dựa trên webpack5 với persistent caching, tương thích với mini-program native, và hỗ trợ xuất subpackage qua npm.
- ✓Phát triển theo mô hình single-file component (SFC), tương tự định dạng SFC của Vue.
- ✓Quản lý state theo chuẩn Vuex, hỗ trợ nhiều instance store cùng lúc và có gói store riêng theo phong cách Pinia.
- ✓Compile đa nền tảng: một codebase ra mini-program cho WeChat, Alipay, Baidu, ByteDance, QQ, JD, một target quick-app/Web, và React Native (iOS/Android/Harmony).
Bắt Đầu Với Mpx
Cài CLI toàn cục bằng `npm i -g @mpxjs/cli`, khởi tạo project bằng `mpx create mpx-project`, rồi `cd mpx-project && npm i`. Chạy `npm run serve` để phát triển hoặc `npm run build` để build production, sau đó mở thư mục nền tảng tương ứng bên trong `dist/` bằng công cụ dev của mini-program (như WeChat DevTools) để xem trước. Với target React Native, chọn template có hỗ trợ RN khi chạy `mpx create`, rồi dùng các script theo từng nền tảng như `npm run serve:ios`/`serve:android`/`serve:harmony` để phát triển và `npm run build:ios`/`build:android`/`build:harmony` để build production — README lưu ý tên script chính xác phụ thuộc vào những gì scaffold sinh ra. Sản phẩm RN thường nằm ở `dist/react-native/` hoặc theo quy ước riêng của project container RN bạn dùng.
Phát Triển Với Mpx: Ví Dụ Code
Ví dụ trong README là một single-file Mpx component: khối `<template>` dùng các directive kiểu WeChat (`wx:style`, `wx:for`/`wx:key`, `wx:class`, `bindtap`, `wx:model` cho two-way binding, `wx:ref`, và `<component is>` động), khối `<script>` gọi `createPage` từ `@mpxjs/core` với `data`, `computed`, `watch`, hàm xử lý sự kiện, và lifecycle hook `onReady`, cùng khối `<style lang="stylus">`. Cùng file đó kiểm tra `__mpx_mode__` để rẽ nhánh hành vi theo từng nền tảng target (`wx`, `ali`, `harmony`). Riêng với target React Native, Mpx dùng file conditional-compilation theo từng nền tảng — `.ios.mpx`, `.android.mpx`, `.harmony.mpx` — và README nói nếu thiếu file `android` hay `harmony`, build sẽ tự động fallback về bản `.ios` của file đó.
Vì Sao Chọn Mpx Để Phát Triển Đa Nền Tảng?
- ✓Single-file component với API kiểu Vue (data, computed, watch, method, lifecycle hook) thay vì phải tự nối tay ba file riêng của mini-program.
- ✓Runtime thực sự nhỏ — 14KB sau khi nén và gzip theo README — cộng với tối ưu kích thước build dựa trên webpack5 cho output đã compile.
- ✓Bám sát API native và mô hình component của từng nền tảng thay vì mô phỏng DOM trình duyệt bên trong runtime mini-program, đúng theo lý do thiết kế 'enhancement' mà README nêu, nhờ vậy component library và công cụ native sẵn có vẫn hoạt động.
- ✓Một đường xuất React Native duy nhất phủ cả iOS, Android và Harmony từ cùng source và cấu hình compile của Mpx, còn khác biệt giữa các nền tảng được xử lý qua file conditional compilation.
- ✓Giấy phép Apache-2.0.
- ✓Hỗ trợ TypeScript dựa trên ThisType để suy luận kiểu bên trong SFC, cùng công cụ unit test và E2E test được tài liệu hoá.
Những Điều Cần Cân Nhắc Với Mpx
- △Tài liệu, trang chủ chính thức, và các kênh hỗ trợ chính (nhóm WeChat và QQ) đều chủ yếu bằng tiếng Trung theo README — không có tài liệu tiếng Anh nào được nhắc tới trong các dữ kiện có ở đây.
- △Các script build React Native trong README được ghi là mang tính minh hoạ, vì 'tên script chính xác tuỳ theo những gì scaffold sinh ra', nên bề mặt CLI chính xác cho build RN chưa được chốt hẳn trong tài liệu.
- △Hỗ trợ Harmony chỉ tồn tại trong nhánh output React Native — README nói rõ đây không phải một target mini-program riêng biệt, nên nó là một biến thể của RN chứ không phải nền tảng độc lập ngang hàng.
- △Các chi tiết vận hành hàng ngày — deploy, CI, lịch phát hành version — không được README mô tả ngoài các lệnh quick-start.
- △Cộng đồng và hệ sinh thái bên thứ ba xung quanh Mpx nhỏ hơn nhiều so với những gì bạn tìm thấy quanh Vue hay React Native.
Ứng Dụng Thực Tế Của Mpx
- •Xây một codebase duy nhất chạy trên nhiều nền tảng mini-program (WeChat, Alipay, Baidu, ByteDance, QQ, JD) mà không phải port template tay cho từng nền tảng.
- •Mở rộng cùng codebase đó thành bản Web và app React Native cho iOS, Android và Harmony, đúng theo các target output mà README liệt kê.
- •Migrate dần một mini-program native sẵn có, vì README có tài liệu về progressive adoption và hỗ trợ native component, cho phép code native và code Mpx tồn tại song song trong cùng project.
- •Tái sử dụng component library, SDK phân tích, hay công cụ native khác của mini-program bên trong một project Mpx, vì README nói Mpx tương thích với đặc tả kỹ thuật native của mini-program.
- •Xây các mini-program nội bộ ở một tổ chức lớn với nhiều team, vì README có tài liệu về phát triển liên team qua packages và tái sử dụng logic qua mixins.
Lựa Chọn Thay Thế Cho Mpx Trong Phát Triển Đa Nền Tảng
Câu Hỏi Thường Gặp Về Mpx
Mpx biên dịch một codebase thành mini-program cho WeChat, Alipay, Baidu, ByteDance/Toutiao, QQ và JD, một target quick-app/Web, và app React Native cho iOS, Android và Harmony, theo bảng nền tảng output trong README.
Mpx được phát hành theo giấy phép Apache-2.0 và là phần mềm miễn phí, mã nguồn mở, theo repository GitHub của nó.
Mpx hỗ trợ TypeScript, dùng suy luận kiểu dựa trên ThisType bên trong single-file component, theo README.
Mpx giữ runtime đã nén và gzip ở khoảng 14KB, kết hợp tối ưu kích thước build dựa trên webpack5 và theo dõi dependency dựa trên hàm render template, theo mô tả thiết kế trong README, thay vì mô phỏng cả một DOM trình duyệt bên trong runtime mini-program.
Mpx có tài liệu về progressive adoption và hỗ trợ native component, nên component mini-program native và component Mpx có thể dùng chung trong cùng một project.
README của Mpx mô tả API của nó là kiểu Vue — data reactive, computed, watch, và single-file component — trong khi vẫn biên dịch xuống template và API native của từng nền tảng mini-program thay vì một DOM trình duyệt.
Vấn đề Mpx giải quyết
Các team phát triển cho WeChat, Alipay, Baidu và các nền tảng mini-program khác thường phải chọn một trong hai: tự duy trì code template gần như trùng lặp cho từng nền tảng, hoặc dùng một framework MVVM kiểu web rồi để nó được dịch xuống runtime của mini-program — một lớp trừu tượng phụ mà chính README của Mpx phản đối. README của Mpx đóng khung lựa chọn thiết kế của mình theo hướng ngược lại: xây dựng trên cú pháp mini-program gốc của từng nền tảng trước, sau đó thêm vào tính reactive kiểu Vue và một compiler phát ra cùng một mã nguồn mở rộng đó cho cả Web và React Native (iOS/Android/Harmony).
Ai nên dùng — và ai nên bỏ qua
Hãy thử Mpx nếu bạn đã đang xây WeChat, Alipay, Baidu, ByteDance, QQ hoặc JD mini-program và muốn dùng single-file component kiểu Vue thay vì ba file native riêng lẻ cho mỗi màn hình — nhất là khi bạn cũng cần bản Web hoặc React Native (iOS/Android/Harmony) từ cùng một nguồn. Bỏ qua nếu bạn không làm gì trong hệ sinh thái mini-program: giá trị của Mpx gắn chặt với nhóm nền tảng đó, còn tài liệu và cộng đồng hỗ trợ thì chủ yếu bằng tiếng Trung.
Repo liên quan
Vẫn đang phân vân về mpx?
Một cú bấm sẽ gửi câu hỏi kèm trang này cho AI — xem AI nói gì về mpx.