MPX

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

简介

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

Mpx具有以下功能特性：

安装使用

  1. # 安装mpx脚手架工具
  2. npm i -g @mpxjs/cli
  4. # 初始化项目
  5. mpx init mpx-project
  7. # 进入项目目录
  8. cd mpx-project
  10. # 安装依赖
  11. npm i
  13. # development
  14. npm run watch
  16. # production
  17. npm run build

使用小程序开发者工具打开项目文件夹下dist中对应平台的文件夹即可预览效果。

简单示例

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

更多示例请查看官方示例项目

设计思路

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

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

生态周边

包名 版本 描述
@mpxjs/core npm version mpx运行时核心
@mpxjs/webpack-plugin npm version mpx编译核心
@mpxjs/cli npm version mpx脚手架命令行工具
@mpxjs/fetch npm version mpx网络请求库，处理wx并发请求限制
@mpxjs/webview-bridge npm version 为跨小程序平台的H5项目提供通用的webview-bridge
@mpxjs/api-proxy npm version 将各个平台的 api 进行转换，也可以将 api 转为 promise 格式
@mpxjs/mock npm version 结合mockjs提供数据mock能力

成功案例

Introduction - 图9 Introduction - 图10 Introduction - 图11 Introduction - 图12 Introduction - 图13 Introduction - 图14 Introduction - 图15 Introduction - 图16 Introduction - 图17 Introduction - 图18 Introduction - 图19

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

交流

提供 微信群 / QQ群 两种交流方式

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

Mpx-wx客服

扫码进入QQ群

Mpx-QQ群

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

招聘

滴滴出行小程序团队绝赞招人中，欢迎各位前端同学加入我们，开发日活过千万的头部小程序应用滴滴出行，并参与Mpx框架技术建设。

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