一款具有优秀开发体验和深度性能优化的增强型小程序开发框架。

Mpx是一款致力于提高小程序开发体验和开发效率的增强型小程序框架，通过Mpx，我们能够高效优雅地开发出具有极致性能的优质小程序应用，并将其输出到各大小程序平台和web平台中运行。

Mpx具有以下功能特性：

  • 数据响应 (赋值响应 / watch / )
  • 增强模板语法 (动态组件 / / 内联事件函数 / / refs)
  • 极致性能 ( / 包体积优化 / 框架运行时体积14KB)
  • (基于webpack / 兼容webpack生态 / 兼容原生小程序 / 完善支持npm场景下的分包输出 / 高效调试)
  • 单文件组件开发
  • 状态管理 (Vuex规范 / 支持多实例Store)
  • 跨团队开发 ()
  • 逻辑复用 (mixins)
  • (fetch / api增强 / mock / webview-bridge)
  • 脚手架支持
  • 多平台增强 (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)
  • (支持以微信为base，将一套代码转换输出到支付宝、百度、qq、头条小程序平台和web平台中运行)
  • (基于ThisType实现了完善的类型推导)
  • I18n国际化
  • 单元测试支持 (即将到来)
  • 快应用输出 (即将到来)

安装使用

  2.   <!--动态样式-->
  3.   <view class="container" wx:style="{{dynamicStyle}}">
  4.     <!--数据绑定-->
  5.     <view class="title">{{title}}</view>
  6.     <!--计算属性数据绑定-->
  7.     <view class="title">{{reversedTitle}}</view>
  8.     <view class="list">
  9.       <!--循环渲染，动态类名，事件处理内联传参-->
  10.       <view wx:for="{{list}}" wx:key="id" class="list-item" wx:class="{{ {active:item.active} }}"
  11.             bindtap="handleTap(index)">
  12.         <view>{{item.content}}</view>
  13.         <!--循环内部双向数据绑定-->
  14.         <input type="text" wx:model="{{list[index].content}}"/>
  15.       </view>
  16.     </view>
  17.     <!--自定义组件获取实例，双向绑定，自定义双向绑定属性及事件-->
  18.     <!--动态组件，is传入组件名字符串，可使用的组件需要在json中注册，全局注册也生效-->
  19.     <component is="{{current}}"></component>
  20.     <!--显示/隐藏dom-->
  21.     <view class="bottom" wx:show="{{showBottom}}">
  22.       <!--模板条件编译，__mpx_mode__为框架注入的环境变量，条件判断为false的模板不会生成到dist-->
  23.       <view wx:if="{{__mpx_mode__ === 'wx'}}">wx env</view>
  24.       <view wx:if="{{__mpx_mode__ === 'ali'}}">ali env</view>
  25.     </view>
  26.   </view>
  27. </template>
  29. <script>
  30.   import { createPage } from '@mpxjs/core'
  32.   createPage({
  33.     data: {
  35.       dynamicStyle: {
  36.         fontSize: '16px',
  37.         color: 'red'
  38.       },
  39.       title: 'hello world',
  40.       list: [
  41.         {
  42.           content: '全军出击',
  43.           id: 0,
  44.           active: false
  45.         },
  46.         {
  47.           content: '猥琐发育，别浪',
  48.           id: 1,
  49.           active: false
  50.         }
  51.       ],
  52.       customInfo: {
  53.         title: 'test',
  54.         content: 'test content'
  55.       },
  56.       current: 'com-a',
  57.       showBottom: false
  58.     },
  59.     computed: {
  60.       reversedTitle () {
  61.       }
  62.     },
  63.     watch: {
  64.       title: {
  65.         handler (val, oldVal) {
  66.           console.log(val, oldVal)
  68.         immediate: true
  69.       }
  70.     },
  71.     handleTap (index) {
  72.       // 处理函数直接通过参数获取当前点击的index，清晰简洁
  73.       this.list[index].active = !this.list[index].active
  74.     },
  75.     onReady () {
  76.       setTimeout(() => {
  77.         // 更新数据，同时关联的计算属性reversedTitle也会更新
  78.         this.title = '你好，世界'
  79.         // 此时动态组件会从com-a切换为com-b
  80.         this.current = 'com-b'
  81.       }, 1000)
  82.     }
  83.   })
  84. </script>
  86. <script type="application/json">
  87.   {
  88.     "usingComponents": {
  89.       "custom-input": "../components/custom-input",
  90.       "com-a": "../components/com-a",
  91.       "com-b": "../components/com-b"
  92.     }
  93.   }
  94. </script>
  96. <style lang="stylus">
  97.   .container
  98.     position absolute
  99.     width 100%
  100. </style>

更多示例请查看

设计思路

Mpx的核心设计思路为增强，不同于业内大部分小程序框架将web MVVM框架迁移到小程序中运行的做法，Mpx以小程序原生的语法和技术能力为基础，借鉴参考了主流的web技术设计对其进行了扩展与增强，并在此技术上实现了以微信增强语法为base的同构跨平台输出，该设计带来的好处如下：

  • 良好的开发体验：在方便使用框架提供的便捷特性的同时，也能享受到媲美原生开发的确定性和稳定性，完全没有的顾虑；不管是增强输出还是跨平台输出，最终的dist代码可读性极强，便于调试排查；
  • 极致的性能：得益于增强的设计思路，Mpx框架在运行时不需要做太多封装抹平转换的工作，框架的运行时部分极为轻量简洁，压缩+gzip后仅占用14KB；配合编译构建进行的包体积优化和基于模板渲染函数进行的数据依赖跟踪，Mpx框架在性能方面做到了业内最优(小程序框架运行时性能评测报告)；
  • 完整的原生兼容：同样得益于增强的设计思路，Mpx框架能够完整地兼容小程序原生技术规范，并且做到实时跟进。在Mpx项目中开发者可以方便地使用业内已有的小程序生态，如组件库、统计工具等；原生开发者们可以方便地进行渐进迁移；甚至可以将框架的跨平台编译能力应用在微信的原生小程序组件当中进行跨平台输出。

成功案例

Introduction - 图1 Introduction - 图2 Introduction - 图3 Introduction - 图4 Introduction - 图5

，若你也在使用Mpx框架开发小程序，并想分享给大家，请填在此issue中。

添加MPX入群客服等待受邀入群

Mpx-wx客服

扫码进入QQ群

图片因github网络问题导致不可见的朋友可以点击该链接：https://s.didi.cn/rod

招聘

感兴趣的同学请将简历投递至，社招校招均可~