Home

Awesome

mpx-logo

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

test-status docs-status

官网及文档

欢迎访问https://mpxjs.cn,跟随我们提供的文档指南使用Mpx进行跨端小程序开发。

近期更新

基于 Mpx 的移动端基础组件库 mpx-cube-ui 已经开源,更多详情查看这里

Mpx 2.9 版本正式发布,支持原子类、SSR和构建产物体积优化,更多详情查看这里,迁移指南查看这里,相关指南及 API 参考文档已更新。

简介

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

Mpx具有以下功能特性:

快速开始

# 安装mpx脚手架工具
npm i -g @mpxjs/cli

# 初始化项目
mpx create mpx-project

# 进入项目目录
cd mpx-project

# 安装依赖
npm i

# development
npm run serve

# production
npm run build

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

使用示例

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

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

设计思路

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

生态周边

包名版本描述
@mpxjs/corenpm versionmpx运行时核心
@mpxjs/webpack-pluginnpm versionmpx编译核心
@mpxjs/api-proxynpm version将各个平台的 api 进行转换,也可以将 api 转为 promise 格式
@mpxjs/storenpm version类vuex store
@mpxjs/pinianpm versionmpx pinia store
@mpxjs/fetchnpm versionmpx网络请求库,处理wx并发请求限制
@mpxjs/unocss-pluginnpm versionmpx unocss插件,支持使用unocss原子类
@mpxjs/unocss-basenpm versionmpx unocss预设
@mpxjs/clinpm versionmpx脚手架命令行工具
@mpxjs/webview-bridgenpm version为跨小程序平台的H5项目提供通用的webview-bridge
@mpxjs/utilsnpm versionmpx运行时工具库
@mpxjs/babel-plugin-inject-page-eventsnpm version组合式API页面事件处理插件
@mpxjs/mpx-cube-uinpm version基于 Mpx 的移动端基础组件库

开发团队

核心团队: hiyuki, Blackgan3, anotherso1a, CommanderXL, yandadaFreedom, wangxiaokou, OnlyProbie, pagnkelly, thuman, theniceangel, dolymood

外部贡献者:sky-admin, pkingwa, httpsxiao, lsycxyj, okxiaoliang4, tangminFE, codepan, zqjimlove, xuehebinglan, zhaoyiming0803, ctxrr, JanssenZhang, heiye9, lj0812, SuperHuangXu, twtylkmrh, NineSwordsMonster

成功案例

微信小程序

滴滴出行出行广场滴滴公交滴滴金融滴滴外卖司机招募小桔加油
滴滴出行出行广场滴滴公交滴滴金融滴滴外卖司机招募小桔加油
彗星英语番薯借阅疫查查应用小桔养车学而思直播课小猴启蒙课科创书店
彗星英语番薯借阅疫查查应用小桔养车学而思直播课小猴启蒙课科创书店
在武院三股绳Lite学而思优选课食享会青铜安全医生青铜安全培训视穹云机械
在武院三股绳Lite学而思优选课食享会青铜安全医生青铜安全培训视穹云机械
店有生意通花小猪打车橙心优选小二押镖顺鑫官方微商城嘀嗒出行汉行通Pro
店有生意通花小猪打车橙心优选小二押镖顺鑫官方微商城嘀嗒出行汉行通Pro
交圈青桔单车滴滴顺风车滴滴代驾新桔代驾标贝知音
交圈青桔单车滴滴顺风车滴滴代驾新桔代驾标贝知音

其他平台小程序:

滴滴出行(支付宝)小桔充电(支付宝)唯品会QQ口袋证件照(百度)唯品会(百度)唯品会(字节)
滴滴出行(支付宝)小桔充电(支付宝)唯品会(QQ)口袋证件照(百度)唯品会(百度)唯品会(字节)

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

交流

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

添加MPX入群小助手等待受邀入群

微信

扫码进入QQ群

QQ

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