简介

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框架可以提高我们开发小程序的效率。

小程序Mpx框架入门相关推荐

微信小程序wepy框架快速入门
微信小程序wepy框架快速入门微信小程序简介微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一 ...
【helloworld】-微信小程序开发教程-入门篇【1】
1. 开篇导言本节目标:旨在演示如何用开发者工具构建并运行简单的 helloworld 应用. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:开发者工具的基本使用流程,即创建.导入. ...
知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
史诗手册！微信小程序新手自学入门宝典！你想要的都在这里
一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...
多文档程序两个menu框架_汇总9款优秀的开源小程序UI框架
卧槽这玩意儿写的这么烂,我可以写一个更烂的来恶心作者--开源社区,经典语录随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 布莱恩特:Github优秀的小程序 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
微信小程序底层框架实现原理
小册介绍小程序(Mini Program)我们都很熟悉,它是一种不用下载安装就能使用的应用,它实现了应用"触手可及"的梦想.如今,微信已经把小程序打造成了新的开发者生态,而小程序 ...
【微信小程序】从入门到放弃
前言关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信小程序开放功能草民看过很多的文档,微信 ...
微信小程序开发快速入门
最近整理文件,找到一个18年写的微信小程序开发快速入门,对于新手还是值得一看的,三年多过去了,可能一些接口已经更新了,不过,整体思想还是没变的. 如果你熟悉JavaScript,那你基本上看完这个文档 ...

小程序Mpx框架入门

文章目录

简介