# 安装文档
从 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')
}
})