Mpx 小程序框架教程

项目介绍

Mpx 是一款致力于提升小程序开发体验和用户体验的增强型小程序跨端框架。通过 Mpx，我们能够以类 Vue 的开发体验高效优雅地构筑出高性能跨端小程序应用，在所有开放的小程序平台及 Web 平台中运行。Mpx 具有以下功能特性：

• 数据响应：赋值响应、watch、computed
• 组合式 API
• 增强模板语法：动态组件、样式绑定、类名绑定、内联事件函数、双向绑定、refs
• 极致性能：运行时性能优化、包体积优化、框架运行时体积 14KB
• 高效强大的编译构建：基于 webpack5、支持持久化缓存、兼容 webpack 生态、兼容原生小程序、完善支持 npm 场景下的分包输出、高效调试
• 单文件组件开发
• 渐进接入 / 原生组件支持
• 状态管理：Vuex 规范、支持多实例 Store
• 跨团队开发：packages
• 逻辑复用：mixins
• 周边能力：fetch、api 增强、mock、webview-bridge
• 脚手架支持
• 多平台增强：支持在微信、支付宝、百度、QQ、头条小程序平台中进行增强开发
• 跨平台编译：一套代码跨端输出到微信、支付宝、百度、字节、QQ、京东、快应用(Web) 和 Web 平台中运行
• TypeScript 支持：基于 ThisType 实现了完善的类型推导
• I18n 国际化
• 单元测试
• E2E 测试
• 原子类
• SSR
• 运行时渲染方案
• 跨端输出 RN（即将到来）

项目快速启动

安装 Mpx 脚手架工具

npm i -g @mpxjs/cli

初始化项目

mpx create mpx-project

进入项目目录

cd mpx-project

安装依赖

npm i

启动开发服务器

npm run dev

应用案例和最佳实践

Mpx 已经被广泛应用于多个实际项目中，以下是一些应用案例和最佳实践：

• 滴滴出行小程序：使用 Mpx 开发的滴滴出行小程序，提供了流畅的用户体验和高性能的运行时表现。
• 快应用(Web) 平台：Mpx 支持将小程序代码跨端输出到快应用(Web) 平台，实现了多平台的统一开发。
• Web 平台：Mpx 支持将小程序代码输出到 Web 平台，实现了小程序和 Web 的无缝衔接。

典型生态项目

Mpx 拥有丰富的生态项目，以下是一些典型的生态项目：

• @mpxjs/core：Mpx 运行时核心
• @mpxjs/webpack-plugin：Mpx 编译核心
• @mpxjs/cli：Mpx 脚手架命令行工具
• @mpxjs/fetch：Mpx 网络请求库，处理 wx 并发请求限制
• @mpxjs/api-proxy：将各个平台的 API 进行转换，也可以将 API 转为 promise 格式
• @mpxjs/webview-bridge：为跨小程序平台的 H5 项目提供通用的 webview-bridge
• @mpxjs/vscode-plugin：VSCode 插件，提供更好的开发体验
• @mpxjs/es-check：高级语法检查工具
• @mpxjs/size-report：体积分析工具

通过这些生态项目，开发者可以更加高效地进行 Mpx 小程序开发，提升开发效率和应用性能。