# WeChat applet tutorial (with configuration file code)

1 Introduction

What is a WeChat Mini Program

WeChat Mini Program is a brand-new application form. It is an application developed based on the WeChat social platform. Users can use it without downloading and installing it. It is a lightweight application.
WeChat applets not only have the functions of traditional applications, such as displaying goods and providing services, but also have stronger social attributes, such as sharing and forwarding, and can be quickly spread in social scenarios such as WeChat Moments and WeChat groups.
WeChat applets have the advantages of low development cost, short development cycle, and good user experience, and are an important trend in the development of mobile Internet applications.

Advantages and Application Scenarios of WeChat Mini Programs - Advantages of WeChat Mini Programs:

No need to download and install, click and play, improve user experience
Closely integrated with the WeChat ecosystem and has a huge user base
Low development cost, low entry threshold, suitable for individual and small team development
Support multiple development languages and frameworks, high flexibility
Application scenarios of WeChat applets:
- O2O fields such as food delivery, online shopping, and life services
- Social, entertainment, education and other vertical fields
- Enterprise-level application scenarios such as internal management and employee training
- Light application scenarios in other fields

2. Preparations

Register a WeChat Mini Program Account
Install development tools
Understand the WeChat Mini Program Development Framework

3. Start development

3.1. Create a project

Introduction to project structure

Project structure introduction:

The applet project structure is as follows:

├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
└── utils
    └── util.js

Among them, app.js, app.json, app.wxssare global configuration files, pagesthe configuration and code of each page are under the folder, and utilsthe tool class code is under the folder.

Introduction to Configuration Files - Introduction to Configuration Files

In the applet project, we need to use two configuration files: app.jsonand project.config.json.

app.json

app.jsonIt is the global configuration file of the applet, which is used to configure the page path, window background color, navigation bar style, bottom tab bar, etc. of the applet. Here is a simple app.jsonconfiguration example:

{
      
      
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
      
      
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
      
      
    "color": "#999999",
    "selectedColor": "#ff0000",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
      
      
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_active.png"
      },
      {
      
      
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/tabbar/logs.png",
        "selectedIconPath": "images/tabbar/logs_active.png"
      }
    ]
  }
}

project.config.json

project.config.jsonIt is the configuration file of the Mini Program project, which is used to configure the development tool related information of the Mini Program, such as appid, project name, developer information, compilation settings, etc. Here is a simple project.config.jsonconfiguration example:

{
      
      
  "miniprogramRoot": "./",
  "appid": "wx1234567890abcdef",
  "projectname": "微信小程序",
  "description": "这是一个微信小程序示例",
  "setting": {
      
      
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "newFeature": true
  },
  "compileType": "miniprogram"
}

3.2. Page development

Page Structure and Style

wxmlWrite the page structure in the file, you can use basic components such as <view>, <text>, or custom components.

<view class="container">
  <view class="header">
    <text class="title">这是标题</text>
  </view>
  <view class="content">
    <text class="text">这是内容</text>
  </view>
</view>

Write the page style in wxssthe file, you can set different styles for different components.

.container {
        
        
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header {
        
        
  width: 100%;
  height: 50px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
        
        
  font-size: 24px;
  color: #fff;
}

.content {
        
        
  width: 80%;
  margin-top: 20px;
  padding: 20px;
  background-color: #eee;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
        
        
  font-size: 18px;
  color: #333;
}

Data binding and list rendering

data binding

<!-- WXML模板 -->
<view> {
     
     { message }} </view>

// JS脚本
Page({
  data: {
    message: 'Hello World!'
  }
})

list rendering

<!-- WXML模板 -->
<view wx:for="{
     
     { array }}" wx:key="{
     
     { index }}">
  {
     
     { index }}: {
     
     { item.message }}
</view>

// JS脚本
Page({
  data: {
    array: [
      { message: 'foo' },
      { message: 'bar' }
    ]
  }
})

Event Handling and API Calls - Event Handling:

Click event: Triggered when the user clicks on a component, the event handler can be bound through bindtap or catchtap.
Input event: Triggered when the user enters content in the input box, the event handler can be bound through bindinput or catchinput.
Swipe event: Triggered when the user slides on a component, the event handler can be bound through bindtouchmove or catchtouchmove.
API calls:
- Network request API: You can initiate a network request through wx.request, obtain data and process it.
- Data caching API: Data can be cached locally through wx.setStorageSync and wx.getStorageSync for the convenience of next use.
- Geographic location API: You can obtain the user's geographic location information through wx.getLocation, and perform operations such as positioning and navigation.

sheet:

event type	API name	illustrate
click event	bindtap/catchtap	Fired when the user clicks on a component
input event	bindinput/catchinput	Fired when the user enters something in the input box
slide event	bindtouchmove/catchtouchmove	Fired when the user swipes over a component
Network request API	wx.request	Initiate a network request, obtain data and process it
Data Cache API	wx.setStorageSync/wx.getStorageSync	Cache the data locally for the next use
Geolocation API	wx.getLocation	Obtain the user's geographic location information, perform operations such as positioning and navigation

