MPX框架快速入门指南：从小程序开发到跨平台输出-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01028/article/details/148552879

MPX框架快速入门指南：从小程序开发到跨平台输出

mpx Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架项目地址: https://gitcode.com/gh_mirrors/mp/mpx

前言

MPX是一款专注于小程序开发的增强型框架，由滴滴团队开源维护。它基于原生小程序语法进行扩展，提供了更现代化的开发体验和更强大的功能支持。本文将带你从零开始快速上手MPX框架开发。

环境准备

安装MPX脚手架工具

MPX提供了命令行工具@mpxjs/cli来简化项目创建和管理流程。你可以根据自己的包管理器偏好选择以下任一方式安装：

# 使用npm安装
npm i -g @mpxjs/cli

# 使用pnpm安装
pnpm add -g @mpxjs/cli

# 使用yarn安装
yarn global add @mpxjs/cli

安装完成后，你可以通过mpx -v命令验证安装是否成功。

创建新项目

标准创建方式

使用全局安装的脚手架创建项目：

mpx create mpx-project

免全局安装方式

如果你不想全局安装脚手架，也可以使用npx直接创建项目：

npx @mpxjs/cli create mpx-project

创建过程中，命令行会交互式询问项目配置选项，包括：

项目名称
项目描述
基础平台选择（微信/支付宝等）
是否启用TypeScript
是否启用单元测试等

对于插件项目，必须提供有效的微信小程序AppID；普通项目则无此要求。

创建完成后，进入项目目录并安装依赖：

cd mpx-project
npm install

项目结构与开发

核心命令

MPX项目提供了以下主要npm脚本：

{
  "serve": "mpx-cli-service serve",  // 开发模式
  "build": "mpx-cli-service build"   // 生产构建
}

开发模式

启动开发服务器：

npm run serve

此命令会：

编译项目到dist/${平台}目录
启动文件监听，自动重新编译变更
支持热更新等开发特性

生产构建

构建生产环境代码：

npm run build

构建命令支持以下常用选项：

# 指定目标平台（可多平台）
mpx-cli-service build --targets=wx,ali

# 开发模式构建
mpx-cli-service build --mode=development

# 生成打包分析报告
mpx-cli-service build --report

支持的平台

MPX支持编译到以下平台：

| 平台名称 | 目标标识 | |---------|---------| | 微信小程序 | wx | | 支付宝小程序 | ali | | 百度小程序 | swan | | QQ小程序 | qq | | 头条小程序 | tt | | Web浏览器 | web | | Android | android | | iOS | ios | | 鸿蒙 | harmony |

核心开发概念

应用入口 (app.mpx)

MPX应用入口文件采用类似Vue的单文件组件结构：

<script>
import mpx, { createApp } from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'

// 安装插件
mpx.use(apiProxy, { usePromise: true })

// 创建小程序实例
createApp({
  onLaunch() {
    // 应用初始化逻辑
  }
})
</script>

<style lang="stylus">
/* 全局样式 */
.bold
  font-weight bold
</style>

<script type="application/json">
{
  "pages": ["./pages/index"],
  "window": {
    "navigationBarTitleText": "MPX Demo"
  }
}
</script>

特点：

完全兼容原生小程序app.json配置
支持CSS预处理器
支持插件系统

页面开发 (index.mpx)

页面文件同样采用单文件结构：

<template>
  <view class="container">
    <list-component :list="pageData"></list-component>
  </view>
</template>

<script>
import { createPage } from '@mpxjs/core'

createPage({
  data: {
    pageData: ['Item 1', 'Item 2']
  },
  onLoad() {
    // 页面加载逻辑
  }
})
</script>

<style lang="stylus">
.container
  padding: 20rpx
</style>

<script type="application/json">
{
  "usingComponents": {
    "list-component": "../components/list"
  }
}
</script>

增强特性：

支持Vue风格的模板语法
组件直接引用npm包
完整的数据响应系统

组件开发 (list.mpx)

组件开发与页面开发体验一致：

<template>
  <view class="list">
    <view wx:for="{{list}}" wx:key="index">
      {{item}}
    </view>
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'

createComponent({
  properties: {
    list: {
      type: Array,
      value: []
    }
  }
})
</script>

<style lang="stylus">
.list
  background-color: #f5f5f5
</style>

<script type="application/json">
{
  "component": true
}
</script>