Boost Mini Program Development with Essential ES6 Features

In the process of developing WeChat Mini Programs, several ES6 features can greatly improve productivity. Below we introduce the most useful features with concrete examples.

1. Arrow Functions

Front‑end developers often encounter the

this

and closure pitfalls where asynchronous callbacks lose the original context. Previously developers stored the outer

this

in variables such as

that

,

_this

,

$this

, or

self

. ES6 arrow functions inherit

this

from the surrounding scope, eliminating the need for extra variables and making the code more concise.

In Mini Programs, page lifecycle hooks (e.g.,

onLoad

,

onShow

,

onUnload

) and custom component callbacks are defined inside

AppService

. Within these functions,

this

always refers to the current

Page

object, so using arrow functions reduces repetitive

this

handling and lowers the chance of errors.

2. Array Methods

Although WeChat Mini Program's

wxml

syntax resembles Vue's Mustache, it does not support filters like

{{value | filter}}

. Therefore, developers can rely on ES5/ES6 array methods. After receiving a list from the backend, you can preprocess it using

Array.prototype.forEach

or

Array.prototype.map

, and filter out invalid items with

Array.prototype.filter

.

3. Rest & Destructuring Assignment

When the official component standard is not yet released, a common solution is to use

template

together with destructuring to bind different objects' data to separate components, keeping their state and event handlers independent.

For example, two templates can bind data from

data

to their own objects inside

AppService

, avoiding field name collisions.

When rendering, simply destructure

bannerState

and

comicListState

fields.

4. Enhanced Object Literals

setData()

When property names and variable names are identical, you can omit the repetition, making the code shorter and faster to write.

With many fields, this reduces maintenance cost.

Method Shorthand

Enhanced object literals also allow concise method definitions, similar to class methods.

5. Class and Inheritance

Using ES5

prototype

for inheritance works but can become tightly coupled and harder to maintain. ES6 class syntax provides a unified, more intuitive way to define and extend classes.

6. Block‑Scoped Variables

When iterating with

for

, a

var

declaration is hoisted to the function top, which can cause data leakage between iterations. Replacing

var

with

let

or

const

creates a block‑scoped variable, eliminating this risk.

Supplement

The Babel version bundled with the Mini Program development tool may not support the latest ES6 features. Currently, static fields inside a

class

and the

for...of

loop (which relies on

Symbol.iterator

) can cause issues on some mobile runtimes.

2020‑03‑29 update: the newer development tool version has fixed these problems, and the ES6 syntax can now be used safely.

When iterating arrays,

for...of

behaves similarly to

Array.prototype.forEach

but allows early

break

statements.