小程序如何引入weui样式 小程序如何使用weUI样式插件 weUI如何使用

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>

猜你喜欢

转载自blog.csdn.net/Taurus_0811/article/details/104554331