preface

We use wechat for communication and payment, and the rapid rise of small programs relying on wechat is considerable. Today we will start from the most basic step by step to understand the composition of the small program, let us write their first micro channel small program ~

1. Host environment

1. What is the host environment?

Host environment refers to the dependent environment necessary for a program to run, for example:

Android and IOS are two different hosting environments
The Android version of wechat App does not run on IOS. So Android is the host environment for Android software, and software without the host environment is meaningless

2. Host environment of applets

Mobile wechat is the host environment of small programs, as shown in the figure:

Applets take advantage of the capabilities provided by the host environment to accomplish many functions that ordinary web pages cannot, such as:

Wechat scan code, wechat pay, wechat login, geolocation, ETC

What the applets host environment contains
- Communication model
- Operation mechanism
- component
- API

3. Communication body of applets

The main body of communication in the applet is the rendering layer and the logic layer, where:

WXMLThe template andWXSSStyles work in the render layer
JSScripts work at the logical level

4. Communication model of applets

The communication model in the applets is divided into two parts

Communication between the rendering layer and the logic layer is forwarded by the wechat client
The communication between the logical layer and the third-party server is forwarded by the wechat client

5. Operation mechanism

The process of starting a small program
- Download the applet code package locally – get the code package from the cache
- parsingapp.jsonGlobal configuration file
- performapp.jsApplets entry file,Call App() to create an applet instance
- Render small program home page
- The small program has started

2. Components in applets

1. Common view components

Components in applets are also provided by the host environment, and developers can quickly build beautiful page structures based on components. The official components of the small program are divided into 9 categories, respectively:

① View container ② Basic content ③ Form component ④ Navigation component ⑤ Media component ⑥ Map component ⑦ Canvas canvas component ⑧ Development capability ⑨ barrier-free access

Common view container class components
- The view components
A common view area, similar to an HTML div, is a block-level element that is used to achieve the layout effect of a page
- Scroll – the view components
Scrollable view areas are often used for scrolling list effects
- Swiper and swiper-item components
The multicast diagram container component and the multicast diagram Item component

2. The view components

Equivalent to a DIV in HTML

Simple use: the code is as follows (example) :.wxml to write structure code

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

Copy the code

.wXSS to write style code

.container {
  display: flex;
  justify-content: space-around;
}
.container view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

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

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

.container view:nth-child(3) {
  background-color: lightcoral;
}
Copy the code

3. Sroll – the view components

Application scenario: The common left menu bar/right goods sliding effect in the takeout applet

Simple use: The code is as follows (example) : write structure code in WXML

<! -- Scroll-x property: allows horizontal scrolling --> <! -- Scroll-y property: allows vertical scrolling --> <! -- Note: To use vertical scrolling, you must give the scrollview a fixed height --> < scrollview class="container" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>
Copy the code

Write style code in WXSS

.container {
  width: 100px;
  height: 120px;
}

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

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

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

.container view:nth-child(3) {
  background-color: lightcoral;
}
Copy the code

4. Multicast map component

Small program integrated the rotation map effect of the label Swiper, but the swiper label needs to be used with the Swiper-Item label. There are also many useful attributes, see the code below to learn about

Simple use: The code is as follows (example) : write structure code in WXML

<! -- Multicast map area --> <! -- indicator-dots property: display panel indicator --> < indicator-dots class="swiper-container"> <! <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>
Copy the code

Write style code in WXSS

