微信小程序开发使用了前端技术/WXML/js背后的原理
发表时间：2023-11-04 11:24:41
文章来源：炫佑科技
浏览次数：169
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
微信小程序采用前端技术栈/WXML/WXSS。 但与常规前端开发有一些区别：
：微信小程序的运行环境既不是Node.js，也不是Node.js。 它运行在微信App的上下文中，无法操作DOM，也无法通过Node.js相关接口访问操作系统API。 因此，严格来说，微信小程序并不是Html5，尽管开发流程和使用的技术栈与Html5相同。
WXML：作为微信小程序的显示层，它不使用Html，而是基于XML语法自行发明的描述。
WXSS：用于修改表示层的样式。 官方的描述是“WXSS（Style）是一组用于描述WXML组件样式的样式语言。WXSS用于确定WXML组件应该如何显示”。 “我们的WXSS拥有CSS的大部分功能……我们非常熟悉CSS的扩展和修改。” 基于 CSS2 还是 CSS3？ 哪些部分占多数？ 支持CSS3动画吗？ 未知。
在微信小程序的官方文档中，有这样一段话：
微信小程序运行在三个终端：iOS、调试的开发工具
在iOS上，小程序的代码运行在
上，小程序的代码是通过X5内核解析的
开发工具上，小程序的代码运行在nwjs（内核）中
让我们从开发工具开始。
开发工具
小程序的代码在nwjs中运行。 nwjs是什么鬼？ 官方的介绍是这样的：
NW.js（称为 Node-）允许您从 DOM 调用所有 Node.js，并以一种新的方式处理所有 Web。
nwjs 与 Node.js 运行时合并，使用前端开发技术开发跨平台应用程序。 借助 Node.js 访问操作系统本机 API 的能力，您可以开发跨平台应用程序。 微信小程序开发工具是使用nwjs开发。 如果您是Mac用户，请进入目录//.app///app.nw/app查看开发工具的实现代码。 当然，代码是混淆的。 网上流行的破解版开发工具基本上都是修改里面的代码。
同样，推出了一个比较流行的项目，也是与Node.js结合开发跨平台应用程序。 程序员应该听说过 Atom，它是编辑器界的后起之秀。 包括微软拥抱开源社区的编辑器也是使用它开发。
对阵 NWJS
这两个平台有什么区别？ 微信为什么选择nwjs？ 我们不妨猜测一下。
从技术角度来说：
应用程序入口不同：入口是一个脚本，您在其中负责创建窗口并加载html页面。 nwjs的入口是一个html页面，框架本身会创建一个窗口来显示这个html页面。
Node.js集成方式不同：直接使用Node.js的共享库，无需修改代码。 为了集成Node.js，nwjs需要修改代码，使其能够通过Node.js访问系统原生API。
多：nwjs有多个上下文，一个是上下文，用于访问相关API，比如操作DOM，另一个是Node上下文，用于访问操作系统API。 它不使用多个上下文，并且对开发更加友好。
从应用角度来说：
打包文件大小：打包后的文件会比nwjs小很多。 一个18M的程序打包后是117M，而使用nwjs打包后的程序是220M。 打包好的微信小程序开发工具219M（v0.10.）。 没有亲自测试，评测来源参考文档。
代码保护：仅支持代码混淆进行保护，而nwjs将核心代码放在V8引擎中，不仅保护了代码，还提高了执行效率。
开源社区活动：应该是彻底的胜利。 只需看看使用它构建的应用程序即可。 据说nwjs的一些开发文档没有及时更新。
应用程序启动时间：稍快一些。 没有亲自测试，评测来源参考文档。
由此分析推测，微信之所以选择nwjs，可能是为了代码保护。 毕竟开发工具可以上传小程序，一些接口和数据需要更严密的保护。 任何专家都可以深入研究一下哪些代码受到保护吗？
真机运行环境
以下内容完全是猜想，如果属实，那只是运气而已。
微信小程序的运行环境应该和这个比较类似，而不是纯粹的Html5。 两者*大的区别在于Html5的界面是由原生控件渲染的，而Html5的界面是由内核渲染的。 两者的性能有很大差异。 如果有兴趣，可以参考我的另一篇文章《跨平台App开发技术方案总结》。
原则上，小程序在微信App中是如何运行的？
微信App包含一个运行引擎。
微信App包含WXML/WXSS处理引擎，*终会将界面翻译为系统原生控件并显示。 这样做的目的是提供与原生App性能相当的用户体验。
我们看一下小程序的加载和运行过程：
用户点击打开小程序
微信小程序
分析app.json，获取应用的配置信息（导航栏、窗口样式、包含的页面列表等）
加载并运行app.js
加载并显示app.json中配置的**页
这只是从开发的角度看到的过程的简化版本。 实际的流程应该比这复杂很多，涉及到线程（也就是运行我们逻辑层代码app.js等的线程）和线程之间的交互。 从官网的一张图片可以看出端倪：
生命周期
至于微信App与小程序逻辑层如何交互？ 可以简单概括如下：
它是一种可以在运行时解释和执行的脚本语言。 微信App包含一个引擎，负责执行逻辑层代码。 那么与调用的小程序相关的API是如何实现的呢？ 答案是，它*终会被翻译成微信App中实现的原生界面。 例如，当开发调用wx.()获取当前地理位置时，微信App中的引擎执行该代码时，会调用微信App中实现的原生接口来获取地理位置坐标。
有兴趣的朋友可以看一下我之前推荐的一篇文章《React从入门到原理》。 文章虽然是这样分析的，但是原理其实是一样的。
总结
微信小程序*大的优点就是不需要设备适配。 只要微信能运行，小程序就能运行。 虽然小程序是一种封闭的前端开发技术微信小程序开发使用了前端技术/WXML/js背后的原理，但凭借微信的巨大影响力，几乎所有人都趋之若鹜。 微信小程序如此受欢迎。 它们在内部测试中很受欢迎微信小程序开发原理，在公共测试中更受欢迎。 内测一出来，就有人用微信小程序实现了一个商城，并开源了。 感叹：你的热情就像一把火，燃烧了整个沙漠。
作为开发，我想提一下几个缺点：
不支持从中加载模块。 这实际上排除了 npm。 从开发生态的角度来看，这应该是微信小程序下一步重点解决的关键问题。
开发工具自带的代码编辑器还是太简陋了。 我不知道微信为什么要重新发明轮子。 理论上，为流行的代码编辑器（/atom/etc.）开发一个插件。 然后用户可以直接进入小程序后台上传提交审核。 程序员是一个挑剔、近乎偏执的物种，而代码编辑器是程序员无时无刻不在打交道的工具。 要把它做好并不容易。
