WeChat mini-app tutorial (article 3), mini-app tutorial Article 3

Small Program tutorial (article 3), small program tutorial Article 3

Applet architecture and implementation mechanism, channel service and session management

 

Applet architecture and Implementation Mechanism

A applet is not an H5 application, but more inclined to the traditional CS architecture. It is a data-driven model based on which everything is a component (view component ). Therefore, it is recommended that you do not think about web app development when developing small programs. The mini-program development language is an independent development language system. It is in the same line with Html + CSS + JavaScript and is different from each other. It also provides various self-contained components and APIs.

• The framework is basically built on the window and document objects, but the applet does not have the host environment of window, document, or browser BOM. You can understand that the host environment of a applet is similar to that of a node, rather than a browser client. Therefore, the Dom library, such as JQuery, cannot be used.

• Instead of using URL access, it uses the channel service for communication and session management. Therefore, it does not support Cookie storage and does not have cross-domain access problems.

• Html tags are not compatible with XML syntax, and similar components and APIs are encapsulated to display pages.

• Modular, supporting CommonJs in form, loading and referencing is more like es6. The form of Applet supports CommonJS, which is loaded through require, similar to node and seajs. However, the require method is used to load the reference value, rather than the value cache in CommonJS.

From the perspective of framework component design, the framework itself adopts a state-oriented programming method. The components are similar to the redux design (which is not actually implemented by redux ). After an action is performed on a component, the View can only be updated through the business processing of the action. The Framework is one-way data binding and cannot be automatically updated. If this type of View component comes with action, we recommend that you encapsulate it as necessary. For encapsulation, we can consider the Dynamic Registration and uninstallation of aop.

For business page development, the page can be regarded as a page component. On this page, the components have completed the following tasks:

1. Initializes component state ()

2. Combines child view components to form page effects (developers)

3. Determine data matching js and view (developer)

4. Registers the business logic methods provided by the business logic object (developer)

5. Manages business logic objects (developers)

7. The communication between page wxml and page js is as follows (Simplifying the framework work)

10. Official development documentation: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html? T = 20161107

     

    Knowledge reserve

    1. Basics: HTML + JS + CSS

    2. Advanced: React and Vue

    3. Syntax: Mustache, XML

    4. Standard: CommonJS

    Applet Architecture

    A applet page contains four files:

    1. WXML: The page structure is used to create page objects and process page lifecycle control and data processing.

    2. JS: page logic setting window configuration when the current page is working

    3. WXSS: The page style is used to define the element structure in the page. It follows the XML syntax, not the HTML syntax, and adds the flex layout.

    4. JSON: The page configuration is used to define the page style. The syntax follows the CSS syntax and extends the basic CSS usage and length unit.

     

11. Implementation Mechanism of applets

    The development of applets is based on a set of provided application frameworks. By encapsulating the basic functions provided by the client, such as file system, network communication, task management, and data security, a complete Javascript Api is provided for the upper layer, this allows developers to conveniently use various basic functions provided by the client to quickly build an application. The framework is designed as follows:

     

12. The Framework provides its own view layer description language WXML and WXSS, as well as a JavaScript-based logic layer framework, and transmits data between the view layer and the logic layer through one-way data binding, enables developers to focus more on data and logic.

     

    Implementation of channel service and session management

    The channel service is completed based on WebSocket, and session management needs to complete the authentication process required. The request interface wx. request does not support cookie transmission, so the Session Layer cannot use the traditional Session method.

     

13. Relationship between session service and channel service and service module

15. Communication between applets and business servers

     

    The channel service is implemented based on WebSocket as follows:

     

16. Communication Process between Applet and Business Server

18. Establishing a WebSocket connection

     

    The implementation process and authentication process of session management are as follows:

20. Session creation process
23. Design architecture Diagram