weUI在微信小程序中的引用
小程序如果想引入weUI,需要以下几步,本文章主要介绍通过页面按需加载引入模式:
第一:下载weUI,三种方式
一、可以通过npm方式下载构建,npm包名为 weui-miniprogram
npm install weui-miniprogram
二、去github下载
https://github.com/Tencent/weui-wxss
三、可以通过页面按需下载(推荐)
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
注:根据个人习惯及项目具体情况采取不同的下载方式即可。
第二:引入weUI
一、将下载的包放在app.js同级目录下
二、首先要在app.wxss里面引入weui.wxss,根据自己目录修改地址哦,比如我采用的是按需加载模式:
@import './components/weui-wxss/dist/style/weui.wxss';
三、在需要引入weUI插件样式的页面的json文件中引入
weUI组件样式前都加了前缀 mp-,根据需要可添加
{
"usingComponents": {
"mp-searchbar": "../../../components/searchbar/searchbar",
"mp-checkbox-group": "../../../components/checkbox-group/checkbox-group",
"mp-checkbox": "../../../components/checkbox/checkbox",
"mp-cells": "../../../components/cells/cells",
"mp-cell": "../components/cell/cell",
"mp-badge": "../components/badge/badge",
"mp-gallery": "../components/gallery/gallery",
"mp-loading": "../components/loading/loading",
"mp-toptips": "../components/toptips/toptips",,
"mp-form": "../components/form/form",
"mp-slideview": "../components/slideview/slideview",
"mp-uploader": "../components/uploader/uploader",
"mp-dialog": "../components/dialog/dialog",
"mp-msg": "../components/msg/msg",
"mp-toptips": "../../components/toptips/toptips",
"mp-halfScreenDialog": "../../components/half-screen-dialog/half-screen-dialog",
"mp-actionSheet": "../../components/actionsheet/actionsheet",
"mp-navigation-bar": "../components/navigation-bar/navigation-bar"
}
}
四、 然后可以在对应页面的 wxml 中直接使用该组件
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
<view>test content</view>
</mp-dialog>