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

This article mainly shows you the "Analysis of the implementation principle of WeChat Mini Programs at the bottom". The content is simple and clear, and I hope it can help you solve your doubts. Next, let the editor lead you to study and study the article "Analysis of the implementation principle of WeChat Mini Programs at the bottom".

Start with the map component

In the development documentation released today, we know that when using a map component, it looks like this:

In the previous file, we mentioned that this file is a wxml file, and then we will use wxcc to convert it to the method in virtual dom, such as:

. / wcc-d map.xml

It returns a method of js, such as:

/ * v0.7cc_20160919*/var $gwxcvar $gaic= {} $gwx=function (path,global) {function _ (a) b) {b&&a.children.push (b);} function _ n (tag) {$gwxc++;if ($gwxc > = 16000) {throw 'enough, dom limit exceeded, you don\' t do stupid things, do you?'} Return {tag:tag.substr (0jue 3) = = 'wx-'?tag:'wx-'+tag,attr: {}, children: []}} function _ s (scope,env,key) {return typeof (scope [key])! =' undefined'?scope [key]: Env [key]}.

An interlude: there is a count on it, which is interesting $gwxc > 16000. This is the count of the dom number. If you exceed it, there will be an exception: enough, dom limit exceeded, you don't do stupid things, do you?, means: you stupid human, are you a front-end developer?

Then, debug it in the browser:

JSON.stringify ($gwx ('map.wxml') (' test'))

In Mini Program, it is called like this:

Document.dispatchEvent (new CustomEvent ("generateFuncReady", {detail: {generateFunc: $gwx ('map.wxml')}}))

The following result is returned:

{"children": [{"attr": {"covers": "," latitude ":" 113.324520 "," longitude ":" 23.099994 "," markers ":"," style ":" width: 375px; height: 200px " "}," children ": []," tag ":" wx-map "}]," tag ":" wx-page "}

It seems that the tag named wx-map is the map tag under Wechat, and it is the children of wx-page. Then let's search WAWebview, and we'll find a very interesting code:

{is: "wx-map", behaviors: ["wx-base", "wx-native"], template:', properties: {latitude: {type: Number, reflectToAttribute:! 0, observer: "latitudeChanged", value: 39.92}, longitude: {type: Number, reflectToAttribute:! 0, observer: "longitudeChanged", value: 116.46}, scale: {type: Number, reflectToAttribute:! 0 Observer: "scaleChanged", scale: 16}, markers: {type: Array, value: [], reflectToAttribute:! 1, observer: "markersChanged"}, covers: {type: Array, value: [], reflectToAttribute:! 1, observer: "coversChanged"}, _ mapId: {type: Number}}

There is a sentence in its behaviors: wx-native, is this the legendary native component?

By the way, see if a video is the same:

{is: "wx-video", behaviors: ["wx-base", "wx-player", "wx-native"], template:'\ n\ n {{_ currentTime}}\ n\ n Properties: {_ videoId: {type: Number}, _ progressLeft: {type: Number, value:-22}, _ progressLength: {type: Number, value: 0}}

Well, you're so smart, so I'll just say half of it, and I'll leave you to guess.

What is certain is:

The map tag becomes HTML + CSS when developed.

Map tags can call Native components on Wechat in a form similar to Cordova.

Then, in the case of virtual dom, go back to map.js in the sample code:

Page ({data: {markers: [{latitude: 23.099994, longitude: 113.324520, name: 'T.I.T Creative Park', desc: 'where I am'}], covers: [{latitude: 23.099794, longitude: 113.324520, icaonPath:'.. / images/car.png', rotate: 10}, {latitude: 23.099298 Longitude: 113.324129, iconPath:'.. / images/car.png', rotate: 90}]}})

Only data is placed in the js, and the rest are observer that changes according to the above values, such as:

_ updatePosition

_ hiddenChanged

LatitudeChanged

LongitudeChanged

ScaleChanged

CoversChanged

...

The feeling of this kind of code is a step further than that of React. Originally, you still need to code to observe state, but now you only need to change state. 23333. You programmers will be fire.

All right, that's about it here.

Re-examine WXWebview.js

So, I went back to WXWebview.js and found that this file contains not only the contents of component, but also:

ReportSDK

WebviewSDK??

Virtual_dom

Exparser

Wx-components.js

Wx-components.css

Wait, have you guessed what I'm talking about? we talked about PageFrame in the last article:

In the previous thought, I felt that I had to collect all the SDK above in order to summon the Dragon. Later, I saw this sentence:

IsDev? {"": "reporter-sdk.js", "": "webview-sdk.js", "": "virtual_dom.js", "": "exparser.js", "": "wx-components.js", "": "wx-components.css"}: {"": "WAWebview.js"}

What about a production environment if you use WAWebview.js instead of a development environment and use xxSDK in a development environment? If you are in the development environment, you will download the latest SDK, which seems to be wrong, .

I guess in this part, I need an internal test id to guess this answer.

Interestingly, IDE compares version.json and then goes to get the latest for preview?

{"WAService.js": 2016092000, "WAWebview.js": 2016092000, "wcc": 2016092000, "wcsc": 2016092000}

The functions of WAWebview have been clearly explained above, and WAService.js-- that is, those that encapsulate API, such as downloadFile:

UploadFile: function (e) {u ("uploadFile", e, {url: ", filePath:", name: ""}) & & (0, s.invokeMethod) ("uploadFile", e)}, downloadFile: function (e) {u ("downloadFile", e, {url: "}) & & (0, s.invokeMethod) (" downloadFile ", e)}

This is still quite interesting, it is still WAWebview that does quite a lot of things when we are developing, and it is separate from the packaging of WAService (WeChat Mini Programs's pre-development preparation and environmental process).

So, in theory, all we need is WAWebview to Render the page.

The hot 0 basic Mini Program production and development training camp worth 1980 yuan is free to watch.

The above is all the contents of the article "WeChat Mini Programs's underlying implementation principle Analysis". Thank you for your reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.