pk10赛车计划软件百度云

Fuzhou website construction only needs 1,000 yuan to include domain name space, details 18558752805

  • New features of ES6 in applets

Fuzhou Website Construction > Site News > WeChat Mini Program >

http://blog.csdn.net/qq_37954086/article/details/86216642


New features of ES6 in applets
ECMAScript 6 (ES6 for short) is a JavaScript language standard officially released in June 2015. It is officially called ECMAScript 2015 (ES2015).


Applets have supported ES6 a long time ago, so in the development of applets, we can use some of the new features in ES6 to simplify the code and develop efficiently.


Before using WeChat developer tools to debug, remember to check the es6 to es5 option first, so that the tool will convert the es6 syntax.


1, template object template string (template string) is an enhanced version of the string, identified with backticks (`). It can be used as an ordinary string, it can also be used to define multi-line strings, or to embed variables in strings, which avoids the use of a large number of (+) to concatenate strings. For example, the following code:


var wechat = '1349571206zmy';
var qq = '1349571206',
// es5
console.log ('my wechat is' + wechat + 'and my qq is' + qq);
// es6
console.lg (`my wechat is $ {wechat} and my qq is $ (qq)`);
1
2
3
4
5
6
2. Default parameters In es6, functions can have default parameters, which avoids thinking of emptying or other processing of parameters. For example, the following code encapsulates the native toast of the WeChat applet, and the title parameter can be passed in by default.


/ **
* Show toast
* @param {string} title toast
* @param {string} type toast
* @param {number} duration toast
* @param {boolean} mask whether to show the mask
* /
showToast (title, type = 'none', duration = 1000, mask = false) {
wx.showToast ({
title: title,
icon: type,
duration: duration,
mask: mask
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Class
ES6 provides a way of writing closer to traditional languages, introducing the concept of Class as a template for objects. With the class keyword, you can define a class. For example, define a basic class to encapsulate the methods commonly used by WeChat applets, so that the code is more reusable and the code is more concise. Similar to traditional languages, supports inheritance.


// base.js
class Api {
// show toast
showToast (title, type = 'none', duration = 1000, mask = false)
wx.showToast ({
title: title,
icon: type,
duration: duration,
mask: mask
});
}
// ...
// export
export {
Api
};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
After the class is defined, it can be called in other js.


// index.js
// reference
import {Base} from 'base';
const base = new Base ();
// ...
// call in function
onLoad () {
base.showToast ('toast');
}
1
2
3
4
5
6
7
8
9
4. Destructuring assignment structure Destructuring is to extract variables from arrays and objects for assignment according to a certain pattern. Through destructuring, we can make assignment more elegant and convenient. For example, the following code:


// options = {wechat: 134957126zmy, email: phillzou@gmail.com}
onLoad (options) {
// es5 gets the value
let wechat = options.wechat;
let email = options.email;
// es6 gets the value
let {wechat, email} = options;
}
1
2
3
4
5
6
7
8
5.Arrow functions
ES6 allows functions to be defined using "arrows" (=>).


// es6
var sum = (num1, num2) => num1 + num2;
// es5
var sum = function (num1, num2) {
return num1 + num2;
};
1
2
3
4
5
6
6. Use promises to simplify callbacks. The APIs in the applet are almost all callback functions. Therefore, callbacks are often nested as usual, which makes the code difficult to understand. Therefore, promises can be simplified through promises. For a simple example, the picture upload in the applet. The traditional way of uploading pictures using applets is generally divided into these steps:


Take a picture or select a picture in the album and ask the background upload interface to prompt the upload is successful. Let's see what the code will look like.


// Select Image
wx.chooseImage ({
success: (res) => {
// upload image
wx.uploadFile ({
url: 'serverUrl',
filePath: res.tempPath [0],
success: (res) => {
// Prompt upload successfully
wx.showToast ({
title: 'Upload succeeded',
success: (result) => {
// ...
}
});
},
});
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
As you can see, the above code is nested by callback functions, which makes the code very difficult to read. Let's take a look at how to use promises in es6 to simplify.


// Select Image
chooseImage () {
return new Promise ((resolve, reject) => {
wx.chooseImage ({
success: (res) => {
resolve (res);
},
});
});
}


// upload image
uploadFile (url, path) {
return new Promise ((resolve, reject) => {
wx.uploadFile ({
url: url,
filePath: path,
success: (res) => {
resolve (res);
},
});
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
twenty one
twenty two
twenty three
The above code encapsulates the WeChat applet api and returns it in the form of a Promise object. When we actually upload images, we can do this.


this.chooseImage ()
.then (res => {
return this.uploadFile (res.tempPath [0], 'serverUrl');
})
.then (res => {
return this.showToast ('Upload succeeded!');
})
1
2
3
4
5
6
7
The above code is very clear. By chaining it, people can clearly understand the role of each step of the code. Of course, here is only an introduction to the use of promises in applets. For specific usage in ES6, please refer to the ES6 documentation.
————————————————
Copyright statement: This article is an original article by the CSDN blogger "MayanDev", which complies with the CC 4.0 BY-SA copyright agreement.
Original link: http://blog.csdn.net/qq_37954086/article/details/86216642

Scan QR code to share on WeChat
confirm

Copyright © 2014-2019 buxie520.com Fuzhou website production