Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the operation principle of wepy". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the operation principle of wepy".

Before we analyze the source code, let's review the use of wepy:

Import wepy from 'wepy';export default class extends wepy.app {.}

Let's take a look at how the class from export is converted into Mini Program.

In the "in-depth wepy source code: wpy file compilation process", we introduced how wepy-cli compiles wpy files, which says that complie-script.js will add wepy initialization code when dealing with script code. The files in the dist directory after compilation are as follows:

/ / dist/app.jsApp (require ('. / npm/wepy/lib/wepy.js'). Default.$createApp (_ default, {}); / / dist/pages/index.js Page (require ('. /.. / npm/wepy/lib/wepy.js') .default. $createPage (Index, 'pages/index'))

As you can see, the $createApp and $createPage methods are mainly called. Before looking at these two methods, let's take a look at the directory structure of wepy to make the later analysis easier to understand.

Wepy directory structure ├─ wepy ├─ src ├─ app.js global app logic. ├─ base.js such as request optimization, promisify API, interceptor function defines $createApp and $createPage and other methods ├─ component.js component logic. Dirty value check, component communication and other ├─ event.js event methods ├─ mixin.js mixed method ├─ native.js empty, the code is used to redefine the wx interface in app.js ├─ page.js inherits component Some of page's optimized ├─ util.js tool methods ├─ wepy.js entry file ├─ test ├─.. createApp and createPage$createApp// dist/app.jsApp (require ('. / npm/wepy/lib/wepy.js'). Default.$createApp (_ default, {}))

$createApp () returns a config of type object that contains ['onLaunch',' onShow', 'onHide',' onError'].

It also executes $initAPI (), which mainly uses Object.defineProperty 's get method to encapsulate the return as promise, which is also the core of API's implementation of promise writing.

$createPage// dist/pages/index.js Page (require ('. /.. / npm/wepy/lib/wepy.js'). Default. $createPage (Index, 'pages/index')

$createPage () is similar to $createApp (), except that it returns the method of Page, and in addition, the data dirty value check $apply () is added during the life cycle.

Data binding

Wepy encapsulates the native Mini Program setData with dirty data checking and performs dirty data checking at the end of the function running cycle. If you update the data in an asynchronous function, you need to execute $apply () manually.

In $createPage (), $apply () is called during the life cycle to look at its definition:

Apply (fn) {if (typeof (fn) = 'function') {fn.call (this); this.$apply ();} else {if (this.$$phase) {this.$$phase =' $apply';} else {this.$digest ();}

$phase identifies whether there is a dirty data check running, and if not, executes $digest ().

Digest () {let k; let originData = this.$data; this.$$phase ='$digest'; this.$$dc = 0; while (this.$$phase) {this.$$dc++; if (this.$$dc > = 3) {throw new Error ('Can not call $apply in $apply process');}. This.$$phase = (this.$$phase = ='$apply')?'$digest': false;}}

When $digest () executes, it mainly traverses the originData, comparing originData [k] with this [k], if not, putting it into readyToSet, and uniformly executes the setData method after the loop.

Finally, check to see if $$phase is set to'$apply',. If so, do another dirty data check.

Thank you for your reading, the above is the content of "what is the operation principle of wepy". After the study of this article, I believe you have a deeper understanding of what the operation principle of wepy is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.