Wechat applet - "do you really understand the use of applet components?

️ Author's brief introduction ： Hello everyone , I am also worldly 、 A college student who is eager to reserve his knowledge

Personal home page ： Also worldly 、

* Series column ： Wechat applet

motto ： Life can burn , Can also be corrupt , I would like to burn , Use up all the light .

introduction

       after web Learning of front-end development , I believe you have a certain in-depth understanding of front-end development , Today, I opened a wechat applet column , Mainly want to further develop in the direction of mobile terminal development , For me, the first stop for writing mobile blog posts is small program development , I hope the friends who read my article can help you .

Catalog

Applet — Components

Classification of components ：( Key knowledge is marked in red )

View container class components

Common view container class components

view Use of components （ and web Front-end div And similar , Just call the kettle and draw the ladle ）

scroll-view Use of components （ Achieve vertical scrolling ）

swiper and swiper-item Use of components （ Achieve the effect of carousel map ）

swiper Introduction to common properties of components

Basic content components

Common basic content components

text Use of components （ Long press the selected text content ）

rich-text Use of components （ hold HTML The string is rendered as the corresponding UI structure ）

Other common components

button Basic use of buttons

image Basic use of components

image In the component mode Attribute explanation

---

Applet — Components

The components in the applet are provided by the host environment , Developers can quickly build a beautiful page structure based on components .

Classification of components ：( Key knowledge is marked in red )

① View container         ② Basic content         ③ Form components         ④ Navigation components         ⑤ Media components         ⑥map Map components         ⑦canvas Canvas components         ⑧ Opening ability         ⑨ Native component         ⑩ Accessibility 、 Navigation bar and page attribute configuration node .      

The original components are divided into nine categories Now it is divided into twelve categories , Added description of native components 、 Navigation bar and page attribute configuration node , Want to know more about components , I recommend it   Official wechat documents Description of components .

View container class components

name	Functional specifications	name	Functional specifications
cover-image	Picture view over native components	page-container	Page container
cover-view	Text view over native components	scroll-view	Scrollable view area
match-media	media query Match detection node	share-element	Shared elements
movable-area	movable-view Mobile area of	swiper	Slider view container
movable-view	Mobile view container , You can drag and drop in the page	view	View container
swiper-item	It can only be placed in swiper In the component , Width and height are automatically set 100%

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

② scroll-view

        ● Scrollable view area

        ● It is often used to achieve the effect of scrolling lists

③ swiper and swiper-item

        ● Carousel map container assembly and Shuffling figure item Components

view Use of components （ and web Front-end div And similar , Just call the kettle and draw the ladle ）

<!--pages/person/person.wxml-->
<view class="view">
   I am equivalent to  div  The container components of 
  <view class="content"> You want to know more <span> Wechat applet </span> You can pay attention to the author </view>
  <view class="content1">csdn Search is also worldly 、 Oh </view>
</view>

/* pages/person/person.wxss */
.view{
  color: #f00;
  text-align: center;
  font-weight: bold;
}
.content span{
  font-size: 1.5em;
  color: #008c8c;
}
.content{
  color: #0f0;
  margin-top: 30px;
}
.content1{
  margin-top: 30px;
  color: #ffd345;
  font-size: 25px;
}

 

scroll-view Use of components （ Achieve vertical scrolling ）

<!-- scroll-y  attribute ： Allow vertical scrolling  -->
<!-- scroll-x  attribute ： Allow horizontal scrolling  -->
<!--  Be careful ： When using vertical scrolling , Must give scroll-view  A fixed height  -->
<scroll-view class="container1" scroll-x>
  <view> mobile phone </view>
  <view> The computer </view>
  <view> Flat </view>
  <view> keyboard </view>
</scroll-view>

