Bugly before hair a article about WeChat small application development experience to share (click here to read), asked a lot of friends in the public accounts the background about the small program development issues, the elder brother of the spirit when refer to the related content, found Gong Cheng classmates himself wrote a small program development framework, really anger praise, amway gave us quickly.

In the meantime, if you have any questions about the applet, you can leave them in the comments section, and we’ll sort them out, and then we’ll have an answer to your questions.

Do not ask where the entrance of the small program, spirit brother also do not know, ha ha ha

The body of the

As one of the first small program internal test users, I was fortunate to witness the growth of small program, small program is very simple, easy to understand. But at the same time, small programs cannot use popular frameworks in the market because of the running environment. Applets themselves provide such features as modularity, templates, data binding, etc., which can greatly facilitate the use of MVVM framework users.

Over the course of several months, I’ve been looking for a way to make small program development more likely to be in line with current development habits, hence Wepy. After compiling the code developed by WEpy, it can generate a perfect running in the small program side of the code, and the purpose of WEpy is to make the small program development more close to the traditional H5 framework development, so that the small program can support the introduction of NPM package like the development of H5, support component development and support JS new features and so on.

Applets framework WEpy documentation

  • One is a standard demo generated using the wepy new demo command

  • One is a full demo of mobile phone recharge based on Wepy.

  • One is an open source chat interface modeled after wechat based on Wepy

The above three demos have been run on Android and IOS.

Attached is the DEMO download address github.com/wepyjs/wepy…

Quick start

Code specification:

  1. Use camel – shaped names for variables and methods instead of starting with $. Methods or attributes that start with $are built-in methods or attributes and can be used. Please refer to the API documentation provided in this document before using them.

  2. Entries, pages, and components are named with the suffix.wpy. External linked files can be other suffixes. Please refer to the wPY file description in this article

  3. Developed using ES6 syntax. The framework was developed under ES6, so we also need to use ES6 to develop small programs. ES6 has a lot of syntax sugar to make our code more concise and efficient.

  4. All apis provided by applets are promised by default using the Promise framework, and new features such as async/await can even be developed directly.

Project creation and use

Install wepy

The following installations are installed through NPM

  1. Install the WEpy command line tool

    npm install wepy-cli -gCopy the code

  2. Generate the development DEMO in the development directory

    wepy new myprojectCopy the code

  3. Developing real-time compilation

    wepy build --watchCopy the code

Project directory structure

Development instructions

  1. Use wechat developer tools to create new projects, and select dist directory for local development.

  2. Wechat developer tools → Project → Close ES6 to ES5.

  3. Run wepy Build –watch from the local project root to enable real-time compilation.

Main problems solved:

1. Development mode transformation

In the original small program development mode of encapsulation, more close to the existing MVVM framework development mode. The framework was developed with reference to some of the features of the current framework and incorporated into it. Below is a comparison of the code before and after using Wepy.

Official DEMO code:

Implementation based on Wepy:

2. Support componentized development.

See section: Component sample code:

3. Supports loading external NPM packages.

During compilation, the code is recursively traversedrequireThen copy the dependency files from node_modules and modify themrequireIs a relative path to achieve support for external NPM packages. The diagram below:

4. Single-file mode, making the directory structure clearer.

Json, app.js, and app.wxss. The page has 4 files: index.json, index.js, index.wxml, and index.wxss. And the file must have the same name. Therefore, the comparison of development directories before and after wepy development is as follows:

Official DEMO:

Directory structure with the Wepy framework:

5. Babel compilation is used by default and some new features of ES6/7 are supported.

Users can modify the. Wepyrc configuration file to configure their familiar Babel environment for development. Default enabled uses new features like Promise, async/await, etc.

Sample code:

6. Optimize for native apis.

Promise processing to the existing API, and fix some existing API flaws such as wx.request concurrency issues. Original code:

Implementation code based on WEpy:

When testing 10 requests simultaneously: Without using wepy:



After using Wepy:

Advanced instructions

Wepyrc configuration file description

performwepy new demoA similar configuration file is generated.



WpyExt:The default value is’. Wpy ‘. The IDE does not highlight this file type by default, so you can change all files to.vueSuffix (because it is the same as vue highlighting rules), and then change this option to.vueTo solve part of the IDE code highlighting problem.

Sass:Sass compile configuration, see (Github.com/sass/node-s…)

Less:Less for compilation and configuration, seeLesscss.org/#using-less…)

Babel:Babel compile configuration, seeBabeljs. IO/docs/usage /…)

Wpy file description

wpyThe compilation process of the file is as follows:

