小程序Mpx框架入门

---

简介

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

---

一、Mpx的特点

1.使用原因

• 原生小程序开发存在诸多缺陷
  比如：缺乏状态管理、数据响应能力，npm支持不完善等
• 业内小程序框架解决了部分问题，但存在性能、易用性等问题

2.设计思路

• 基于小程序本身的技术标准进行增强
  意味着Mpx框架完全支持小程序规范，坑少，可预期性好
• 基于Mobx实现高效的数据响应
• 基于Webpack实现基于依赖手机的优化编译

3.与其他框架的区别

• 更专注，更专业
• 更易用，坑更少

二、安装使用

前提：已安装了node和npm

1.相关命令

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

# 初始化项目
mpx init mpx-project

# 进入项目目录
cd mpx-project

# 安装依赖
npm i

# development
npm run watch

# production
npm run build

2.项目创建演示

注意：需先安装mpx脚手架工具，在命令行工具或者终端上输入：npm i -g @mpxjs/cli，安装完后再输入Mpx -V，如下图出现版本号则说明已经安装成功。

以下演示创建项目：
初始化一个项目，一直回车即可

进入项目目录，并安装依赖

对项目进行开发

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

Mpx框架的项目不要在开发者工具上编写代码，应该使用vscode等编辑工具来修改项目。项目使用vscode打开项目，然后就可以在src目录下的文件进行编写了。

三、Mpx在vscode中的相关插件

mpx
官方推荐的语法高亮插件

minapp
提供了MPX内 <template> 内的微信小程序语法提示

Vetur
这个插件是vue提供的vscode下的开发工具

Color Highlight
这个插件可以将我们Stylus内的颜色渲染出来（可选）

language-stylus
这个插件主要是为我使用的Stylus服务（可选）

四、学习Mpx框架开发

1.Mpx具有的功能特性

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

2.学习的资源

官方文档
慕课网：零基础入门 mpx 小程序框架
官方的示例项目：todoMVC

---

总结

小程序Mpx框架是一个类似于Vue开发的框架，因此真正学习它之前，应该先去学习小程序的原生开发和Vue框架。在原生小程序和Vue框架的基础上只需要理解Mpx框架本身的一些特性，学习起来效果会更好。Mpx框架作为小程序增强型框架，一套代码可以生成多个平台的小程序，因此掌握Mpx框架可以提高我们开发小程序的效率。