Using Weui Component Library in Mini Programs (1)

WeUI

Yesterday, I introduced the simpler introduction of the weui component library, but weui actually includes three parts. The first part is the style library. Basically, you can import a style sheet-based style. The second part is the component library. A variety of components can be used, the third part is the extended component library, some high-level components.

WeUI style introduction

You need to download the style first, download the download address,
download the directory after downloading,

find the dist/style/weui.wxss and

paste it into the style directory of your project.

If you need to take effect, you need to import the external style in app.wxss, of course there is Several basic styles are not available, and they need to be defined in app.wxss

@import "style/weui.wxss";
/**app.wxss**/
page {
    
    
  height: 100%;
}
.page{
    
    
  min-height: 100%;
  background-color: var(--weui-BG-0);
  color: var(--weui-FG-0);
  font-size: 16px;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
image {
    
    
  max-width: 100%;
  max-height: 100%;
}
.link {
    
    
  display: inline;
  color: var(--weui-LINK);
}
.fadeIn {
    
    
  animation: fadeIn 0.3s forwards;
}
.fadeOut {
    
    
  animation: fadeOut 0.3s forwards;
}
@keyframes fadeIn {
    
    
  0% {
    
    
      opacity: 0;
  }
  100% {
    
    
      opacity: 1;
  }
}
@keyframes fadeOut {
    
    
  0% {
    
    
      opacity: 1;
  }
  100% {
    
    
      opacity: 0;
  }
}
.weui-msg__extra-area {
    
    
  position: static;
}
.page__hd {
    
    
  padding: 40px;
}
.page__bd {
    
    
  padding-bottom: 40px;
}
.page__bd_spacing {
    
    
  padding-left: 15px;
  padding-right: 15px;
}


.page__title {
    
    
  text-align: left;
  font-size: 20px;
  font-weight: 400;
}

.page__desc {
    
    
  margin-top: 5px;
  color: var(--weui-FG-1);
  text-align: left;
  font-size: 14px;
}
.weui-cell_example:before{
    
    
  left:52px;
}

Then weui style library is imported

Use of basic component library

Which component we need to use, stick the corresponding code according to the document. For example, if I need to use the badge component, paste the following code in index.wxml

<view class="page">
    <view class="page__hd">
        <view class="page__title">Badge</view>
        <view class="page__desc">徽章</view>
    </view>

    <view class="page__bd">
        <mp-cells title="新消息提示跟摘要信息后，统一在列表右侧">
            <mp-cell title="单行列表" link>
                <view slot="footer">
                    <view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view>
                    <mp-badge style="margin-left: 5px;margin-right: 5px;" ext-class="blue"/>
                </view>
            </mp-cell>
        </mp-cells>

        <mp-cells title="未读数红点跟在主题信息后，统一在列表左侧">
            <mp-cell>
                <view slot="title" style="position: relative;margin-right: 10px;">
                    <image src="/images/pic_160.png" style="width: 50px; height: 50px; display: block"/>
                    <mp-badge content="99+" style="position: absolute;top: -.4em;right: -.4em;"/>
                </view>
                <view>联系人名称</view>
                <view style="font-size: 13px;color: #888888;">摘要信息</view>
            </mp-cell>
            <mp-cell link>
                <view style="display: inline-block; vertical-align: middle">单行列表</view>
                <mp-badge content="8" style="margin-left: 5px;"/>
            </mp-cell>
            <mp-cell link>
                <view style="display: inline-block; vertical-align: middle">单行列表</view>
                <mp-badge style="margin-left: 5px;" content="New"/>
            </mp-cell>
        </mp-cells>
    </view>
</view>

Introduce components in index.json

{
    
    
  "usingComponents": {
    
    
    "mp-dialog": "weui-miniprogram/dialog/dialog",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-badge": "weui-miniprogram/badge/badge"
  }
}

Preview effect

Expansion component usage

It’s a bit more troublesome to use extension components, because it involves the use of external npm modules.
First, right-click in the miniprogram directory and select the built-in terminal to open,

and enter the following commands in turn

npm init
npm install

Click Details-"Local Settings, tick the use of npm module,

and install the required npm module in the terminal

npm i @miniprogram-component-plus/col --save
npm i @miniprogram-component-plus/row --save

Then click on the tool to build

the effect of npm after the build is completed.

According to the document, introduce the extension component
index.wxml

<view class="page__desc">三列均分布局</view>
    <view>
        <mp-row>
          <mp-col span="{
    
    {8}}">
            <view>
              <view class="col">
              aaa
              </view>
            </view>
          </mp-col>
          <mp-col span="{
    
    {8}}">
            <view>
              <view class="col">
              bbb
              </view>
            </view>
          </mp-col>
          <mp-col span="{
    
    {8}}">
            <view>
              <view class="col">
              ccc
              </view>
            </view>
          </mp-col>
        </mp-row>
</view>

index.json

{
    
    
  "usingComponents": {
    
    
    "mp-col": "@miniprogram-component-plus/col",
    "mp-row": "@miniprogram-component-plus/row"
  }
}

You can see the effect