/* pages/person/person.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: #f00;
}
.container1 view:nth-child(2){
  background-color: #0f0;
}
.container1 view:nth-child(3){
  background-color: #00f;
}
.container1 view:nth-child(4){
  background-color: gold;
}
.container1{
  border: 1px solid red;
  width: 100px;
  height: 200px;
}

Wechat applet container There is a default style , One of them will be display:flex It doesn't work , It is recommended to avoid keywords with special meanings when writing class names , Otherwise, the program may appear some Bug.

swiper and swiper-item Use of components （ Achieve the effect of carousel map ）

<!--  Carousel area  -->
<!-- indicator-dots  attribute ： The display panel points  -->
<swiper class="swiper-container" indicator-dots>
<!--  first page  -->
<swiper-item>
  <view class="item"> mobile phone </view>
</swiper-item>
<!--  The second page  -->
<swiper-item>
  <view class="item"> The computer </view>
</swiper-item>
<!--  The third page  -->
<swiper-item>
  <view class="item"> Flat </view>
</swiper-item>
<!--  Page four  -->
<swiper-item>
  <view class="item"> keyboard </view>
</swiper-item>
</swiper>

/* pages/person/person.wxss */
.swiper-container{
  height: 150px; /*  Width of the carousel chart container  */
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: #f00;
}
swiper-item:nth-child(2) .item{
  background-color: #0f0;
}
swiper-item:nth-child(3) .item{
  background-color: #00f;
}
swiper-item:nth-child(4) .item{
  background-color: #ff0;
}

swiper Introduction to common properties of components

attribute	type	The default value is	explain
indicator-dots	boolean	false	Display panel indicator
indicator-color	color	rgba(0,0,0,.3)	Indicate the color
indicator-active-color	color	#000000	The currently selected indicator color
autoplay	boolean	false	Auto switch or not
interval	number	5000	Auto switch interval
circular	boolean	false	Whether to adopt the joint sliding

According to the above properties, you can make a simple dynamic graph , Take a closer look at the changes .

Basic content components

name	Functional specifications
text	Text
rich-text	Rich text
icon	Icon components
progress	Progress bar

Common basic content components

① text

        ● Text component

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

② rich-text

        ● Rich text component

        ● Support HTML The string is rendered as WXML structure

text Use of components （ Long press the selected text content ）

Official documents used before selectable Has been abandoned , Now use user-select, Let's have a look here .

<view>
   Copy the mobile number ：
  <!--  Copy to add  user-select  Talent  -->
  <text user-select>13333333333</text>
</view>

rich-text Use of components （ hold HTML The string is rendered as the corresponding UI structure ）

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

 

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 、 Obtain user authorization, etc )

② image

        ● Picture components

        ●image The default width of the component is about 300px, The height is about 240px

button Basic use of buttons

<view>------- adopt  type  Specify the button type ---------</view>

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

<view>--------size="mini"  Small size buttons --------</view>

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

<view>------------plain  Hollow button --------------</view>

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

 

image Basic use of components

<!--  Empty picture  -->
<image></image>
<!--  picture  -->
<image src="/images/1.jpeg" mode="aspectFill"></image>

image{
  border: 1px solid red;
}

image In the component mode Attribute explanation

image In the component mode Property is used to specify the cut and zoom mode of the picture , frequently-used mode Properties are as follows ：

mode value	explain
scaleToFill	( The default value is ) Zoom mode , Do not keep aspect ratio zooming picture , Stretch the width and height of the picture to fill image Elements
aspectFit	Zoom mode , Keep the aspect ratio scaled , Make the long edges of the picture fully visible
aspectFill	Zoom mode , Keep the aspect ratio scaled , Only make sure that the short side of the picture is fully displayed
widthFix	Zoom mode , The width does not change , Automatic height change , Keep the aspect ratio of the original image unchanged
heightFix	Zoom mode , The height remains the same , The width changes automatically , Keep the aspect ratio of the original image unchanged

That's all for today's explanation , The next issue continues to explain the development of cognitive applet ！