Common components

This section focuses on WeChat small common view, the layout of the components in the program text, rich text, button, the image, the navigator, icon, swiper, radio, the checkbox, etc

One, the view

View instead of div tag

 <view hover-class="h-class"</view>Copy the code

Second, the text

text:

1. Text labels
2. You can only nest text
3. Long press text to copy (only this TAB has this function)

  <text selectable="{{false}}" decode="{{false}}"> general & have spent Tong < / text >Copy the code

Third, the image

image:

1. Image label. The default width of the image component is 320px and the default height is 240px
2. Lazy loading support

Valid values of mode: Mode has 13 modes, 4 of which are scale mode and 9 of which are cropping mode. | | mode value | show | | – | — – | — – | — – | | zoom | scaleToFill | don’t keep the aspect ratio zoom pictures, make pictures wide high stretch up to completely fill the image element | | zoom | aspectFit | keep aspect ratio zoom pictures, Make the long side of the picture fully visible. In other words, the image can be displayed completely. | | | zoom aspectFill | keep aspect ratio zoom pictures, only guarantee the picture short edge can be fully displayed. That is, the image is usually complete only in the horizontal or vertical direction, the other direction will be truncated. Scaling | | | widthFix | width, height automatically change, keep the original aspect ratio unchanged | | | cutting top | zoom pictures, not only at the top of the image area | | | | cutting bottom don’t zoom pictures, Only show the bottom of the picture area | | | cutting center | zoom pictures, not only the middle area of the image | | | cutting left | zoom pictures, not only on the left of the image area | | | | cutting right not zoom pictures, Only show the right area of the image | | tailoring | top left | zoom pictures, not only a top left area of the image | | tailoring | | top right zoom pictures, not only the top right of the image area | | | cutting bottom left | don’t zoom pictures, Show only the left bottom of the image area | | | | cutting bottom right zoom pictures, not only show the right of the picture area |

Four, swiper

swiper:Wechat has a built-in rote map componentThe default width is 100% and the height is 150px

2. swiper-item

The slider defaults to 100% width and height

Fifth, the navigator

Navigator: Navigation components are similar to hyperlink tabs

Open-type Valid values:

Six, rich text

Rich-text: a rich text tag can parse a string into a corresponding tag, similar to the V — HTML function in VUE

Code:

JAVASCRIPT
WXML
const htmlSnip =
`<div class="div_class">
  <h1>Title</h1>
  <p class="p"> Life is&nbsp; <i>like</i>&nbsp; a box of <b>&nbsp; chocolates</b>. </p> </div> `const nodeSnip =
`Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'You never know what you're gonna get.'
      }]
    }]
  }
})
`

Page({
  onShareAppMessage() {
    return {
      title: 'rich-text',
      path: 'page/component/pages/rich-text/rich-text'
    }
  },

  data: {
    htmlSnip,
    nodeSnip,
    renderedByHtml: false,
    renderedByNode: false,
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: #1AAD19;' }, children: [{ type: 'text', text: 'You never know what you\'re gonna get.'
      }]
    }]
  },
  renderHtml() {
    this.setData({
      renderedByHtml: true
    })
  },
  renderNode() {
    this.setData({
      renderedByNode: true
    })
  },
  enterCode(e) {
    console.log(e.detail.value)
    this.setData({
      htmlSnip: e.detail.value
    })
  }
})
Copy the code

Nodes attribute

Nodes attribute support string and tag node array attribute | | | | type required | note | — – | — – | — – | — – | — – | — – | | name | | tag name string is | | | support partially trusted HTML node attrs | properties Whether | object | | support partially trusted attribute, follow Pascal nomenclature | children | | child node list array structure and nodes whether | | consistent text node: Type = “text properties | | show note | — – | | | type required | — – | — – | — – | — – | — – | | text | | text string is | | support entities

Bug & Tip

