这篇文章主要为大家展示了“微信小程序底层的实现原理分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序底层的实现原理分析”这篇文章吧。

从map组件说起

在今天公布的开发文档里，我们知道使用一个地图组件的时候是这样子的：

<maplongitude="23.099994"latitude="113.324520"markers="{{markers}}"covers="{{covers}}"style="width:375px;height:200px;"></map>

在之前的文件里，我们提到过这个文件是wxml文件，然后我们要用wxcc将其转换为virtual dom中的方法，如：

./wcc-dmap.xml

它就会返回一个js的方法，如：

/*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,domlimitexceeded,youdon\'tdostupidthings,doyou?'};return{tag:tag.substr(0,3)=='wx-'?tag:'wx-'+tag,attr:{},children:[]}}function_s(scope,env,key){returntypeof(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(newCustomEvent("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:'<divid="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组件

以上是“微信小程序底层的实现原理分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！