微信小程序底層的實現原理分析

這篇文章主要為大家展示了“微信小程序底層的實現原理分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“微信小程序底層的實現原理分析”這篇文章吧。

從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組件

以上是“微信小程序底層的實現原理分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！