3.3. Component development

Introduction to Common Components

Introduction to common components:

button component
- Buttons for user interaction, you can set different styles and events.
- Sample code:
```
<button bindtap="handleClick">点击我</button>
```

image component

Used to display pictures, different sizes and sources can be set.

Sample code:

<image src="{
           
           {imageUrl}}" mode="aspectFit"></image>

input box component
- It is used for users to input text, and different types and prompt information can be set.
- Sample code:
```
<input type="text" placeholder="请输入内容"></input>
```

form component

For displaying data, different numbers of columns and rows can be set.

Sample code:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

Custom Component Development - Custom Component Development

Example 1: A custom component implements a simple counter

<!-- counter.wxml -->
<view class="counter">
  <button class="counter-btn" bindtap="handleDecrease">-</button>
  <view class="counter-num">{
     
     {num}}</view>
  <button class="counter-btn" bindtap="handleIncrease">+</button>
</view>

// counter.js
Component({
      
      
  properties: {
      
      
    num: {
      
      
      type: Number,
      value: 0
    }
  },
  methods: {
      
      
    handleDecrease() {
      
      
      this.setData({
      
      
        num: this.data.num - 1
      })
    },
    handleIncrease() {
      
      
      this.setData({
      
      
        num: this.data.num + 1
      })
    }
  }
})

// counter.json
{
      
      
  "component": true
}

/* counter.wxss */
.counter {
      
      
  display: flex;
  align-items: center;
}
.counter-btn {
      
      
  width: 50rpx;
  height: 50rpx;
  border: 1rpx solid #ccc;
  border-radius: 50%;
  font-size: 30rpx;
  color: #333;
  background-color: #fff;
}
.counter-num {
      
      
  flex: 1;
  text-align: center;
  font-size: 32rpx;
}

<!-- 使用自定义组件 -->
<counter num="{
       
       {count}}" />

Example 2: Custom components implement a simple carousel

<!-- swiper.wxml -->
<swiper indicator-dots="{
       
       {indicatorDots}}"
        autoplay="{
       
       {autoplay}}"
        interval="{
       
       {interval}}"
        duration="{
       
       {duration}}">
  <swiper-item wx:for="{
       
       {images}}"
               wx:key="*this">
    <image src="{
       
       {item}}" class="swiper-img" />
  </swiper-item>
</swiper>

// swiper.js
Component({
      
      
  properties: {
      
      
    images: {
      
      
      type: Array,
      value: []
    },
    indicatorDots: {
      
      
      type: Boolean,
      value: false
    },
    autoplay: {
      
      
      type: Boolean,
      value: false
    },
    interval: {
      
      
      type: Number,
      value: 5000
    },
    duration: {
      
      
      type: Number,
      value: 500
    }
  }
})

// swiper.json
{
      
      
  "component": true
}

/* swiper.wxss */
.swiper-img {
      
      
  width: 100%;
  height: 100%;
}

4. Publish the applet

Mini Program Review Process

Small program review process:
1. Submit an application for review
2. under review
3. examination passed
4. Publish applet
5. Mini program online

Mini Program Publishing Process - Mini Program Publishing Process:

Log in to the WeChat public platform, and obtain the AppID of the Mini Program in "Development" - "Development Settings".
Complete the basic information of the Mini Program in "Settings" - "Basic Settings", including name, avatar, profile, category, etc.
Create a Mini Program version in "Development" - "Version Management", and upload the Mini Program code package.
After passing the review, submit the release review in "Version Management" and wait for the review result.
After passing the review, publish the Mini Program version in "Version Management", and you can search and use the Mini Program in WeChat.

5. Summary

Future Development of WeChat Mini Programs

Future Development of WeChat Mini Programs
- The WeChat Mini Program will become one of the important portals of the mobile Internet, providing users with more convenient services.
- WeChat Mini Programs will further enhance its capabilities, such as supporting more hardware devices and providing richer APIs.
- WeChat Mini Programs will become an important means of digital transformation for enterprises, providing enterprises with more efficient and convenient marketing methods.
- The WeChat Mini Program will become one of the important platforms for developers, providing developers with a more complete ecosystem and richer tool chain support.

The role and value of front-end engineers in the development of WeChat applets- The role and value of front-end engineers in the development of WeChat applets

Responsible for the front-end development of small programs, including page layout, interaction logic, data rendering, etc.
Collaborate with designers and back-end engineers to complete the development and launch of small programs
Guarantee the performance and user experience of the Mini Program, and improve the user retention rate and activity of the Mini Program
Participate in the iteration and optimization of small programs, and continuously improve the quality and competitiveness of small programs
Provide technical leadership in the team and guide the growth and promotion of other front-end engineers