Quick start of wechat applet development

Due to the needs of students' work, I recently tried to develop wechat applets with the help of some reference books. The main content of this paper is my own experience on the development of specified types of wechat applets in the process of wechat applets development recently.

1.0 Basics

Wechat applet is developed in JavaScript language, which can be understood as an implementation based on ECMAScript, that is, a standardized script programming language. Therefore, in the development of wechat applet, you can learn and design directly according to ES6 standard syntax. (you can check ES6 to ES5 in the setting so that wechat applet can be used normally on some older mobile phones with lower versions)
Start with a standard Hello world code

var name = 'Hello world!'
console.log (name)

1.1 ES variables

As a relatively simple scripting language, the variables in ES have no specific types. When defining these variables, only var operator is often used to define them. These variables can be initialized to arbitrary values.
Code example - define and output variables

var color = "red";
var num = 25;
var visible = true;
console.log("color:",color)
console.log("num:",num)
console.log("visible:",visible)

The output result of the above code is:

color:red
num:25
visible:true

In ES, the semicolon at the end of each line of code is not necessary. If there is no semicolon, es will take the end of broken line code as the end of the statement
In ES, there are also two ways to declare variables: let and const. Let statements are often used to declare local variables in code blocks, and const commands declare variables that cannot change values.
Both the let command and the const command will cause a temporary "dead zone" in which variables cannot be used: in the block level scope, any operation on the variable before the let declares the variable will cause errors, even if there are global variables with duplicate names in the earlier area; the const command cannot assign any value to the variable after defining the variable.

var ex =123;
if (true){
ex='abc';
let ex;//The code reports an error because the ex variable is modified before the let command in the block
}

1.2 ES output command

During the development of wechat applet, some console output commands are often used to display some specific variables during the operation of the applet. The common commands for outputting information are shown in the figure below:

console.log() //Output general information
console.info()//Output suggestive information
console.error()//Output error message
console.warn()//Output warning information
console.debug()//Output debugging information

console.log() and console. Info() work in a similar way. They output a hyperlink to the console that points to the position of the statement in the code. console.error() will output a warning icon to the console to indicate that console.log() is the most effective command in actual use.
The console.log command also supports printf format output, which is most commonly used in C language, and array and object output, which are commonly used in wechat applets. It is commonly used to view variable status and debug programs during program operation.

var animal = 'frog',count=10;
console.log("The %s jumped over %d tall buildings",animal,count);
console.log("The",animal,"jumped over",count,"tall buildings");

Execute the code and the output result is

The frog jumped over 10 tall buildings
The frog jumped over 10 tall buildings

1.3 ES arrays and objects

In ES, array is used to store multiple values in variables. The array name [num] is used to directly access the specified variables in the array.
The following figure shows common array operation commands:

concat()//Join two or more arrays and return results
indexOf()//Searches the array for the specified element and returns its location
lastIndexOf()//Searches the array for the specified element and returns its last occurrence
pop()//Deletes the last element of the array and returns the deleted element
push()//Adds one or more elements to the end of the array and returns the new length
shift()//Deletes and returns the first element of the array
unshift()//Add one or more elements to the beginning of the array and return the new length
splice()//Add or remove elements from an array
toString()//Converts all elements of the array into a string and returns the result
length()//Sets or returns the number of array elements
map()//Returns a new array. The elements in the array are the values of the original array elements after calling the function

The commands shown above are shown in the code as follows:

var itmes = ['a','b','c'];
console.log(items.length);	//Console output 3
items.push(d);
console.log(items); //Console output Array(4)["a","b","c","d"]
var index =items.indexOf("b");
console.log(items[index]); //Console output "b"
var item=items.pop();
console.log(items); //Console output Array(3)["a","b","c"]
items.splice(2,1); //Delete the elements with table 2 below the array
console.log(items); //Console output Array(2)["a","b"]

There are some differences between push() and concat() in array operations. When push() encounters array parameters, it will take the entire array parameters as an element, while concat() disassembles the array parameters and adds the elements one by one. When using these commands to operate array parameters, pay attention to the corresponding situation.

1.4 JSON object access

As a lightweight data exchange format, JSON is used in the interaction between wechat applets and the back end. The data in JSON format has certain necessary formats: the object must be surrounded by curly braces {}, and the object must be written in key value pairs; the key must be a string, and the value must be a valid JSON data type (including string, number, object, array, Boolean or NULL)
There are two main ways to access JSON object properties
① Directly use the format of a.b to access the specified object
② Use the format of square brackets [] to access the object

objectName.propertyName //a.b format
objectName["propertyName"] //[] format

Generally, the access object adopts mode ①, but when there is a Chinese name as a field in the applet, the square bracket access mode of mode ② must be used.
In the actual operation process, there is often a process of transforming JSON objects into strings.
JSON.stringify() is often used to convert JSON objects to strings
Or use JSON.parse() to convert a string to a JSON object