MUI中文文档

# MUI快速上手

# 背景知识

使用 MUI 前，请确保你已经学习过微信官方的 小程序简易教程 (opens new window) 和 自定义组件介绍 (opens new window)。

# 安装

# 步骤一 设置美的私域

插件项目放在美的私域下面，在执行安装操作时需要指定下载地址 在项目根目录下新增.npmrc文件，配置 registry = "http://npm.midea.com:8090/repository/npm-public/"

或者使用 npm i m-ui --registry=http://npm.midea.com:8090/repository/npm-public/

# 步骤二 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持 (opens new window)

# 通过 npm 安装
npm i m-ui -S --production

# 通过 yarn 安装
yarn add m-ui --production

# 安装 0.x 版本
npm i m-ui -S --production

# 步骤三 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件 (opens new window)强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

# 步骤四 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

# 步骤五 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

# 步骤六 引入使用

引入使用，使用组件库，直接使用 /miniprogram_npm/m-ui/...... 或者 m-ui/......

# 步骤七 组件升级

直接在package.json文件夹中修改插件版本号，执行npm install 进行升级，升级后，需要重新构建npm 或者使用npm升级 如 npm add m-ui@2.0.2

# 使用

# 引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。 index.json：

{
  "usingComponents": {
    "mx-button": "/miniprogram_npm/m-ui/button/index"
  }
}

# 使用组件

引入组件后，可以在 wxml 中直接使用组件 index.wxml：


<mx-button type="primary">按钮</mx-button>

← 更新记录 →