Article catalogue

• 3.1 view container assembly
• • 3.1.1 view container view
  • 3.1.2 scroll view
  • 3.1.3 movable view
  • 3.1.4 overlay view
  • 3.1.5 slider view swiper
• 3.2 content components
• • 3.2.1 icon
  • 3.2.2 progress bar
  • • 3.2.3 text
• 3.3 navigation components
• 3.4 applet UI framework
• • 3.4.1　WeUI
  • 3.4.2　iView
  • 3.4.3　Vant Weapp
• 3.5 summary

The development of wechat applet is actually a kind of front-end development. We want to develop a front-end program. The first thing we need to do is to create beautiful pages, and then deal with business code. In the eyes of users, the first thing they will see is the page, and they will not care about the implementation of the code. Therefore, when learning front-end development, they usually start with HTML and CSS, and then learn JavaScript. Therefore, this chapter first explains the applet components. After mastering the view container component and content component, and learning to use the navigation component to jump, we can start to build various pages.

The main knowledge points involved in this chapter are:

• View container components
• Content component
• Navigation components
• Applet UI framework

3.1 view container assembly

The main function of the view container component is "container". Unlike buttons, text, progress bars and other components, it is mainly composed of normal views, sliding views, dragging views, etc., just like the background canvases when we draw pictures.

3.1.1 view container view

View is the most basic view container, which is similar to the div tag in the front end. It does not have any size and color attributes, and usually exists as a basic container. The built-in properties of view are shown in Table 3.1.

[example 3-1]

(1) Create a new project components for the code display in this section. (2) Clear the code of index.wxml and index.js and enter the following code:

//index.wxml
<view>Applet view component test</view>

<button
style="margin-top:15px"
bindtap="testView">view</button>

<button
style="margin-top:15px"
bindtap="testScrollView">scroll-view</button>

<button
style="margin-top:15px"
bindtap="testMovableView">movable-view</button>

<button
style="margin-top:15px"
bindtap="testCoverView">cover-view</button>

<button
style="margin-top:15px"
bindtap="testSwiper">swiper</button>


//index.wxss
view{
margin:16px;
 }

//index.js
testview(){
    wx.navigateTo({
    url:'../view/view',})},
    testscrollView(){ wx.navigateTo({
    url:'../scroll-view/scroll-view'})
    
    testMovableView(){
    wx.navigateTo({
    url:'../movable-view/movable-view',})},
    testCoverView(){ wx.navigateTo({
    url:'../cover-view/cover-view',})},
    testSwiper(){ wx.navigateTo({
    url:'../swiper/swiper',})}}
    ...

(3) Run the code, and the effect of the home page is shown in the figure below. In the next section, we will enter the corresponding component display by clicking different buttons.

(4) Next, create a new page view to show the contents of this section. The code is as follows:

//view.wxml
<!--pages/view/view.wxml-->

<view>View container test</view>

<!--Parent view--><view
class="parent-view"
hover-class="hover-view" hover-start-time="1000" hover-stay-time="2000">

<!--Children view--><view
class="sub-view"
hover-stop-propagation="false"></view>

</view>



// view.wxss
.parent-view{
background-color:gray; 
    width:100%; 
    height:300px; 
    display:flex;
justify-content:center ;
    align-items:center;
}
.hover-view{
background-color:green;
}
.sub-view{
background-color:white; width:100px; height:100px;
}

The operation effect is shown in the figure.

[code analysis] we set hover class for parent view, and the color will change when clicking. In addition, the time of hover start time and hover stay time are extended, and readers can test the code by themselves. Finally, the hover stop propagation in the sub view is set to false, so clicking on the white part in the middle will not make the parent view change color. If you want to pass the click state, you only need to change it to true.

3.1.2 scroll view

After introducing the basic view container, let's move on to scroll view container. The built-in properties of scroll view are shown in the table.

[example 3-2]

Because the scroll view component supports many attributes and most of them are not commonly used, we only show the basic functions. The code is as follows:

//scroll-view.wxml
<text>
Horizontal scroll</text>
<scroll-view scroll-x>
<viewclass="scroll-view-item-x">aa</view>
<viewclass="scroll-view-item-x">bb</view>
<viewclass="scroll-view-item-x">cc</view>
</scroll-view>

<text>
Scroll vertically</text><scroll-view scroll-y>
<viewclass="scroll-view-item-y">aa</view>
<viewclass="scroll-view-item-y">bb</view>
<viewclass="scroll-view-item-y">cc</view>
</scroll-view>



// scroll-view.wxss 
scroll-view{
width:100%; 
    height:100px;
	white-space: nowrap;
}
.scroll-view-item-x{
    background-color: #7FFFAA width:100%;
    line-height:100px; 
    font-size:35px;
    display:inline-block;
    text-align: center;
}

