安装文档

第一步

npm 安装

npm i mind-ui-weapp -S

第二步

1、打开微信开发者工具，点击 本地设置 ，勾选 使用 npm 模块 选项；
2、点击顶部菜单 工具 -> 构建 npm，构建完成后，会生成 miniprogram_npm 目录，该目录下可查看构建后的组件库文件包，之后便可引入组件。

使用示例

全局引入

app.json 中 usingComponents 对象下引入，便可在全局中使用。一般会将使用频率高的组件在全局中引入。

{
	"usingComponents": {
		"m-button": "mind-ui-weapp/button/index",
	}
}

页面引入

页面 index.json 文件中引入组件（以 button 组件为例）

"usingComponents": {
	"m-button": "/mind-ui-weapp/button/index"
}

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

JS方法组件的使用

以下以 toast 组件的 JS 使用方式为例

方式一

index.wxml 文件

<m-button bind:click="showToast">提示</m-button>

<m-toast id="toast" />

index.js 文件
注意：小程序中 import 文件无法使用相对路径，只可以使用绝对路径，以当前文件所在路径向上查找。

// ../目录需要按照实际路径进行调整
import Toast from '../miniprogram_npm/mind-ui-weapp/toast/toast.js'
Page({
  showToast() {
    Toast('simple toast')
  }
})

方式二

推荐使用以下方式挂载在 wx 全局上使用，页面中无需再次引入 js

在项目根目录的 app.js 文件中引入方法并挂载

import Toast from 'mind-ui-weapp/toast/toast'
import Message from 'mind-ui-weapp/message/message'
import Modal from 'mind-ui-weapp/modal/modal'

wx.$toast = Toast; 
wx.$message = Message;
wx.$modal = Modal;

页面中使用

wx.$toast('simple toast');

wxml 文件中写入对应标签

<m-toast id="toast" />

注意：如果在组件中使用时，需要在引入组件的页面中写入对应的 wxml 标签，在组件中写入是无效的。