微信小程序的基本实现原理是什么？

2017年7月14日，HiShop最新消息，微信小程序底层的实现原理是怎样的?对于微信小程序开发而言有什么开发上的便捷？hvihi.com记者为大家分析！

根据小程序开发文档框架（https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html）部分，您可以从微信小程序提供的开发界面中看到它：

1.提供JavsScript运行时环境，JavaScript编写的业务代码完成逻辑层的处理

2.通过数据传输接口将逻辑层的数据传输到视图层（注册页面时的数据属性和后续的setData方法调用）

3.视图层由WXML语言编写的模板合并“数据绑定”和逻辑层传输的数据，以显示结果并显示它

4.视图的样式控件由用WXSS语言编写的样式规则配置

然后看看这四点中的每一点的细节：

1.提供JavsScript运行时环境，JavaScript编写的业务代码完成逻辑层的处理

什么是JavaScript运行时环境？

该句子已在开发文件Q＆amp; A（https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html）中给出。 JS运行时环境位于JsCore：

为什么我不能在脚本中使用诸如窗口之类的对象

页面的脚本逻辑在JsCore中运行

2.通过数据传输接口将逻辑层的数据传输到视图层（注册页面时的数据属性和后续的setData方法调用）

如何在逻辑层和视图层之间传输数据？

该视图是纯粹的本机渲染，因此它是原生的。

如上所述，逻辑层是在JsCore中运行的JavaScript代码。

使用JsCore，微信小程序框架的native和js端可以通过JsCore相互通信。因此，微信小程序框架的本机端和js端可以就通信协议/规范达成一致，然后js端通过通信协议/规范和本机通信的一部分将接口封装并公开为API（最上面的传输或设置数据API）也就是说，上面提到了注册页面的数据属性和随后的setData方法，因此逻辑层的业务代码可以实现数据到视图层的传输。

（对原生其他API的调用也可以以类似的方式完成）

3.视图层由WXML语言编写的模板合并“数据绑定”和逻辑层传输的数据，以显示结果并显示它

视图层和数据如何合并以显示结果并显示它们？

首先看一下WXML语言提供的界面并找到它：

与html/xml类似，按标签描述视图

与angular/vue类似，模板通过指令（标签的特殊属性）和双括号增强，因此模板和数据合并是结果标签

但仔细观察就会发现说明书实际上非常简单。它们仅为循环列表提供wx:为控制逻辑提供wx: if，wx: else，wx: elif指令

双括号中支持简单表达式，表达式中的变量是逻辑层输入的数据

每次逻辑层更新数据时，视图层都会更新合并并相应地更新渲染

考虑到最简单的情况，要完成这三个功能，您可以粗略地执行以下操作：

本机端读取WXML模板文件，然后根据逻辑层中的数据解析指令和双括号（您可以从数据中获取值并根据大括号表达式计算它们，然后循环表达式判断可用于删除wx: for，wx: if if），生成一个标记字符串，可用于表示数据合并后的最终表示，

然后将标记解析为具有属性的节点树，并相应地在本地节点中创建与节点树中的每个节点对应的视图元素（可以是微信框架中的系统组件或视图组件），并设置相应的属性。并保持正确的父子关系。

更新逻辑层数据时，还会更新相应的属性。

当然，在实际处理中，有许多因素需要考虑和许多优化，但基本思想应该大致相同。

4.视图的样式控件由用WXSS语言编写的样式规则配置

样式如何匹配和设置？

在构造每个视图元素之后，WXSS文件仍然由native读取，并且可以通过简单的字符串匹配解析为一对“selector-rule”对。规则是属性键值。然后将每个视图元素与“selector-rule”对中的选择器匹配，并匹配相应属性值的成功（也考虑全局样式以及页面样式和样式属性样式的优先级）

如何使用css样式布局原生元素？

最基本的flex布局可以通过facebook的css-layout完成（GitHub-facebook/css-layout: CSS的一个子集（特别是flex-box）重新实现为一个独立的项目，主要用于移动设备。用于反应 - 天然的）

另外，就事件而言，在本机接收到用户事件之后，它在必要时通过JsCore与内部运行的js通信，并将事件数据传递给js端的框架，然后相应的回调由js-end框架。

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。