• Nodes The String type is not recommended for nodes because the performance deteriorates.
• The rich–text component blocks all node events.
• The attrs attribute does not support ID, but class.
• The name attribute is case-insensitive.
• If an untrusted HTML node is used, that node and all its children will be removed.
• The IMG tag only supports network images.

Seven, the button

button: Code:

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>
Copy the code

| | | | type default value required | show | — – | — – | — – | — – | — – | — – | | size | string | default whether | | | the size of the button type | string | default whether | | | button style type plain | Boolean whether | | | false button is hollow out, Background color transparent | disabled | Boolean whether whether | | | false to disable | loading | Boolean whether | | | false name before whether or not to bring a loading icon | form -type | string | | | for the form Components, click will trigger the form component respectively submit/reset event | open -type | string | | no | WeChat legal value of the ability to open the size

The valid value of type

The valid value of form-type

Open-type Specifies the valid value

1. Change the appID of wechat small program from the test number to its own AppID
2. Log in to the official website of wechat mini program and add customer service — wechat and Wechat
3. Prepare two accounts for the demo

(1) ordinary user A (2) Customer service – wechat B

Eight, the icon

icon:Icon. The default unit of length for component properties is px, and 2.4.0 supports passing in units (RPX /px). | | | | type default value required | show | — – | — – | — – | — – | — – | — – | | type | string | | | is the type of icon, valid values: success, success_no_circle, info, warn, waiting, cancel, download, search, The clear | size | number/string 23 whether | | | | the size of the icon color | string | | no | icon color, the color with CSSCode: js

Page({
  data: {
    iconSize: [20.30.40.50.60.70],
    iconType: [
      'success'.'success_no_circle'.'info'.'warn'.'waiting'.'cancel'.'download'.'search'.'clear'
   ],
    iconColor: [
      'red'.'orange'.'yellow'.'green'.'RGB (0255255)..'blue'.'purple'],}})Copy the code

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view> <view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view> <view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>
Copy the code

Nine, radio

radio:You can use the color property to change the color matchingradio-groupUsed togetherCode: js

Page({
  onShareAppMessage() {
    return {
      title: 'radio',
      path: 'page/component/pages/radio/radio'
    }
  },

  data: {
    items: [
      {value: 'USA', name: 'the United States'},
      {value: 'CHN', name: 'China', checked: 'true'},
      {value: 'BRA', name: 'Brazil'},
      {value: 'JPN', name: 'Japan'},
      {value: 'ENG', name: 'the UK'},
      {value: 'FRA', name: 'France'},
    ]
  },

  radioChange(e) {
    console.log('Radio change event with value:', e.detail.value)

    const items = this.data.items
    for (let i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value === e.detail.value
    }

    this.setData({
      items
    })
  }
})
Copy the code

wxml:

<view class="page-body">
  <view class="page-section">
    <view class="page-section-title"> Default style </view> <labelclass="radio">
      <radio value="r1" checked="true"/> Select </label> <labelclass="radio">
      <radio value="r2"/> Unselected </label> </view> <viewclass="page-section">
    <view class="page-section-title"</view> <viewclass="weui-cells weui-cells_after-title">
      <radio-group bindchange="radioChange">
        <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">

          <view class="weui-cell__hd">
            <radio value="{{item.value}}" checked="true"/>
          </view>
          <view class="weui-cell__bd">{{item.name}}</view>
        </label>
      </radio-group>
    </view>
  </view>
</view>
Copy the code

Ten, the checkbox

checkbox:

The color property can be used to change the color, need to matchcheckbox-groupUsed together

conclusion

The above is the content of this section. This article only briefly introduces the use of common components in wechat applet, and it will continue to be supplemented later

Related content:

• Wechat small program from entry to ground tutorial (01)
• The template syntax of wechat Applets (02)
• Wechat small program from entry to ground tutorial (03)
• Common Components for getting started with wechat Applets (04)
• Wechat Applets for starting custom Components (05)

More related articles and my contact information I put here: gitee.com/haiyongcsdn…

And finally, don’t forget ❤ or 📑