[TOC]

概述

Mpx是一款致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够以最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序。

特性

数据响应特性(watch/computed)
增强的模板语法(动态组件(is属性)/样式与类绑定(类似v-bind)/内联事件函数()/双向绑定(类似v-modal)等)
深度性能优化(原生自定义组件/基于依赖收集和数据变化的setData)
基于Webpack编译(npm/Babel/ESLint/css预编译(less,scss,stylus)/代码优化(tree-shaking)等)
单文件组件开发(mpx文件)
状态管理(类似于Vuex)
跨团队合作(packages)
逻辑复用能力(mixins)
脚手架支持(内置多个模版)
小程序自身规范的完全支持(参考对应平台的开发者文档)
跨平台编译 (支持以微信为base，将一套代码转换输出到支付宝、百度、qq、头条小程序平台和 web平台中运行)
周边能力支持 (fetch / api增强 / mock / webview-bridge)
多平台增强 (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)
TypeScript支持
I18n国际化
单元测试支持
初始化项目
```bash
安装mpx脚手架工具
npm i -g @mpxjs/cli

初始化项目

mpx init mpx-project

进入项目目录

cd mpx-project

安装依赖

npm i

本地开发

npm run watch

打包base平台

npm run build

跨平台打包

npm run build:cross

<a name="2ArAn"></a>
#### ![image.png](https://cdn.nlark.com/yuque/0/2021/png/745409/1610884245926-bb5e2da6-c08d-4113-a0c6-1facb68985c6.png#align=left&display=inline&height=144&margin=%5Bobject%20Object%5D&name=image.png&originHeight=288&originWidth=527&size=20064&status=done&style=none&width=263.5)
目前只能以微信为base进行跨平台输出，需要跨平台开发的要选择wx选项。就是说像头条，阿里，百度，qq不支持跨平台。
<a name="2ulMZ"></a>
#### ![image.png](https://cdn.nlark.com/yuque/0/2021/png/745409/1610884321757-84425c34-39aa-48e5-85c2-9ed27d7e3e39.png#align=left&display=inline&height=141&margin=%5Bobject%20Object%5D&name=image.png&originHeight=282&originWidth=579&size=30544&status=done&style=none&width=289.5)
接下来是一些个性化配置。

<a name="djhm9"></a>
## 项目结构
![image.png](https://cdn.nlark.com/yuque/0/2021/png/745409/1610884546432-7b315050-99cb-4057-ad2c-242b5feb7107.png#align=left&display=inline&height=371&margin=%5Bobject%20Object%5D&name=image.png&originHeight=742&originWidth=326&size=29474&status=done&style=none&width=163)

- build:  webpack的配置目录，主要是 loader 与 plugins 的配置
- config：主要针对不同开发需求对 loader 与 plugins 中的选项进行配置，比如：是否开启px转rpx
- src：开发目录 ，app.mpx类似于微信原生小程序的app.js。主要控制全局状态，包括APP级别的生命周期，路由页面，全局样式的配置，pages与components为单个mpx文件，一个mpx文件对应一个页面或一个组件，和vue开发相同
- static：各平台下的配置信息

<a name="KMCxP"></a>
## demo展示
线上h5地址：[https://wuxianqiang.github.io/mpx-app/#/pages/index](https://wuxianqiang.github.io/mpx-app/#/pages/index)
<a name="zvEr1"></a>
## 其他小程序框架对比
与目前主流 uni-app 与 taro 进行对比

| 框架 | 技术栈 | 案例 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | H5 | App | 快应用 | 国际化 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | :--- | :--- |
| Taro | React/Vue | 丰富 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | 需要第三方插件 |
| uni-app | Vue | 丰富 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | 需要第三方插件 |
| Mpx | Vue | 较少 | ✓ | ✓ | ✓ | ✓ | ✓ | × | × | 内部支持 |

**
<a name="vCtU2"></a>
#### 社区生态
mpx是渐进式介入，支持原生组件接入与导出，可以整合原有的平台生态。<br />taro官方提供了 taro-ui库，其他第三方库以及组件不太多，并依赖社区提供物料。<br />uni-app官方发布了uni-ui库，内部插件市场支持还算完善。

<a name="BRT5W"></a>
#### 开发体验
MPX定义为小程序增强框架，编译过程出现坑的概率更少。<br />Taro 与 uni-app 是基于 React 与 Vue 运行时进行开发，编译过程中遇到坑概率较多。

<a name="zblYD"></a>
#### 案例对比
mpx 例子较少，主要集中在微信小程序，与少量的支付宝小程序。<br />taro案例多是微信小程序，很少有其他平台小程序<br />uni-app案例齐全，具有多个跨端成功样例

<a name="KvQy1"></a>
## 开发注意事项
<a name="BbbLG"></a>
#### vscode vetur配置
根据官网配置 vetur 进入mpx文件会有语法报错 在设置的用户区配置，关闭报错提示

"vetur.validation.script": false,
"vetur.validation.template": false,
"vetur.validation.style": false


<a name="nM7A2"></a>
#### 配置全局代码片段
需要手动配置 vscode 中代码片段，自动生成代码模板

{ “Print to weapp page”: { “prefix”: “page”, “body”: [ “\n”, “\n”, ““, “\n”, “$2” ], “description”: “weapp page” }, “Print to weapp components”: { “prefix”: “components”, “body”: [ “\n”, “\n”, ““, “\n”, “$2” ], “description”: “weapp components” }

}

<a name="cLQkt"></a>
#### rpx转换

//config/mpxPlugin.conf.js transRpxRules: [ { mode: ‘all’, // 可选值有none/only/all 分别是不启用，只对注释内容启用，只不对注释内容启用 comment: ‘use px’, // rpx注释，建议使用 ‘use px’ / ‘use rpx’，当mode为all时默认值为use px，mode为only时默认值为use rpx include: resolve(‘src’), // 同webpack的include规则 exclude: resolve(‘lib’), // 同webpack的exclude规则 designWidth: 750 // 设计稿宽度，默认值就是750 }
],

<a name="5SRl0"></a>
#### 跳转页面

- 基于组件

import ActivityPath from “../../pages/activities.mpx?resolve”

mpx.navigateTo({url:ActivityPath+?id=3})


- 基于路由

mpx.navigateTo({ url: ../pages/detail?type=${type}&id=${index} })

<a name="2oM94"></a>
#### 网络请求
安装请求包

npm i @mpxjs/fetch

拦截器配置
```javascript
import mpx from '@mpxjs/core'
import mpxFetch from '@mpxjs/fetch'

