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)
The property name type The default value instructions
selectable Boolean false Text optional (deprecated)
decode Boolean false Whether the decoding
user-select boolean false Whether text is optional, this property causes the text node to appear inline-block
space string Display continuous whitespace
code 
  <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
The property name type The default value instructions
src String Image resource address
mode String scaleToFill Picture cropping, zoom mode
lazy-load Boolean false Lazy loading of images

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

The property name type The default value instructions
indicator-dots Boolean false Whether to display panel indicator points
indicator-color Color rgba(0, 0, 0, .3) Indicator color
indicator-active-color Color # 000000 The color of the currently selected indicator
autoplay Boolean false Whether to switch automatically
interval Number 5000 Auto switch time interval
circular Boolean false S Indicates whether to cycle round
## 1. swiper
Slider view container.

2. swiper-item

The slider defaults to 100% width and height

Fifth, the navigator

Navigator: Navigation components are similar to hyperlink tabs

The property name type The default value instructions
target String self The target on which the jump occurs defaults to the current applet, optional self/miniProgram
url String Jump links within the current applet
open- type String navigate Jump way

Open-type Valid values:

value instructions
navigate Keep the current page and go to a page in the application. But you cannot jump to the Tabbar page.
redirect Close the current page and switch to a page in the application. However, jumping to the Tabbar page is not allowed.
switchTab Jump to the tabBar page and close all other non-Tabbar pages
reLaunch Close all pages and open to a page within the app
navigateBack Close the current page and return to the previous page or multi-level page. You can use getCurrentPages to get the current page stack and determine how many layers you need to return.
exit Exit the miniProgram, effective when target=”miniProgram”

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

value instructions
default The default size
mini Small size

The valid value of type

value instructions
primary green
default The default
warn red

The valid value of form-type

value instructions
submit Submit the form
reset Reset the form

Open-type Specifies the valid value

value instructions
contact Open a customer service session. If the user clicks on the message card during the session and returns to the applet, the user can get specific information from the BindContact callback.specify
share Trigger user forward, you are advised to read before usingUser guide
getPhoneNumber To get the user’s phonenumber, you can get the user’s information from the bindGetPhonenumber callback,specify
getUserInfo To getuser information, you can getuser information from the bindGetUserInfo callback
launchApp Open APP, you can set the parameters to be transmitted to APP through app-parameter attributespecify
openSetting The Authorization Settings page is displayed
feedback The Feedback page is displayed, and users can submit and upload the feedbackThe log, developers can log inSmall program management backgroundEnter the page of customer Service Feedback in the left menu to obtain the feedback content
Open-type contact implementation process
  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 📑