注冊(cè)

微信小程序底層的實(shí)現(xiàn)原理開(kāi)發(fā)實(shí)戰(zhàn)說(shuō)明

2017-07-12
導(dǎo)讀:微信小程序底層的實(shí)現(xiàn)原理開(kāi)發(fā)實(shí)戰(zhàn)說(shuō)明,今天hishop為大家整理分享。其實(shí)這篇文章應(yīng)該算是一篇拾遺。從map組件說(shuō)起在今天公布的開(kāi)發(fā)文檔里,我們知道使用一個(gè)地圖組件的時(shí)候是這樣子的...

微信小程序底層的實(shí)現(xiàn)原理開(kāi)發(fā)實(shí)戰(zhàn)說(shuō)明,今天hishop為大家整理分享。

其實(shí)這篇文章應(yīng)該算是一篇拾遺。

從map組件說(shuō)起

在今天公布的開(kāi)發(fā)文檔里,我們知道使用一個(gè)地圖組件的時(shí)候是這樣子的:


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

在之前的文件里,我們提到過(guò)這個(gè)文件是wxml文件,然后我們要用wxcc將其轉(zhuǎn)換為virtual dom中的方法,如:


./wcc -d map.xml

它就會(huì)返回一個(gè)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]}
...

插播一句:上面有一個(gè)count,很有意思$gwxc > 16000,這個(gè)就是dom數(shù)的count。超了就來(lái)個(gè)異常:enough, dom limit exceeded, you don't do stupid things, do you?,中文意思就是:你個(gè)愚蠢的人類,你是一個(gè)前端開(kāi)發(fā)人員嗎?

隨后,在瀏覽器里調(diào)試一下:


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

在小程序中是要這樣調(diào)用的:


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

就會(huì)返回下面的結(jié)果:


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

看來(lái)這個(gè)名為wx-map的標(biāo)簽就是微信下的map標(biāo)簽,它是wx-page的children。然后讓我們?cè)赪AWebview中搜索一下,就會(huì)發(fā)現(xiàn)一個(gè)很有意思的代碼:


{
    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,這莫非就是傳說(shuō)中的native組件:

重磅推薦:小程序開(kāi)店目錄

第一部分:小商店是什么

第二部分:如何開(kāi)通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開(kāi)店任務(wù)常見(jiàn)問(wèn)題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開(kāi)發(fā)