2017年7月14日，，，，，，HiShop最新新闻，，，，，，微信小程序底层的实现原理是怎样的?关于微信小程序开发而言有什么开发上的便捷？？？？hishop记者为各人整理剖析!

　　凭证小程序开发文档-框架(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结构可以由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端框架调起响应回调即可。。。。。。