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

简介

Mpx是一个增强的applet框架，致力于改善applet开发的体验和效率。 通过Mpx，我们可以高效，优雅地开发具有出色性能的高质量applet应用程序，并将其输出到各种大小的程序平台并在Web平台上运行。

  Mpx具有以下功能特征：

  数据响应（分配响应/监视/计算）
  增强的模板语法（动态组件/样式绑定/类名称绑定/内联事件函数/双向绑定/引用）
  出色的性能（运行时性能优化/程序包量优化/框架运行时14KB）
  高效强大的编译和构建（基于webpack /与webpack生态兼容/与本机applet兼容/在npm场景中完美支持子包输出/高效调试）
  单文件组件开发
  渐进式访问/本机组件支持
  状态管理（Vuex规范/多实例商店支持）
  跨团队开发（打包）
  逻辑多路复用（混合）
  外围功能支持（获取/ api增强/模拟/ webview-bridge）
  脚手架支持
  多平台增强（支持微信，支付宝，百度，QQ，头条小程序平台的增强开发）
  跨平台编译（以微信为基础，将一组代码转换并输出到支付宝，百度，QQ，头条小程序平台和网络平台）
  TypeScript支持（基于ThisType的完整类型推断）
  国际化
  单元测试支持（即将推出）
  快速的应用程序输出（即将推出）
  安装和使用
  ＃安装mpx脚手架工具npm i -g @ mpxjs / cli＃初始化项目mpx init mpx-project＃进入项目目录cd mpx-project＃安装依赖项npm i＃开发npm run watch＃生产npm run buildCopy
  使用applet开发人员工具在项目文件夹中打开相应平台的文件夹以预览效果。

简单示例

<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> Copy

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

设计思路

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

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

生态周边

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

成功案例

          

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