jzman

The definition of a mini program by the WeChat official team is a new way to connect users and services. Of course, the emergence of WeChat mini programs is more about consolidating the position of WeChat as the social giant. After WeChat mini programs, there are also Alipay mini programs, Quick Apps, and recently appeared Baidu Smart Mini Programs, Toutiao Mini Programs, etc. It can be seen that it is not difficult to design a set of templates for mini programs. The giants are all vying for the mini program trend, striving to empower themselves under the fission effect of mini programs. But let's not digress, if you have time, it's still a good idea to learn about mini program development.

1. Preparation
2. Directory Structure
3. Data Binding
4. Rendering Tags
5. Template Usage
6. Testing Effects
7. Summary

Preparation#

There is actually not much to say about preparation. I think as long as you have a mindset 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. The 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, etc.
• app.json: Mini program common configuration, such as configuring the page paths of the mini program, etc.
• app.wxss: Mini program common style sheet (optional).

A complete mini program page should consist of four types of files, with specific functions as follows:

• 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 just refer to the official documentation. Here, let's take a look at how to perform data binding 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 time, the mini program will display the content corresponding to text. So how to dynamically set the value of text? Use the setData method to assign a value to the defined variable. Refer to the following for specific details:

/**
* 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 include 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 quotes outside the condition -->
<view wx:if="{{true}}">Using rendering tags...1</view>
<view wx:else>Using rendering tags...2</view>

<!-- Loop statement -->
<!-- By default, item and index can be customized. The content inside for must be in array format -->
<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 display them in a loop.

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 use the include keyword to import it in the corresponding page. Refer to the following for specific details:

<!-- 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. Refer to the following for specific details:

<!--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 specify the corresponding name when using them. Refer to the following for specific details:

<!-- Import the defined template---import -->
<!-- Multiple templates can be defined, use is to mark the template to be implemented, and set data for 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 to learn about 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.