微信小程序底层的实现原理开发实战说明
2017-07-12
导读：微信小程序底层的实现原理开发实战说明，今天hishop为大家整理分享。其实这篇文章应该算是一篇拾遗。从map组件说起在今天公布的开发文档里，我们知道使用一个地图组件的时候是这样子的...
微信小程序底层的实现原理开发实战说明，今天hishop为大家整理分享。
其实这篇文章应该算是一篇拾遗。
从map组件说起在今天公布的开发文档里，我们知道使用一个地图组件的时候是这样子的：
<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
在之前的文件里，我们提到过这个文件是wxml文件，然后我们要用wxcc将其转换为virtual dom中的方法，如：
./wcc -d map.xml
它就会返回一个js的方法，如：
/*v0.7cc_20160919*/
var $gwxc
var $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(0,3)=='wx-'?tag:'wx-'+tag,attr:{},children:[]}}
function _s(scope,env,key){return typeof(scope[key])!='undefined'?scope[key]:env[key]}
...
插播一句：上面有一个count，很有意思$gwxc > 16000，这个就是dom数的count。超了就来个异常：enough, dom limit exceeded, you don't do stupid things, do you?，中文意思就是：你个愚蠢的人类，你是一个前端开发人员吗？
随后，在浏览器里调试一下：
JSON.stringify($gwx('map.wxml')('test'))
在小程序中是要这样调用的：
document.dispatchEvent(new CustomEvent("generateFuncReady", {
detail: {
generateFunc: $gwx('map.wxml')
}
}))
就会返回下面的结果：
{
"children": [
{
"attr": {
"covers": "",
"latitude": "113.324520",
"longitude": "23.099994",
"markers": "",
"style": "width: 375px; height: 200px;"
},
"children": [],
"tag": "wx-map"
}
],
"tag": "wx-page"
}
看来这个名为wx-map的标签就是微信下的map标签，它是wx-page的children。然后让我们在WAWebview中搜索一下，就会发现一个很有意思的代码:
{
is: "wx-map",
behaviors: ["wx-base", "wx-native"],
template: '<div id="map" style="width: 100%; height: 100%;"></div>',
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}
}
它的behaviors中有一句：wx-native，这莫非就是传说中的native组件：
扫码免费领取运营资料包
