Common components of wechat applet

Catalog

One 、 Common view container class components

① view

② scroll-view

③ swiper and swiper-item

Two 、 Common basic content components

① text

② rich-text

3、 ... and 、 Other common components  

① button

② image

③ navigator

One 、 Common view container class components

① view

• Normal view area
• Be similar to HTML Medium div, Is a block level element
• Commonly used to achieve the layout effect of the page

first.wxml

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

first.wxss 

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightskyblue;
}

.container1 view:nth-child(3) {
  background-color: lightcoral;
}

.container1 {
  display: flex;
  justify-content: space-around;
}

② scroll-view

• Scrollable view area
• It is often used to achieve the effect of scrolling lists

second.wxml

<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

second.wxss

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightskyblue;
}

.container1 view:nth-child(3) {
  background-color: lightcoral;
}

.container1 {
  border: 1px solid red;
  height: 120px;
  width: 100px;
}

③ swiper and swiper-item

• Carousel map container assembly and Shuffling figure item Components  

third.wxml

<swiper class="swiper-container" indicator-dots>
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

third.wxss

.swiper-container {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: lightgreen;
}

swiper-item:nth-child(2) .item {
  background-color: lightblue;
}

swiper-item:nth-child(3) .item {
  background-color: lightpink;
}

Two 、 Common basic content components

① text

• Text component
• Be similar to HTML Medium span label , It's an in-line element

adopt text Component's selectable attribute , Long press the selected text content ： 

fouth.wxml 

<view>
   The mobile phone supports the long press selection effect 
  <text selectable>13800005006</text>
</view>

② rich-text

• Rich text component
• Support HTML The string is rendered as WXML structure  

  adopt rich-text Component's nodes Attribute node , hold HTML The string is rendered as the corresponding UI structure ：

fifth.wxml

<rich-text nodes="<h1 style='color: red;'> title </h1>"></rich-text>

3、 ... and 、 Other common components  

① button

• Button components
• Functional ratio HTML Medium button Rich buttons
• adopt open-type Attribute can call various functions provided by wechat （ Customer service 、 forward 、 Get user authorization 、 Access to user information, etc ）

sixth.wxml 

<button> Default button </button>
<button type="primary"> Main tone button </button>
<button type="warn"> Warning button </button>

<button size="mini"> Default button </button>
<button type="primary" size="mini"> Main tone button </button>
<button type="warn" size="mini"> Warning button </button>

<button size="mini" plain> Default button </button>
<button type="primary" size="mini" plain> Main tone button </button>
<button type="warn" size="mini" plain> Warning button </button>

② image

• Picture components image
• The default width of the component is about 300px、 The height is about 240px

image Component's mode Property is used to specify the cropping and scaling mode of the picture , frequently-used mode The property values are as follows ： 

seventh.wxml

<image></image>
<image src="/images/1.jpg"></image>

 seventh.wxss

image {
  border: 1px solid red;
}

③ navigator

• Page navigation component
• Be similar to HTML Medium a link

 1. Set the title of the navigation bar

Setup steps ：app.json -> window -> navigationBarTitleText demand ： Put the title on the navigation bar , From the default “WeChat” It is amended as follows “ Black horse programmer ”, The effect is shown in the figure ：

2. Set the background color of the navigation bar

Setup steps ：app.json -> window -> navigationBarBackgroundColor demand ： Change the background color of the navigation bar title , From the default #fff It is amended as follows #2b4b6b , The effect is shown in the figure ：

 3. Set the title color of the navigation bar

Setup steps ：app.json -> window -> navigationBarTextStyle demand ： Color the title on the navigation bar , From the default black It is amended as follows white , The effect is shown in the figure ：

Be careful ： navigationBarTextStyle The optional values for are black and white

Wechat applet development document ：view | Wechat open documents (qq.com)

Share the learning notes website I created ：George's Notes (gitee.io)