微信小程序底层的实现原理是怎样的?？_问答_优艾设计网_设计界精英聚集地,Ps自学,电脑知识百科,专业设计知识分享平台

微信小程序底层的实现优艾设计网_PS交流原理是怎样的？

210****907 2022-05-29 18:52

优艾设计网_PS百科用js调用android和ios底层功能，用html5展示界面。性能比不上原生app

3优艾设计网_平面设计60U2705570660 2022-05-29 18:54

瞎猜的：用Native抹平了系统间的差异，搞套DSL把系统的API暴露给前端开发。可以理解为没有编译过程的React Native/Weex，有WebAPP的灵活性，又有接近Native的性能。

意欲喜欢 2022-05-29 19:02

根据小程序开发文档-框架(https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html)部分，可以从微信小程序提供的开发接口上看出：1. 提供了JavsScript运行环境，由JavaScript编写的业务代码完成逻辑层的处理2. 通过数据传输接口（注册Page时的data属性及后续的setData方法调用）将逻辑层的数据传输给视图层3. 视图层由WXML语言编写的模板通过“数据绑定”与逻辑层传输过来的数据merge成展现结果并展现4. 视图的样式控制由WXSS语言编写的样式规则进行配置再分别来看这4点各自的细节问题：1. 提供了JavsScript运行环境，由JavaScript编写的业务代码完成逻辑层的处理JavaScript运行环境是什么？开发文档Q&A(https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html)中这句已给出，JS运行环境是在JsCore里：

为什么脚本内不能使用window等对象
页面的脚本逻辑在是在JsCore中运行

2. 通过数据传输接口（注册Page时的data属性及后续的setData方法调用）将逻辑层的数据传输给视图层数据在逻辑层与视图层间如何传输？视图为纯native渲染，故位于native端。而逻辑层如上所述，是跑在JsCore中的JavaScript代码。有了JsCore，微信小程序框架的native端与js端就可以通过JsCore来相互通信了。于是，微信小程序框架的native端与js端可以约定好通信协议/规范，再把js端通过此通信协议/规范与native通信的部分封装并暴露接口为API（最上层的传输或说设置数据的API也就是上面说的注册Page时的data属性与后续的setData方法），这样逻辑层的业务代码就可以实现向视图层传输数据了。（对native其他API的调用也用类似的方法即能走通）3. 视图层由WXML语言编写的模板通过“数据绑定”与逻辑层传输过来的数据merge成展现结果并展现视图层与数据如何merge为展现结果并展现？首先看WXML语言提供的接口，发现它：类似于html/xml，用标签方式来描述视图类似angular/vue，通过指令(标签的特殊属性)与双大括号来实现模板的增强功能，使模板与数据merge为结果标签但细看发现，指令其实很简单，只提供了用于循环列表的wx:for指令，与用于控制逻辑的wx:if,wx:else,wx:elif指令双大括号内支持简单的表达式，表达式中的变量即逻辑层输入的数据每次逻辑层更新数据，视图层会相应更新merge并更新渲染考虑最简单的情况，要完成这3个功能，大致可以通过做如下事来完成：native端读取WXML模板文件，再根据逻辑层传来的数据将其中的指令与双大括号处理解析(可根据大括号表达式从数据中取值并计算，再以对表达式值进行循环与判断便可相应解除wx:for,wx:if指令)，生成与数据merge后、可以表征最终展现内容的标签串，再以解析xml的方式解析标签为带有属性的节点树，并对应节点树中各节点相应创建native中的视图元素(可能为系统组件、也可能为微信框架中的视图组件)、设置相应属性、维护为正确的父子关系即可。逻辑层数据更新时，也更新相应属性即可。当然实际处理中，要考虑的因素要多许多，也会做许多优化，但基本思路应大致如此。4. 视图的样式控制由WXSS语言编写的样式规则进行配置样式如何匹配与设置？构建出各视图元素后，仍由native读取WXSS文件，用简单字符串匹配即可将其解析为一对一对的"选择器-规则"对，规则内即为属性键值。之后再对各视图元素与"选择器-规则"对中的选择器进行匹配，匹配成功设置相应属性值（还要考虑全局样式与页面样式及style属性样式中的优先级）即可如何使用css样式对native元素进行布局？最基本的flex布优艾设计网_设计LOGO局可以由facebook的css-layout来完成(GitHub - facebook/css-layout: A subset of CSS (specifically flex-box) re-implemented as a stand alone project for use primarily on mobile. Used by react-native)另外，事件方面，native接收到用户事件后，必要时通过JsCore反向与其内运行的js进行通信，将事件数据传递给js端的框架，再由js端框架调起相应回调即可。另有一些细节可参见：微信小程序开发API调研 - 吕晟的文章 - 知乎专栏欢迎讨论，望轻拍 : )

一只小砖 2022-05-29 19:05

优艾设计网_PS百科通过网页代码调用原生的api/控件，然后一堆限制，始终不理解为什么这些程序员不自己写个移动网站，非要钻微信的笼子，没有性格没有下限。

M30****9886 2022-05-29 19:05

作者：phodal链接：http://zhuanlan.zhihu.com/p/22607204来源：知乎著作权归作者所有，转载请联系作者获得授权。

本来想的是昨天晚上写这篇文章的，后来昨天在写一个Cordova上的iOS插件的时候各种不顺。对接的第三方SDK不给力，于是六点多回到家的时候，我就就开始娱乐了，哈哈哈~~

