A Preliminary Study on WeChat Mini Programs

[[174033]]

In the early morning of September 22, WeChat public platform sent a test invitation to 200 service accounts for "WeChat Mini Program". WeChat said that "Mini Program" is currently only in the testing stage, and in the future, the subjects of such "Mini Program" will be more extensive, whether individuals, governments, enterprises, media, or other organizational developers, all can apply to register and use "Mini Program". After the release of "Mini Program", it has set off a great response in the industry.

The following is a brief summary of my initial research.

Development Tools Download

Directory Structure

We create a new project in the development tools provided by WeChat. The development tools will establish a basic directory structure and sample Demo code for us. The structure is as follows:

The structure is very simple. The main part of the program consists of three files: app.js, app.json, and app.wxss, and they must be placed in the root directory of the project.

The page consists of four files:

Configuration

• Use the app.json file to globally configure the WeChat Mini Program, determine the path of the page file, window performance, set network timeout, set multiple tabs, etc.
• Each mini program page can also use .json files to configure the window performance of this page. The page configuration is much simpler than the app.json global configuration. It only sets the content of the window configuration item in app.json. The configuration items in the page will overwrite the same configuration items in the window of app.json.

Logical Layer

1. Registration Procedure

The App() function is used to register a mini program. It accepts an object parameter that specifies the mini program's life cycle functions, etc.

Example:

 App({
 onLaunch: function () {
    // Do something initial when launch.
 },
 onShow: function () {
      // Do something when show.
 },
 onHide: function () {
      // Do something when hide.
 },
  globalData: 'I am global data'  
 })

2. Registration page

The Page() function is used to register a page. It accepts an object parameter that specifies the page's initial data, lifecycle functions, event handling functions, etc.

 Page({
 data: {
    text: "This is page data."  
 },
  onLoad: function (options) {
    // Do some initialize when page load .
 },
 onReady: function () {
    // Do something when page ready.
 },
 onShow: function () {
    // Do something when page show.
 },
 onHide: function () {
    // Do something when page hide.
 },
 onUnload: function () {
    // Do something when page close .
 },
  onPullDownRefresh: function () {
    // Do something when pull down
 },
 // Event handler.
 viewTap: function () {
 this.setData({
      text: 'Set some data for updating view.'  
 })
 }
 });

3. Modularity

Some common codes can be extracted into a separate js file as a module. The module can only expose the interface to the outside world through module.exports or exports. It should be noted that:

• exports is a reference to module.exports, so changing the export pointer in the module will cause unknown errors. Therefore, we recommend that developers use module.exports to expose module interfaces unless you already know the relationship between the two.
• Mini Programs currently do not support the direct import of node_modules. When developers need to use node_modules, it is recommended to copy the relevant code to the Mini Program directory.

4. API

The mini program development framework provides a rich set of WeChat native APIs, which can easily call up the capabilities provided by WeChat, such as obtaining user information, local storage, payment functions, etc.

5. ES6 to ES5

WeChat Mini Programs run on three platforms: iOS, Android, and developer tools for debugging

• On iOS, the JavaScript code of the applet is run in JavaScriptCore
• On Android, the javascript code of the applet runs in the X5 kernel
• In the development tool, the javascript code of the applet is run in nwjs (chrome)

Although the three runtime environments are similar in most cases, there are still some subtle differences. In order to help developers solve the problems caused by these differences, the development tools will automatically help developers convert ES6 code to ES5 code.

For developers who use other build tools, you can turn off this feature in the project and use your own build and transcoding tools.

View Layer

Contrary to my previous intuition about WeChat Mini Programs, WeChat Mini Programs do not support nor are they compatible with HTML. Instead, they are newly defined specifications by WeChat. The suffix of its view files is .wxml, which is an extension based on XML. Its style sheet file is not CSS, but .wxss, which is compatible with some limited CSS writing methods.

When rendering the view, a one-way data binding method is used for data binding. The dynamic data in WXML comes from the data of the corresponding Page. Use Mustache syntax (double curly braces) to wrap the variables:

 < view > {{ message }} </ view >

The framework makes it very easy to keep data and views in sync. When modifying data, you only need to modify the data in the logic layer, and the view layer will be updated accordingly. Supports conditional rendering, list rendering, templates, and events

WXSS (WeiXin Style Sheets) is a style language used to describe the component styles of WXML.

WXSS is used to determine how WXML components should be displayed.

WXSS has most of the features of CSS. At the same time, in order to be more suitable for the development of WeChat applets, we have expanded and modified CSS.

Compared with CSS, our extended features are:

• Dimension units
• Style Import

The framework provides developers with a series of basic components, which can be combined for rapid development. Component Documentation

WeChat Mini Program Official Document Portal