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

最新推荐文章于 2024-05-15 15:05:46 发布

原创最新推荐文章于 2024-05-15 15:05:46 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #css3

小程序专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中引入并使用weUI框架，包括下载weUI的三种方式，以及通过页面按需加载模式引入weUI的具体步骤。通过在app.wxss中引入weui.wxss，并在需要的页面json文件中配置usingComponents，即可在wxml中使用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>