A.wpy file is divided into three parts:

  1. The style corresponds to the original WXSS.

  2. The template corresponds to the original WXML.

  3. The code corresponds to the original JS.

Where entry fileapp.wpyDon’t needtemplate, so it will be ignored during compilation. All three tags are supportedtypeandsrcProperties,typeDetermines how its code is compiled,srcDetermines whether the outgoing code existssrcProperty and is valid, the inline code is ignored as shown in the following example:



The label correspondingtypeValues are as follows:



The Script that

Program entry app.wpy



The entranceapp.wpyInherited fromwepy.appContains oneconfigProperty and its global properties, methods, events. Among themconfigProperty corresponds to the originalapp.json, compiled according toconfiggenerateapp.jsonFile, if neededconfigPlease use the API provided by the system.

The index page. Wpy



Page entry inherits fromwepy.page, the main attributes are described as follows:

Com components. Wpy



The page entry inherits from Wepy.component and has the same properties as the page properties, except that it does not require config and some page-specific applet events, etc.

component

In the small program, JS modularization and WXML template can be used to divide business modules to achieve the following effects:

However, different module code and event interactions are handled in the same page space. For example, if an ADD response event exists in moduleA and moduleB, it needs to be defined as moduleA_add in HTML and moduleB_add in JS. The complexity of business modules becomes difficult to develop and maintain.

In WEpy, this kind of problem can be solved by using the componentization feature, as shown below:



ComA 和 ComBThe data and events in the middle are isolated and can have their ownaddEvents.

A component reference

When a page or component needs to import a child component, assign a unique ID to the component in the components of the page or script, and add a tag to the template, such as index.wpy.

Both pages and components can introduce subcomponents. After introducing several components, the following figure shows:

The Index page introduces three components A, B, and C, and components A and B have their own sub-components D, E, F, G, and H.

Component communication and interaction

The wepy.component.ponent class provides three methods: $broadcast, $emit, and $invoke, so any page or component can call these three methods to communicate and interact with each other.

$this.$emit('some-event', 1, 2, 3, 4);Copy the code

The component’s event listener needs to be written ineventsProperties, such as:

  1. $broadcast

    $broadcastThe event is initiated by the parent component, and all child components receive the broadcast event unless the event is manually cancelled. The order of event broadcast is breadth-first search order, as shown in the figure above, ifPage_IndexTo launch a$broadcastEvent, the sequence of events received is A, B, C, D, E, F, G, and H. The diagram below:



  2. $emit

    $emitwith$broadcastInstead, the parent of the event – originating component receives it in turn$emitEvent, as shown above, if E initiates one$emitEvent, then the order of events received is: A, Page_Index. The diagram below:



  3. $invoke $invoke is a direct call from one component to another, finding the corresponding component through the component path passed in, and then calling its methods. If you want to call A method of component A in Page_Index:

    this.$invoke('ComA', 'someMethod', 'someArgs');Copy the code

    If you want to call A method of component G from component A:

    this.$invoke('./.. /ComB/ComG', 'someMethod', 'someArgs');Copy the code

Data binding

Applets data binding mode

Applets use setData methods provided by Page to unbind data, such as:

this.setData({title: 'this is title'});Copy the code

Because of the applets architecture itself, the page rendering layer and THE JS logic layer are separated, and the setData operation is actually the communication between the JS logic layer and the page rendering layer, so if the setData operation is executed several times in the same running cycle, then the number of communication is once or many times? After verification with the development of small program colleagues that will indeed communicate many times.

Wepy data binding

Wepy uses the dirty data check to encapsulate setData, and performs the dirty data check at the end of the function running cycle. On the one hand, it does not need to worry about whether setData will have performance problems on the page multiple times. On the other hand, it can be more concise to modify the data to achieve binding, and it does not need to write the setData method repeatedly. The code is as follows:

this.title = 'this is title';Copy the code

Note, however, that modifying data in a function outside the function cycle requires a manual call$applyMethods. Such as:

Wepy dirty data check process

If a dirty data check is performed, it will passthis.? phaseIdentifies the current check status and ensures that only one dirty check process is running in a concurrent process. The following is a flow chart for performing a dirty check:

Other optimization details

1. Wx. request Accepts parameter modification

2. Optimize event parameter transmission

3. Change the data binding mode

SetData (target, value) this.setData(object)

4. Components replace templates and modules

API

wepy.event



wepy.component

wepy.page



wepy.app



If you think our content is good, please scan the QR code to appreciate the author and share with your friends

This article is the exclusive content of Tencent Bugly, please reprint at the beginning of the articleNote the author and source “Tencent Bugly(http://bugly.qq.com)”