Mind UI

# 安装文档

从 GitHub 下载该组件库文件， 将下载后的 dist 文件目录拷贝到自己的项目中，然后对照组件的文档，进行使用。 GitHub 中的文件包含组件的完整示例，可以使用微信开发者工具进行预览。

TIP

app.wxss 文件中包含组件样式的自定义变量，请将文件拷贝到自己项目对应文件夹下或复制代码到对应文件中。

TIP

app.js 文件中包含获取和全局存储设备信息的代码，用于自定义 HeaderBar 时使用，如您使用到该组件，需要将对应代码复制到项目的 app.js 中。

# 使用示例

# 全局引入

app.json 中 usingComponents 对象下引入：

注意：dist/ 文件夹为本项目示例的组件存放目录，可根据实际项目文件夹进行修改。

{
  "usingComponents": {
		"m-switch": "dist/switch/index",
		"m-radio-group": "dist/radio-group/index",
		"m-radio": "dist/radio/index",
		"m-checkbox": "dist/checkbox/index",
		"m-toast": "dist/toast/index",
		"m-message": "dist/message/index",
		"m-button": "dist/button/index",
		"m-icon": "dist/icon/index",
		"m-tag": "dist/tag/index",
		"m-cell-group": "dist/cell-group/index",
		"m-cell": "dist/cell/index",
		"m-modal": "dist/modal/index",
		"m-badge": "dist/badge/index",
		"m-transition": "dist/transition/index"
	},
	"pages": [

	]
}

# 页面引入

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

注意：/dist/ 文件夹为本项目示例的组件存放目录，可根据实际项目文件夹进行修改。

"usingComponents": {
	"m-button": "/dist/button/index"
}

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

# 方法组件的使用

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

index.wxml 文件

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

<m-toast id="toast" />

index.js 文件 注意：

  • /dist/ 文件夹为本项目示例的组件存放目录，可根据实际项目文件夹进行修改。
  • 小程序中的 import 文件无法使用相对路径，只可以使用绝对路径，以当前文件所在路径向上查找。
import Toast from '../../dist/toast/toast'
Page({
  showToast() {
    Toast('simple toast')
  }
})

← 快速上手 →