.swiper-container {
  /* The height of the carousel 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: lightskyblue;
}

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

Copy the code

Common properties Quick Lookup table Common properties documents of swiper components

attribute	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	Whether to use cohesive sliding

5. Text components

There are two commonly used text components:

The Text component is an inline element similar to the SPAN tag in HTML
The rich-text component supports rendering HTML strings into WXML structures

Simple use of the Text component: Long-press selected text content through the Selectable property of the Text component

<! <text Selectable >182222222 </text> </view>Copy the code

Basic use of rich-text component: Render HTML string into corresponding UI structure through rich-text component nodes attribute node

<! -- Application Scenario --> <rich-text Nodes ="rich-text component 
"></rich-text>
Copy the code

6. Button components

Like button tags in HTML, button components in applets are much richer.

Other Common Components

Button Button component can call various functions provided by wechat (customer service, forwarding, obtaining user authorization, obtaining user information, etc.) through open-type attribute.
Image Image component The default width and height of the image component are 300px and 240px respectively
The Navigator page navigation component is similar to the A tag in HTML

Quick reference to common properties of Button components Detailed documentation of Button components

The property name	type	The default value	instructions
size	String	default	Button size
type	String	default	The style type of the button
plain	Boolean	false	Whether the button hollow, transparent background color
disabled	Boolean	false	Whether to disable
loading	Boolean	false	Name With Loading t icon

Button components simple to use:

<! - bytypeSpecify the button type --> <button> Default button </button> <buttontype="primary"< p style = "max-width: 100%; clear: both; min-height: 1emtype="warn"</button> <! -- size="mini"Small size button --> <button size="mini"> Default button </button> <button size="mini" type="primary"</button> <button size="mini" type="warn"</button> <! --> <button plain size="mini"> Default button </button> <button plain size="mini" type="primary"<button plain size= <button plain size="mini" type="warn"> Warning button </button>Copy the code

7. Picture component

The image tag in the applet is image, and the image tag in the HTML is IMG

Image component simple to use

srcSupport for local and web images
mode— Specify cropping and zooming modes for the image

<! -- 2. Use SRC to point to the image path --> <image SRC ="/images/xxx.jpg" mode="widthFix"></image>
Copy the code

Image component mode property Common property value

Mode the value	instructions
scaleToFill	The default value, zoom mode, does not maintain aspect ratio zoom image, image width and height is fully stretched to fill the image element
aspectFit	Zoom mode: Keeps aspect ratio to zoom the image so that the long side of the image is fully displayed. In other words, the image can be displayed completely.
aspectFill	Zoom mode, keeping aspect ratio zoom image, only the short side of the image can be fully displayed. That is, the image is usually complete only in the horizontal or vertical direction, the other direction will be truncated.
widthFix	In zoom mode, the width stays the same and the height changes automatically, keeping the width ratio of the original image unchanged. Here, the width refers to the width of image, which is not the default value
heightFix	In zoom mode, the width changes automatically when the height remains unchanged and the width ratio of the original image remains unchanged. Here, the height refers to the height of image, which is not the default value

Data binding

1. Data binding principles

Similar to VUE, the basic principles of applets data binding are:

indataData defined in
inwxmlData used in

Definition: the data required by the page can be defined in the data object in the JS file corresponding to the page.

data: {
  num: 0
}
Copy the code

Use: In WXML, you can wrap variables in Mustache syntax.

<view>{{ num }}</view>
Copy the code

2. Dynamically bind properties

Examples of How Mustache grammar is used:

Content of the binding
Binding properties
Operations (ternary operations, arithmetic operators)

If you already know vue, you can write in vue interpolation and you can write in Mustache syntax.

4. Event binding

In applets, the binding of events is somewhat different from vUE.

1. What is an event

Events are the means of communication from the render layer to the logic layer. Through events, users’ behaviors generated in rendering can be fed back to the logical layer for business processing

2. Common events

Bindtap, Bindinput, Bindchange

Bind :tap, input, and chage

type	The binding way	Event description
tap	Bindtap or bind: tap	Finger touch and away, similar to the CLICK event in HTML
input	Bindinput or bind: input	The input event of the text box
change	Bindchange or bind: change	Triggered when the state changes

Attribute List of event Objects When the event callback is triggered, an event object is received with the following properties

attribute	type	instructions
type	String	The event type
timeStamp	Integer	The timestamp when the event was generated
`target`	Object	`A collection of property values for the component that fires the event`
currentTarget	Object	A collection of property values for the current component
`detail`	Object	`Additional information`
touches	Array	Touch events, an array of information about the touch points currently staying on the screen
changedTouches	Array	Touch events, an array of currently changing touch point information

3. Difference between Target and currentTarget

targetIs the source component that triggers the event
currentTargetIs the component to which the current event is bound

When you click on the inner button, the click event bubbles outward, triggering the tap event handler for the outer view. Now, for the outer view:

e.targetSpecify the source component that triggers the event becausee.targetIs the internal button component
e.currentTargetPoints to the component that is currently firing the event, soe.currentTargetIs the currentviewcomponent

4. bindTab

In the applet, there is no ONclick mouse click event in HTML, but a tap event in response to the user’s touch behavior

With bindtap, you can bindtap touch events to components
The corresponding event handler is defined in the.js file of the page, and the event parameter is received by the parameter event(commonly abbreviated as e)

Sample code:

data: {
  count: 0
}
// button the tap event handler
btnTapHandle (e) {
  // The event parameter object e
  console.log(e)
  // We can use setData to assign values to data
  // The parameters to the event handler can be obtained from the dataset in event object E
  this.setData({
  	count: this.data.count + e.target.dataset.num
  })
}
Copy the code

WXML code

<view>
  <button type="primary" data-num="{{2}}" bindtap="btnTapHandle">+2</button>
</view>
Copy the code

5. bindinput

Bind an input event to the input box, here we mainly realize the bidirectional binding of text box and data data.

Example code (below) : WXML writing structure code

<view>
  <input value="{{ msg }}" bindinput="setMsg" />
</view>
Copy the code

Write the logical code in the corresponding JS file

data: {
  msg: ` `
},
// Implement data synchronization between text boxes and data
setMsg (e) {
  this.setData({
    msg: e.detail.value
  })
}
Copy the code

Write style code in WXSS

input {
 border: 1px solid lightcoral;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}
Copy the code

Fifth, conditional rendering

The conditional rendering statements used in Vue are V-if and V-show, and similar in applets are wx:if, usually paired with wx:elif and wx:else

1. wx:if

Sample code (below) :

<! <view wx:if="{{ type === 1 }}"> male </view> <view wx:elif="{{ type === 2 }}">女</view>
<view wx:else< / view > > confidentialCopy the code

If you want to conditionally render a whole, but don’t want to use the View component to add useless tags to the nesting, you can use the block tag, which is similar to the Template in vue and can do the conditional rendering without rendering to the page.

2. hidden

In the applets framework, hidden=”{{condition}}” can be used directly to control the display and hiding of elements

Sample code (below) :

<view hidden="{{ false }}"> conditions fortrueHidden, condition isfalseAccording to < / view >Copy the code

3. Wx: Difference between if and Hidden

Run differently

Wx :if controls the display and hiding of elements by dynamically creating and removing them
Hidden controls the display and hiding of elements by switching styles (display: None /block)

Use advice

This parameter is recommended for frequent switchoverhidden
This parameter is recommended when the control conditions are complexwx:ifcollocationwx:elif 、wx:elseSwitch between show and hide

6. List rendering

1. wx:for

With WX :for, you can loop through a repeating component structure based on a specified array. When rendering: directly put the variable names in data in double curly braces to default item to each item in the data, index to each item index

Example code (below) : define an array in the data object of a js file

data: {
  arr: ['Arthur'.'da ji'.'meng tien']}Copy the code

Render the array data in WXML

<view wx:for="{{ arr }}"> The index is: {{index}}, each item of the array is: {{item}} </view>Copy the code

2. Modify the default Settings

Using wx:for-item, you can specify the variable name of the current element of the array

<view wx:for="{{ arr }}" wx:for-index="idx" wx:for-item="itemName"> Index is: {{idx}}, each item of array is: {{itemName}} </view>Copy the code

3. wx:key

Similar to :key in Vue list rendering, the applet also proposes to specify a unique key value for the rendered list item when implementing the list rendering, thus adding efficiency to the rendering

conclusion

A good book is your best friend.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Micro channel small program entry must see ①

preface

1. Host environment

1. What is the host environment?

2. Host environment of applets

3. Communication body of applets

4. Communication model of applets

5. Operation mechanism

2. Components in applets

1. Common view components

2. The view components

3. Sroll – the view components

4. Multicast map component

5. Text components

rich-text component

6. Button components

7. Picture component

Data binding

1. Data binding principles

2. Dynamically bind properties

4. Event binding

1. What is an event

2. Common events

3. Difference between Target and currentTarget

4. bindTab

5. bindinput

Fifth, conditional rendering

1. wx:if

2. hidden

3. Wx: Difference between if and Hidden

6. List rendering

1. wx:for

2. Modify the default Settings

3. wx:key

conclusion

Micro channel small program entry must see ①

preface

1. Host environment

1. What is the host environment?

2. Host environment of applets

3. Communication body of applets

4. Communication model of applets

5. Operation mechanism

2. Components in applets

1. Common view components

2. The view components

3. Sroll – the view components

4. Multicast map component

5. Text components

rich-text component

6. Button components

7. Picture component

Data binding

1. Data binding principles

2. Dynamically bind properties

4. Event binding

1. What is an event

2. Common events

3. Difference between Target and currentTarget

4. bindTab

5. bindinput

Fifth, conditional rendering

1. wx:if

2. hidden

3. Wx: Difference between if and Hidden

6. List rendering

1. wx:for

2. Modify the default Settings

3. wx:key

conclusion

Related Posts

The difference between shockproof and throttling and the code implementation

EPSG:3857 and EPSG:4326

A common MAC front-end development environment configuration guide (with shell script)