Huawei Software Development Cloud helps improve WeChat mini-program code quality

In the early morning of January 9, after more than 180 days of internal testing, WeChat Mini Programs were finally officially launched. This product, which was designed to be "ubiquitous", is finally here.

Faced with the overwhelming interpretations, I, the editor, can't help but feel restless and want to give advice to many developers so that they can avoid detours in the process of developing mini-programs.

After writing the code for a small program, a bug suddenly popped up, which really made people feel mixed emotions and miserable. So, how to calmly solve each bug and improve the quality of code is a self-cultivation that every programmer needs to improve.

Today, I will introduce to you a magic weapon to improve code quality, so that programmers can spend more time fixing bugs and use it to build their small family.

1. Introduction to Mini Program Development Tools

1. Introduction

WeChat Mini Programs were officially released on January 9, but many developers still don’t know much about how to develop Mini Program code. This article uses Huawei Software Development Cloud to perform code checking on Mini Programs as an example to give a brief introduction.

2. Introduction to Mini Program Developer Tools

1.1 Download address of mini program development tool

Before formal development, you need to install the WeChat Mini Program development tools. Here is the download address of the Mini Program developer tools:

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359

1.2 Mini Program Development Tool Interface

After downloading, install it directly. The interface is as follows:

Different from the traditional IDE interface layout style, the menu bar on the left is divided into edit, debug, and project. The editing area can perform basic operations such as code writing and adding, deleting, and renaming files for the current project. The tool currently provides editing of 5 types of files: wxml, wxss, js, json, and image files, with functions such as auto-save, auto-completion, and real-time preview.

1.3 What shortcut keys do the developer tools support?

The following is a summary of the commonly used shortcut keys supported by the development tools:

3. Introduction to the project structure of the mini program

3.1 Elements that make up a mini program project

Let's talk about the project structure. The whole project consists of several parts:

app.js is mainly a file where global public js method declarations and calls are located. It is the script code of the mini program. We can monitor and process the life cycle functions of the mini program and declare global variables in this file. It is the role of js that makes the program go from "skeleton" to "flesh and blood". js does some dynamic things, such as requesting data, controlling the movement of elements up and down, judging whether the password entered by the user is safe, etc.

app.json is the global configuration for the entire mini program. All pages must be registered here, otherwise they will not be allowed to access. In this file, we can configure which pages the mini program consists of, configure the background color of the mini program window, configure the navigation bar style, and configure the default title.

app.wxss is the global css file of the applet, and is the public style sheet of the entire applet. We can directly use the style rules declared in app.wxss on the class attribute of the page component.

Pages corresponds to all pages, and each page can add the above three types of files. There are also wxml type files. wxml is a structured text similar to xml, which describes the elements of the mini program page. For example, an article needs to have a title, author, time, and text, but does not care how these elements are arranged.

utils is where our public js is stored. Because WeChat applet requires that the methods in each js file cannot be directly referenced or called, they must be exported using the module.exports method, so that the .js files under pages can call the js methods we wrote here.

Attachment contains resource files such as images (each file is no larger than 1M).

3.2 How to write js files?

The js file has the most complicated grammatical rules above. Let’s focus on the js file below.

3.2.1 app.js file

app.js is the entry file of the entire mini program and also the file that controls the entire mini program life cycle. App.js uses App() to register the entire program. At the same time, App() also implements the monitoring function of the mini program life cycle:

When the user clicks the close button in the upper left corner or presses the Home button on the device to leave WeChat, the Mini Program is not destroyed directly, but enters the background; when entering WeChat again or opening the Mini Program again, it will enter the foreground from the background. Only when the Mini Program enters the background for a certain period of time or the system resources are occupied too much will it be truly destroyed. Simply put, the foreground is when you are operating the Mini Program; the background is when you leave the Mini Program and open other mobile services, at this time the Mini Program is hidden in the background.

3.2.2 index.js file

Each page in the mini program can be placed in a folder, which generally contains 4 files: .js, .json, .wxml, .wxss. The official recommendation is that the names of these four files should be consistent with the name of the folder, so that the framework can find them automatically.

Each page needs to be registered. Index.js uses the Page() function to register a page. It accepts an object parameter, which is used to specify the initial data, life cycle function, and event handling function of the page. Description of the internal parameters of Page():

4. How to check the mini program code on the software development cloud?

After the code of the mini program is written, we need to do a static code check on the js file to check whether there are any errors in syntax and logic. The following is an introduction on how to perform code checking on the mini program on the software development cloud.

4.1 Create a code hosting repository

Create a code repository in the "Configuration Management" service of the Software Development Cloud, and use the git tool to upload the mini program code to the cloud for secure and reliable version management.

4.2 Create a code review task

Create a code inspection task in the "Code Inspection" service of the Software Development Cloud and select the "JS" inspection rule. After the creation is successful, click "Start Inspection".

4.3 View code inspection results

After the inspection is completed, you can see that the inspection results include detailed code error location, problem description, and modification suggestions.

4.4 Locate and modify the code line

Go back to the WeChat developer tool editing area to view the source code, locate the problematic line of code and complete the modification.

5. Conclusion

Static code checking is an indispensable part of development work. After all, human eyes are unreliable for programming work, not to mention your own eyes looking at your own code. Even if the running result is passed, there may be some undefined variables, defined but never used variables, whether the semicolon is added, and other problems.

Huawei Software Development Cloud provides accurate, comprehensive and efficient code checking services to safeguard the development of WeChat mini-programs.