.scroll-view-item-y{
background-color: #E1FFFF; 
    heiqht:100px;
	line-height:100px; 
    font-size:35px;
	text-align: center;
}

The operation effect is shown in the figure

[code analysis]
The application of scroll view is very simple. After we write the label, we use scroll-x and scroll-y to mark whether it is horizontal or vertical scrolling. In terms of style, we need to set wide and high attributes, which can meet most requirements.

3.1.3 movable view

Dragging is also a common operation in the use of mobile phones. Next, let's show how to use the movable view container. The built-in properties of movable view are shown in the table.

[example 3-3]

Use the movable view component to display the drag box. The code is as follows:

// movable-view.wxml
<movable-area style="background-color: #7FFFAA; width: 1000; height:200px">
<movable-view style="background-color:white;width:50px;height:50px'"
direction="all"></movable-view>
</movable-area>

The operation effect is shown in the figure.

[code analysis]
The code of this component is relatively small. We only need to set the movable area as the background board and create a movable view in it to drag. The drag direction is usually set to all. The movable view must be in the movable area component and must be a direct child node, otherwise it cannot be moved.

3.1.4 overlay view

Cover viewover view is a text view container that can be overlaid on native components, including map, video, canvas, camera, live player, live pusher, and can be nested with cover view and cover image. The built-in attributes of cover view are shown in the table.

There is only one attribute of cover view, which is not a common component. The same effect can be achieved by using the position of CSS for the coverage function, but the direct use of this function can also improve some development efficiency.

[example 3-4]

Create a map component and overlay it with cover view. The code is as follows:

// cover-view.wxml
<map style="width:100%; height:300px x; ">
  <cover-view>
<button style="margin: 15px; background-color: #7FFFAA; "> refresh </button>
  </cover-view>
  </map>

[code analysis] setting cover view in the map component is equivalent to that in a canvas, the coordinates will return to the upper left corner, and then you can normally write the content you want to show and set the style.

3.1.5 slider view swiper

swiper is a slider view container, which can generally be used as an effect such as a carousel map. Currently, apps in the market usually make a rotation chart at the top of the home page, so this component is still very commonly used. The built-in attributes of the wiper are shown in the table.

The default value of easing function is default. It also supports linear animation, easeInCubic, easeOutCubic and easeinouutcubic. Readers can choose according to their preferences. [example 3-5]

The properties of wiper are complex. We choose several common ones to demonstrate. The code is as follows:

 // cover-view.wxml 
<!--pages/swiper/swiper.wxml--><swiper
autoplay
indicator-dots
interval="3000"
duration="2000"
easing-function="easeInOutCubic"><swiper-item>
<view class="item-view">A</view>
</swiper-item>
<swiper-item>
<view class="item-view">B</view></swiper-item><swiper-item>
<viewclass="item-view">C</view>
</swiper-item></swiper>


// swiper.wxss
/* pages/swiper/swiper.wxss */

swiper {
height:200pxi}

.item-view{
	background-color: #7FFFAA; 
    height:200px；
	line-height:200px; font-size:25px；
	text-align: center;
}

The operation effect is shown in the figure.

[code analysis]
Swiper sets the attributes of automatic scrolling, display indicator, switching interval, switching speed, animation effect, etc., which can be found in the table. Swiper item must be used in swiper. Usually, some pictures will be placed in the rotation diagram. For the convenience of demonstration, this example directly uses the text of ABC to replace it.

3.2 content components

Compared with the view component, the content of the content component will be much less. In wechat applet, only icon (icon component), text (text component), rich text (rich text component) and progress (progress bar component) are provided. Usually, everyone will choose to set CSS styles to change the text effect, so rich text components are not very commonly used. Therefore, in this section, you can mainly master the icon, text and progress bar components.

3.2.1 icon

In fact, the function of icon can also be realized by image. The main reason is that the applet officially provides many built-in icons for developers to use, and these icons are consistent with the system style. The built-in attributes of icon are shown in the table.

The style corresponding to the type attribute of icon is shown in the table.

[example 3-6]

Before demonstrating the code, we first modify index.wxml and index.js to add the demonstration button of the basic content component.

 // index.wxml
<view style="margin-top:15px">Applet basic content component test</view>
<button
style="margin-top:15px"
bindtap="testIcon">icon</button>

<button
style="margin-top:15px"
bindtap="testProgress">progress</button>

<button
style="margin-top:15px"
bindtap="testText">text</button>


// index.js

···
testIcon() {
	wx.navigateTo({
	url:'../icon/icon',})
}，
testProgress(){
    wx.navigateTo({
    url:'../progress/progress',})
}，
testText(){
	wx.navigateTo({
	url:'../text/text',})
}

The effect of the home page is shown in the figure.

Next, continue to demonstrate the icon component. It doesn't have many attributes. Here are three attribute effects directly demonstrated. The code is as follows:

// icon.wxml
<!--pages/icon/icon.wxml-->
<view class="icon-type">
<icon wx:for="{{iconType}}" type="{{item}}" size="40" /></view>

<view class="icon-size">
<icon wx:for="{{iconSize}}" type="success" size="{{item}}" />
</view>

<view class="icon-color">
<icon wx:for="{{iconColor}}" type="success" size="40" color="{{item}}"
/>
</view>


// icon.js
···
data:{
iconType:[
'success','success no circle','info','warn','waiting','cancel'
'download', 'search','clear'
]，
iconSize:[20，30，40，50，60，70]， iconColor:[
'red','orange','yellow','green','rgb(0,255,255)','blue','purple]，}
···

The operation effect is shown in the figure.

[code analysis]
The first view is used for different type styles, the second view shows the change of size, and the last one is the change of color.

3.2.2 progress bar

Progress is a progress bar component. In daily development, a progress bar is very common. A progress bar is basically used where users need to wait. The self-contained attributes of progress are shown in the table.

[example 3-7]

Use the progress component to create a progress bar from 0 to 100. The code is as follows:

// progress.wxml
<!--pages/icon/icon.wxml-->

<proqress percent="{{percent}}" stroke-width="12" show-info active />



// progress.js
...
data:{
percent:0}，
/**
*Life cycle function -- monitor page loading*/
onLoad:function (options){
this.setData({ percent:100})}，
···

The operation effect is shown in the figure.

[code analysis]
We control the percentage through percent, adjust the width through stroke width, and display the progress through show info. The final active is also indispensable, otherwise the progress will jump to 100% without animation. We can see from the figure that the progress has reached 27%. Readers can run the code by themselves and see the animation of the progress bar.

3.2.3 text

Text is the most basic text component. It provides some convenient properties, so try to use text instead of view components when processing text. The built-in properties of text are shown in the table.

[example 3-8]

Use the text component to demonstrate the selectable and space attributes. The code is as follows:

//text.wxml
<!--pages/text/text.wxml-->

<text selectable>Optional text
</text>
<text>A Multiple spaces are not supported
</text> 

<text space="ensp">B Chinese character space half size
</text>

<text space="emsp">C Chinese character space size
</text>

<text space="nbsp">D Space size set according to font</text>

The operation effect is shown in the figure

[code analysis]
It can be seen that after setting selectable, long press this text to select it. A. The four lines of B, C and D respectively correspond to the status of the space setting, which can be viewed by referring to the description of the table.

3.3 navigation components

In the previous chapter, we talked about two ways of page Jump. This section describes the navigation component navigator in detail. In addition to the jump function, this component also includes jump applet and other functions, so it will be explained separately. The navigator component completes the jump between pages and applets by setting links and jump methods. The built-in attributes of navigator are shown in the table.

The legal values of open type are shown in the table.

[example 3-9]

Add a page Jump in index.wxml. The test jump page is view, and the code is as follows:

//index.wxml
···
<view style="text-align: center;">
<navigator url="/pages/view/view">Jump to new page</navigator>
</view>

The operation effect is shown in the figure

[code analysis]
Click the "jump to new page" button in the figure to complete the jump. This jump method can effectively reduce the number of code in JS files. If the jump business logic is relatively simple, it is recommended to use navigator to jump.

3.4 applet UI framework

After learning the basic component usage, let's take a look at the UI framework. In front-end development, we usually choose a set of UI framework to improve our efficiency by leaps and bounds. Wechat applets don't have as long a history as the front end, and there will be a little less choice. Here we choose some famous frameworks to recommend. These UI frameworks can be found in wechat to show the applet, so that developers can view its UI style.

3.4.1　WeUI

WeUI is a set of UI designed by wechat official team for wechat applet, which is very consistent with the original style of wechat. The update is relatively timely and the function is relatively simple. It only includes some common UI components, and the style is shown in the figure.

Official website

3.4.2　iView

iView is based on vue JS' View UI framework. The author is the talkingdata team. The UI framework has rich functions and beautiful styles, which is a worthwhile choice. The style is shown in the figure. Official website: https://github.com/TalkingData/iview-weapp .

3.4.3　Vant Weapp

Vant web is a small program version of vant, the mobile component library of youzan team. Their UI styles are basically the same, and they provide a consistent API interface, which is the first choice for users who are used to using vant. The style of vant web is shown in the figure. Official website: https://github.com/youzan/vant-weapp .

3.5 summary

This chapter introduces the view container and basic content components of wechat applet, and recommends several commonly used applet UI frameworks. In terms of content, the knowledge points in this chapter are relatively important, and they are almost always used in the later development. Although there are a lot of tables and scattered knowledge points in this chapter, it is not necessary to memorize them all before learning the following content. We have encountered problems in daily development. We can also solve the problems by reviewing them. If we use them more, we will naturally remember them by heart.