The Beginning of WeChat Mini Programs

The official WeChat team defines mini-programs as a new way to connect users and services. Of course, the emergence of WeChat mini-programs is more about consolidating WeChat's position as the leader in social networking. After the launch of WeChat mini-programs, Alipay mini-programs, Quick Apps, and recently Baidu Smart Mini-programs, Toutiao mini-programs, etc. have also appeared. It can be seen that designing a set of templates for mini-programs is not difficult, and the giants are all competing to seize the mini-program trend, striving to empower themselves under the viral effect of mini-programs. But enough of that, if you have time, it's still worth learning about mini-program development.

Preparation
Directory structure
Data binding
Rendering tags
Template usage
Testing effects
Summary

Preparation#

There is actually not much preparation work to be done. I think as long as you maintain a mindset of wanting to learn, it is enough. WeChat provides the WeChat Web Developer Tools, which can be used to develop mini-programs and also to debug WeChat public account web pages.

Directory structure#

The main part of a WeChat mini-program consists of three files, which must be placed in the root directory of the project. Their specific functions are as follows:

app.js: Mini-program logic, such as mini-program startup, initialization, foreground and background switching, and loading error event listening.
app.json: Mini-program common configuration, such as configuring the page paths of the mini-program.
app.wxss: Mini-program common style sheet (optional).

A complete mini-program page should consist of four types of files, with the following specific functions:

js file: Page logic.
wxml file: Page structure.
json file: Page configuration (optional).
wxss file: Page style (optional).

The following is the most basic directory structure of a mini-program, as follows:

│  app.js
│  app.json
│
└─src
    └─pages
            index.js
            index.wxml

Of course, in actual development, style files are indispensable.

Data binding#

I won't go into detail about the use of components. You can refer to the official documentation. Here, let's take a look at how data binding is done in WeChat mini-programs. Create a text tag as follows:

<text>WeChat mini-program initial article...{{text}}</text>

The text inside the double curly braces represents the data specified in the corresponding js file. Define the text under data and give it an initial value, as follows:

data: {
    text: 'This is the text content'
}

At this point, the mini-program will display the content corresponding to text. So how do we dynamically set the value of text? Use the setData method to assign a value to the defined variable, as shown below:

/**
* Button click event
*/
btnClick: function() {
    console.log("Button clicked");
    // Modify the value of text
    this.setData({
        text: "This is the new text content..."
    });
}

This dynamically updates the value of the defined variable, which is very simple.

Rendering tags#

The rendering tags currently provided by mini-programs are conditional if and loop for. You can use these two tags to build some interfaces. Here are some examples of how to use them:

<!-- Conditional statement -->
<!-- If the condition is true, display it; if false, do not display. Note the quotation marks outside the condition -->
<view wx:if="{{true}}">Rendering tag usage...1</view>
<view wx:else>Rendering tag usage...2</view>

<!-- Loop statement -->
<!-- By default, item and index can be customized. The content inside for must be in array form -->
<view wx:for="{{list}}" wx:for-item="it" wx:for-index="ix" wx:key="{{item.id}}">
  <!-- Traverse, the default index is index, and the value is item -->
  {{ix}}-{{it.name}}
</view>

The wx tag parameter is a boolean value, which can be used to control the display and hiding of a component. The wx tag parameter is an array, which can traverse the contents of the array and loop display them.

Template usage#

There are two main ways to define templates in mini-programs:

First way:

Create a wxml file as follows:

<!--header.wxml-->
<text>Header...</text>

Then, in the corresponding page, use the include keyword to import it, as shown below:

<!-- Import the defined template---include -->
<include src="../template/header"/>

Second way:

Create a wxml file and use the template tag to create a template and specify the template name, as shown below:

<!--footer.wxml-->
<template name="footer1">
Footer 1...{{data}}
</template>

<template name="footer2">
Footer 2...{{data}}
</template>

Then, in the corresponding wxml of the page, use the import keyword to import the template and use the is attribute to specify the template to be displayed. This method can create multiple templates, and the corresponding name is specified when using them, as shown below:

<!-- Import the defined template---import -->
<!-- Multiple templates can be defined, use is to mark the template to be implemented, and data to set dynamic data -->
<import src="../template/footer"/>
<template is="footer1" data="{{data:'This is the content of the footer area'}}"/>

Testing effects#

Here is a test result image:

Summary#

This article is the first article in learning WeChat mini-programs. It briefly demonstrates a demo to understand the development mode of mini-programs and learn some special syntax of mini-programs. This can be considered as an introduction to mini-programs.