Introduction to WeChat applet development

What is the essence of a applet? I personally understand that the applet is still a front-end Framework. based on the original third-party h5 page, the team can only implement functions originally implemented by native through h5, such as uploading images. Then, some open jsbridge APIs are adopted to facilitate developers. I. What is a applet:

What is the essence of a applet? I personally understand that the applet is still a front-end Framework. based on the original third-party h5 page, the team can only implement functions originally implemented by native through h5, such as uploading images. Then, some open jsbridge APIs are adopted to facilitate developers. However, as a big factory, it is certainly not enough to simply open some jsbridge APIs. By the way, like vue and react, a self-built mvvm framework is the current small program. Official documents: The framework provides its own view layer description language WXML and WXSS, as well as the JavaScript-based logic layer framework, data transmission and event systems are provided between the view layer and the logic layer, allowing developers to conveniently focus on data and logic.

In essence, it is still a front-end Framework. the code will eventually be packaged into a JavaScript file and run at the startup of the applet until the applet is destroyed. The template syntax is similar to vue, which is similar to the native custom tag. Data binding and rendering are similar to the vue syntax. However, the event system starts with wx: (vue is identified by v:) and defines its own event system like react.

II. runtime environment:

The applet runs on three ends: iOS, Android, and developer tools for debugging.

On iOS, the javascript code of the applet runs in JavaScriptCore.

On Android, the javascript code of the applet is parsed through the X5 kernel.

On the development tool, the javascript code of the applet is run in nwjs (chrome kernel ).

The script logic of the page is run in JsCore, and JsCore is an environment without window objects. Therefore, bom objects such as windows cannot be used in the script. Therefore, libraries like jquery and zepto that use Windows or document to obtain dom objects cannot be used.

III. directory structure:

The applet contains an app describing the entire program and multiple pages describing the respective page.

A applet consists of three files and must be placed in the project root directory, as shown below:

The logical part of app. js, that is, global variables or methods.

App. json public configuration, including page configuration, tab setting at the top and background color

App. wxss public style sheets can be overwritten by specific page styles

The app. js code (the code is taken from the official demo) and comments are described as follows:

// App. js // applets are called to open jsbridge to complete the lifecycle management of specific front-end frameworks/*** apps that are originally difficult to use in h development. **/App ({// initialize onLaunch: function () {// call the API to obtain data from the local cache var logs = wx. getStorageSync ('logs') | [] logs. unshift (Date. now () wx. setStorageSync ('logs', logs)}, // Global method or variable. you can use getUserInfo: function (cb) {var that = this if (this. globalData. userInfo) {typeof cb = "function" & cb (this. globalData. userInfo)} else {// call the logon interface wx. login ({success: function () {wx. getUserInfo ({success: function (res) {that. globalData. userInfo = res. userInfo typeof cb = "function" & cb (that. globalData. userInfo) }}) }}, globalData: {userInfo: null }})

{"Pages": ["pages/index", "pages/logs", "pages/swiper", "pages/input ", "pages/form"], "window": {"navigationBarBackgroundColor": "# ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "applets ", "backgroundColor": "# eeeeee", "backgroundTextStyle": "light"}, "tabBar": {"borderStyle": "white", "list ": [{"pagePath": "pages/index", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text ": "homepage" },{ "pagePath": "pages/form", "iconPath": "image/plus.png", "selectedIconPath": "image/green_tri.png ", "text": "More" },{ "pagePath": "pages/swiper", "iconPath": "image/icon_COM.png", "selectedIconPath ": "image/icon_COM_HL.png", "text": "Others"}]}

A specific page generally includes a file (similar to a global file, but only applies to this page ):

The. js page logic is JavaScript.

The. wxml page structure corresponds to html, but many custom tags are applied.

The. wxss page style table corresponds to css files, with a higher priority than appapp. wxss. css writing is not fully supported.

. Json page configuration specifies the title and other elements of a specific page

To help developers reduce configuration items, the four files on the description page must have the same path and file name.

That is to say, we do not need to specify the js or wxss file corresponding to a page, just keep the path and file name the same.

IV. template language and event system

1): the template syntax is similar to vue, which is close to the native custom tag. Data binding and rendering are similar to vue syntax, but they start with wx: (vue is identified by v)

/*** Conditional rendering syntax similar to vue. it should not be unfamiliar if you are familiar with vue **/
 

2): Event System

The event system is similar to react: it defines its own event system. Contains a series of common event types:

Touchstart start

Touchmove move after touch

Touchcancel: the touch of your finger is interrupted, such as a pop-up notification.

Touchend: The finger touch action ends.

Tap your finger and leave immediately

After the longtap finger is touched, it leaves after Ms

Binding method: The event binding method is similar to the component property, in the form of key + value:

Start with bind or catch, and then follow the event type, such as bindtap catchtouchstart,

Value is a string. you need to define a function with the same name in the corresponding Page. Otherwise, an error is reported when an event is triggered.

Bind event binding does not prevent the bubble event from bubbling up. the catch event binding prevents the bubble event from bubbling up. For example:

/*** Bind/catch + event type, two event binding methods */
 
  
Outer view
  
   
Middle view
   
    
Inner view
    
  
 

3): Event object: includes BaseEvent basic Event object, CustomEvent Custom Event object, and TouchEvent touch event object.

V. Advantages and disadvantages:

1) advantages

1. provide corresponding support similar to jsbridge to make some functions more convenient.

2. the essence is the front-end framework of mvvm, which simplifies operations.

3. provides a relatively molded component library for easy building

4. appapp-based, reducing development costs

5. support modularization

2) Disadvantages

1. because the framework is not running in a browser, the js-related bom method cannot be used. Such as document and window. However, you can obtain the dom object corresponding to the current event. Compared with react, we do not recommend dom, jq, zepto, and other tool libraries.

2. it is also a set of its own syntax that requires learning time, but the learning curve is not steep.

3. Currently, node_modules cannot be directly introduced. when developers need to use node_modules, it is recommended to copy the relevant code to the Directory of the applet. in this case, the limitations are quite large and many manual tasks are required.

The above is a detailed introduction to small program development. For more information, see other related articles in the first PHP community!