这篇文章主要为大家展示了“微信小程序底层的实现原理分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序底层的实现原理分析”这篇文章吧。从map组件说起在今天公布的开发文档里,我们知道使用
这篇文章主要为大家展示了“微信小程序底层的实现原理分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序底层的实现原理分析”这篇文章吧。
从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的方法,如:
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(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组件
以上是“微信小程序底层的实现原理分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!
--结束END--
本文标题: 微信小程序底层的实现原理分析
本文链接: https://www.lsjlt.com/news/308759.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-22
2024-05-22
2024-05-22
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0