Mpx是一款致力于提升小程序开发体验和用户体验的增强型小程序跨端框架

[](https://mpxjs.cn) [Mpx](https://mpxjs.cn), 一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架。   ## 官网及文档 欢迎访问[https://mpxjs.cn](https://mpxjs.cn)，跟随我们提供的文档指南使用Mpx进行跨端小程序开发。 ## 近期更新 Mpx 2.8 版本正式发布，完整支持组合式 API，更多详情查看[这里](https://mpxjs.cn/articles/2.8-release.html)，迁移指南查看[这里](https://mpxjs.cn/guide/migrate/2.8.html)，相关指南及 API 参考文档已更新。 `@mpxjs/cli` 3.2 版本正式发布，基于 `@vue/cli` 插件化架构实现的全新脚手架，更多详情查看[这里](https://github.com/mpx-ecology/mpx-cli)。 ## 简介 Mpx是一款致力于提升小程序开发体验和用户体验的增强型小程序跨端框架，通过Mpx，我们能够以类Vue的开发体验高效优雅地构筑出高性能跨端小程序应用，在所有开放的小程序平台及web平台中运行。 Mpx具有以下功能特性： * [数据响应](https://www.mpxjs.cn/guide/basic/reactive.html) (赋值响应 / [watch](https://www.mpxjs.cn/api/global-api.html#watch) / computed) * [组合式 API](#todo link) * 增强模板语法 ([动态组件](https://www.mpxjs.cn/guide/basic/component.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6) / [样式绑定 / 类名绑定 ](https://www.mpxjs.cn/guide/basic/class-style-binding.html#%E7%B1%BB%E5%90%8D%E7%BB%91%E5%AE%9A) / [内联事件函数](https://www.mpxjs.cn/guide/basic/event.html) / [双向绑定](https://www.mpxjs.cn/guide/basic/two-way-binding.html) / [refs](https://www.mpxjs.cn/guide/basic/refs.html)) * 极致性能 ([运行时性能优化](https://www.mpxjs.cn/guide/understand/runtime.html) / [包体积优化](https://www.mpxjs.cn/guide/understand/compile.html#%E5%88%86%E5%8C%85%E5%A4%84%E7%90%86) / 框架运行时体积14KB) * [高效强大的编译构建](https://www.mpxjs.cn/guide/understand/compile.html#%E5%88%86%E5%8C%85%E5%A4%84%E7%90%86) (基于webpack5 / 支持持久化缓存 / 兼容webpack生态 / 兼容原生小程序 / 完善支持npm场景下的分包输出 / 高效调试) * [单文件组件开发](https://www.mpxjs.cn/guide/basic/single-file.html) * [渐进接入 / 原生组件支持](https://www.mpxjs.cn/guide/advance/progressive.html) * [状态管理](https://www.mpxjs.cn/guide/advance/store.html) (Vuex规范 / 支持多实例Store) * 跨团队开发 ([packages](https://www.mpxjs.cn/guide/advance/subpackage.html)) * 逻辑复用 ([mixins](https://www.mpxjs.cn/guide/advance/mixin.html)) * [周边能力支持](https://www.mpxjs.cn/guide/extend/) (fetch / api增强 / mock / webview-bridge) * 脚手架支持 * 多平台增强 (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发) * [跨平台编译](https://www.mpxjs.cn/guide/advance/platform.html) (一套代码跨端输出到微信、支付宝、百度、字节、QQ、京东、快应用(web) 和 [web平台](https://www.mpxjs.cn/guide/advance/platform.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E8%BE%93%E5%87%BAweb) 中运行) * [TypeScript支持](https://www.mpxjs.cn/guide/tool/ts.html) (基于ThisType实现了完善的类型推导) * [I18n国际化](https://www.mpxjs.cn/guide/tool/i18n.html) * [单元测试支持](https://www.mpxjs.cn/guide/tool/unit-test.html) * [E2E测试支持](https://www.mpxjs.cn/guide/tool/e2e-test.html) * [组件维度运行时渲染方案](https://github.com/didi/mpx/pull/919) (即将到来) ## 快速开始 ```bash # 安装mpx脚手架工具 npm i -g @mpxjs/cli # 初始化项目 mpx create mpx-project # 进入项目目录 cd mpx-project # 安装依赖 npm i # development npm run serve # production npm run build ``` 使用小程序开发者工具打开项目文件夹下dist中对应平台的文件夹即可预览效果。 ## 使用示例 ```html <template> <!--动态样式--> <view class="container" wx:style="{{dynamicStyle}}"> <!--数据绑定--> <view class="title">{{title}}</view> <!--计算属性数据绑定--> <view class="title">{{reversedTitle}}</view> <view class="list"> <!--循环渲染，动态类名，事件处理内联传参--> <view wx:for="{{list}}" wx:key="id" class="list-item" wx:class="{{ {active:item.active} }}" bindtap="handleTap(index)"> <view>{{item.content}}</view> <!--循环内部双向数据绑定--> <input type="text" wx:model="{{list[index].content}}"/> </view> </view> <!--自定义组件获取实例，双向绑定，自定义双向绑定属性及事件--> <custom-input wx:ref="ci" wx:model="{{customInfo}}" wx:model-prop="info" wx:model-event="change"/> <!--动态组件，is传入组件名字符串，可使用的组件需要在json中注册，全局注册也生效--> <component is="{{current}}"></component> <!--显示/隐藏dom--> <view class="bottom" wx:show="{{showBottom}}"> <!--模板条件编译，__mpx_mode__为框架注入的环境变量，条件判断为false的模板不会生成到dist--> <view wx:if="{{__mpx_mode__ === 'wx'}}">wx env</view> <view wx:if="{{__mpx_mode__ === 'ali'}}">ali env</view> </view> </view> </template> <script> import { createPage } from '@mpxjs/core' createPage({ data: { // 动态样式和类名也可以使用computed返回 dynamicStyle: { fontSize: '16px', color: 'red' }, title: 'hello world', list: [ { content: '全军出击', id: 0, active: false }, { content: '猥琐发育，别浪', id: 1, active: false } ], customInfo: { title: 'test', content: 'test content' }, current: 'com-a', showBottom: false }, computed: { reversedTitle () { return this.title.split('').reverse().join('') } }, watch: { title: { handler (val, oldVal) { console.log(val, oldVal) }, immediate: true } }, handleTap (index) { // 处理函数直接通过参数获取当前点击的index，清晰简洁 this.list[index].active = !this.list[index].active }, onReady () { setTimeout(() => { // 更新数据，同时关联的计算属性reversedTitle也会更新 this.title = '你好，世界' // 此时动态组件会从com-a切换为com-b this.current = 'com-b' }, 1000) } }) </script> <script type="application/json"> { "usingComponents": { "custom-input": "../components/custom-input", "com-a": "../components/com-a", "com-b": "../components/com-b" } } </script> <style lang="stylus"> .container position absolute width 100% </style> ``` 更多示例请查看[官方示例项目](https://github.com/didi/mpx/tree/master/examples) ## 设计思路 Mpx的核心设计思路为增强，不同于业内大部分小程序框架将web MVVM框架迁移到小程序中运行的做法，Mpx以小程序原生的语法和技术能力为基础，借鉴参考了主流的web技术设计对其进行了扩展与增强，并在此技术上实现了以微信增强语法为base的同构跨平台输出，该设计带来的好处如下： * 良好的开发体验：在方便使用框架提供的便捷特性的同时，也能享受到媲美原生开发的确定性和稳定性，完全没有`框架太多坑，不如用原生`的顾虑；不管是增强输出还是跨平台输出，最终的dist代码可读性极强，便于调试排查； * 极致的性能：得益于增强的设计思路，Mpx框架在运行时不需要做太多封装抹平转换的工作，框架的运行时部