其实这篇文章应该算是一篇拾遗。

从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 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 dont 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组件：
顺便再看一个video是不是也是一样的：
{     is: "wx-video",     behaviors: ["wx-base", "wx-player", "wx-native"],     template: <div class="container">    <video id="player" webkit-playsinline style="display: none;"></video>    <div id="default" class="bar" style="display: none;">      <div id="button" class$="button {{_buttonType}}"></div>      <div class="time currenttime" parse-text-content>{{_currentTime}}</div>      <div id="progress" class="progress">        <div id="ball" class="ball" style$="left: {{_progressLeft}}px;">          <div class="inner"></div>        </div>        <div class="inner" style$="width: {{_progressLength}}px;"></div>      </div>      <div class="time duration" parse-text-content>{{_duration}}</div>      <div id="fullscreen" class="fullscreen"优艾设计网_PS问答></div>    </div>  </div>  <div id="fakebutton"></div>,     properties: {         _videoId: {type: Number},         _progressLeft: {type: Number, value: -22},         _progressLength: {type: Number, value: 0} } 好了，你那么聪明，我就这么说一半好了，剩下你自己去猜。
可以肯定的是：
map标签在开发的时候会变成HTML + CSSmap标签在微信上可以使用类似于Cordova的形式调用 Native组件再接着说，Virtual dom的事，回到示例代码里的map.js:
Page({   data: {     markers: [{       latitude: 23.099994,       longitude: 113.324520,       name: T.I.T 创意园,       desc: 我现在的位置     }],     covers: [{       latitude: 23.099794,       longitude: 113.324520,       icaonPath: ../images/car.png,       rotate: 10     }, {       latitude: 23.099298,       longitude: 113.324129,       iconPath: ../images/car.png,       rotate: 90     }]   } }) js里只放置了data，剩下的都是依据上面的值变动的observer，如：
_updatePosition_hiddenChangedlatitudeChangedlongitudeChangedscaleChangedcoversChanged...这种代码的感觉比React更进了一步的节奏，本来你还需要编码来观察state，现在只需要state变动了就可以了。。。23333....，你们这些程序员都会被fire的。
好了，这里差不多就这样了~~。
重新审视WXWebview.js于是，我重新逛逛WXWebview.js，发现这个文件里面不只有component的内容，还有：
reportSDKwebviewSDK ??Virtual_domexparserwx-components.jswx-components.css等等，你是不是已经猜到我在说什么了，上一篇中我们说到了PageFrame：
  <!-- percodes -->   <!--{{WAWebview}}-->   <!--{{reportSDK}}-->   <!--{{webviewSDK}}-->   <!--{{exparser}}-->   <!--{{components_js}}-->   <!--{{Virtual_dom}}-->   <!--{{components_css}}-->   <!--{{allWXML}}-->   <!--{{eruda}}-->   <!--{{style}}-->   <!--{{currentstyle}}-->   <!--{{generateFunc}}--> 在之前的想法里，我觉得我必须要集齐上面的SDK，才能招唤中神龙。后来，我看到了这句：
isDev ? {         "<!--{{reportSDK}}-->": "reporter-sdk.js",         "<!--{{webviewSDK}}-->": "webview-sdk.js",         "<!--{{Virtual_dom}}-->": "Virtual_dom.js",         "<!--{{exparser}}-->": "exparser.js",         "<!--{{components_js}}-->": "wx-components.js",         "<!--{{components_css}}-->": "wx-components.css"     } : {"<!--{{WAWebview}}-->": "WAWebview.js"} 如果不是开发环境就使用WAWebview.js，在开发环境中使用使用xxSDK，那么生产环境是怎么回事？如果是在开发环境会去下载最新的SDK，好像不对~~，哈哈。。
我猜这部分，我需要一个内测id，才能猜出这个答案。
有意思的是，IDE会对比version.json，然后去获取最新的，用于预览？
{   "WAService.js": 2016092000,   "WAWebview.js": 2016092000,   "wcc": 2016092000,   "wcsc": 2016092000 } 上面已经解释清楚了WAWebview的功能了，那么WAService.js呢——就是封装那些API的，如downloadFile：
uploadFile: function (e) {     u("uploadFile", e, {url: "", filePath: "", name: ""}) && (0, s.invokeMethod)("uploadFile", e) }, downloadFile: function (e) {     u("downloadFile", e, {url: ""}) && (0, s.invokeMethod)("downloadFile", e) } 这一点上仍然相当有趣，在我们开发的时候仍然是WAWebview做了相当多的事，而它和WAService的打包是分离的。
那么，我们从理论上来说，只需要有WAWebview就可以Render页面了。
暗与流年换        
                
              
                    优艾设计网_PS交流        
                2022-05-29 19:06
            
            
                                                                       几天了，没心情细分代码我猜测是，js->bridge->系统，然后，系统->bridge->jswebviewbridge这个东西，前端方面我稍微写过一点，以这个为基础猜的。微信应用号充当了bridge的功能如果是这样，性能可以和客户端媲美，但是组件的定制性差，因为组件是调取系统的不好改。也可能调用的不是系统组件而是微信写在微信app内的组件，这样的话定制问题就可以等微信慢慢开放接口了。待我睡醒细看。