mpx.use(mpxFetch)
mpx.xfetch.interceptors.request.use(function(config) {
    var token = wx.getStorageSync('token')
    if (token) {
        //config对象中没有headers 对象 要手动添加
        config.headers={authorization:"bearer " + token}
    }  
    config.emulateJSON=true // 等价于header = {'content-type': 'application/x-www-form-urlencoded'}
    // 也可以返回promise
    return config 
})
mpx.xfetch.interceptors.response.use(function(res) {
    if(res.data.code!=200){
        console.log("res.data.code",res.data.code)
        mpx.showToast({title:res.data.result,icon:"none"})
        if(res.data.code==401){
            mpx.navigateTo({url:'/pages/login'})
            return Promise.reject(res.data.result)
        }
        return Promise.reject(res.data.result)
    }
    // 也可以返回promise
    else{
        if(!res.data.msg){
            mpx.showToast({title:res.data.result,icon:"none"})
            return Promise.reject(res.data.result)
        }
        return res
    }

})

get与post封装

import mpx from '@mpxjs/core'
import { BASE_URL } from "./config"
//get 请求
export const message=(data)=>mpx.xfetch.fetch({ url: BASE_URL + '/api/service/message_list', method: 'GET',params: data})
//post 请求
export const unifiedOrder=(data)=>mpx.xfetch.fetch({ url: BASE_URL + '/api/pay/unified_order', method: 'POST' , data: data})

总结

Mpx是一个优秀的小程序的框架，采用渐进式开发方式，以原生小程序开发为主，可以使用Vue的一些高级特性，提高了小程序开发体验。

前端技术博客

Mpx简介

概述

特性