小程序开发：基于 WEB 规范的框架及文件夹结构详解
本文主要介绍了小程序的开发原理，文中介绍的很详细，有一定的参考价值，有兴趣的朋友一定要看看！
小程序是一套基于WEB规范使用HTML、CSS、JS构建的框架，微信官方给它们起了几个很酷的名字：WXML、WXSS，但本质上它们还是构建在整个WEB体系之下的。
WXML，我个人猜测这个名字来自于微信的Xml，其实它是XML的一个子集。
WXML 使用了微信定义的少量标签 WXSS，可以理解为自定义 CSS。实现逻辑部分的 JS 依然是通用的 ES 规范。并且是（iOS、X5）。
小程序
小程序文件夹结构
一个完整的小程序主要由以下几个部分组成：
入口文件：app.js
全局样式：app.wxss
全局配置：app.json
页面：下一页。每页分为多个文件夹。每页有 4 个文件
视图：wxml、wxss
逻辑：js.json（页面配置，非必须）
注意：也可以按照模块划分子文件夹和孙文件夹，在app.json中注册时填写路径即可。
小程序包装
开发完成后我们可以在这里进行可视化，点击直接打包上传，审核通过后用户就可以搜索了。
有关的
那么封装是如何实现的呢？
这就涉及到这个编辑器的实现原理和方法了，它也是基于WEB技术体系实现的，nwjs+，什么是nwjs：简单来说就是node+，node给我们提供了本地API能力，给我们提供了web能力，两者结合起来就可以让我们用JS+HTML来实现本地的应用。
既然它存在，那么上面的封装选项中的功能就很容易实现。
ES6 到 ES5：导入 -core 节点包
CSS补全：导入和的节点包（和的原理可以看这里）
代码压缩：导入node包
注意： 上使用的是 x5 内核，对 ES6 的支持不是很好，为了兼容，要么使用 ES5 语法，要么导入兼容的库。
打包后的文件夹结构
打包后的小程序结构如下：
所有小程序基本上都属于上述结构。
1. .js框架JS库.基于逻辑层提供API能力
2. .js框架JS库，提供视图层基础API能力
3. .js框架 JS库.控制台
4. app-.js 小程序的完整配置，包括app.json中的所有配置，以及默认的配置类型
5. app-.js 我们自己的JS代码全部打包到这个文件中
6.page-.html是小程序视图的模板文件，所有的页面都使用这个文件加载渲染，所有的WXML文件都分解成JS文件打包在这里。
7.所有页面。这个不是我们之前的wxml文件了，主要是处理WXSS转换，用js插入到区域中。
小程序架构
微信小程序的框架由两部分组成：View层和App逻辑层。View层用于渲染页面结构，App层用于逻辑处理、数据请求、接口调用。它们在两个进程（两个）中执行。
视图层与逻辑层通过系统层进行通信，逻辑层将数据变化通知给视图层，触发视图层页面更新，视图层将触发的事件通知给逻辑层进行业务处理。
小程序架构图：
小程序启动时会从CDN下载小程序完整包，一般以数字命名，如：_-。
小程序技术实现
小程序的UI视图和逻辑处理都是在多个进程中实现的，逻辑处理的JS代码全部加载到一个进程中，叫做 。整个小程序只有一个进程。并且整个生命周期都驻留在内存中，而所有视图（wxml和wxss）都是单独承载的，叫做 。因此，当打开一个小程序时，至少会有2个进程。由于每个视图都是一个独立的进程，考虑到性能消耗，小程序不允许打开超过5级的页面。当然，这也是为了更好的体验。
可以理解为一个简单的页面，其主要功能是执行逻辑处理部分，底层提供了一个.js文件来提供各种API接口，主要有以下几个部分：
消息通讯包为（开发环境为.，IOS为.....，使用.）
1.日志组件封装
2.wx对象下的API方法
3. 全局App、Page和其他全局方法
4. 还有AMD模块规范的实现
然后整个页面就加载了一堆JS文件，包括小程序配置，上面的.js（调试模式下还有.js），剩下的都是我们自己写的JS文件，一次性全部加载完。
在开发环境中
1.页面模板：app.nw/app/dist//tpl/.js
2.配置信息直接写入js变量中。
3.其他配置
在线环境
上线后应用部分会打包成两个文件，分别名为app-.json、app-.js，然后微信打开加载。上线部分应该是微信本身提供的对应模板文件，在压缩包里是找不到的。
1. .js（底层支持）
2. app-.json（应用程序配置）
3.app-.js（应用程序逻辑）
然后在引擎中执行它。
这个可以理解为一个h6页面，它提供UI的渲染，底层提供了一个.js来提供底层功能，如下图：
1.消息通讯包是 （开发环境是 ，IOS是 ..... ，下次使用是 。）
2.日志组件封装
3.wx对象下的API，这里的API和上一节的API有少许不同，有些功能和上一节的API几乎一样，但大部分都是处理UI显示相关的方法。
4. 小程序组件实现及注册
5. 差异和 UI 实现
6. 页面事件触发
在这个基础上还有一个html模板文件，通过这个模板文件加载详细页面，这个模板主要有一个方法$gwx，主要返回指定的页面，在打包的时候会把所有页面的WXML提前转换成模板文件，微信写了两个工具，wcc（用来转换WXML）和wcsc（用来通过标签把WXSS转换成JS字符串）。
与视图通信
使用消息和机制实现两个对象之间的通信，实现方式是统一封装一个对象，不同环境封装不同的接口，具体实现技术如下：
环境
通过 实现。（使用扩展接口注入一个.js，封装了方法，实现相互之间的通信，同时还提供了通过 .. 直接操作原生方法的接口）
发送消息：.(data, '*');. //在数据中指定
接收消息：.('', );//消息处理及分发，同时支持调用nwjs原生的能力。
我看到里面有一句话，证明也是通过one来实现的，而且实现原理跟view是一样的，只是处理的业务逻辑不一样。
'' === b ? (a) : '' === b && (a)
iOS
通过...NAME。微信代码中实现了两个消息处理函数：
：调用本机功能
: 信息分发
通过。这是微信提供给JS调用的接口（实现）
：调用本机功能
: 信息分发
微信组件
在 .js 中，有个对象叫 ，它完整实现了小程序中的组件，看详细的实现方式，思路跟 w3c web 规范类似，但是详细的实现方式不一样，所有我们使用到的组件都会提前注册，渲染的时候进行替换组装。
有一个核心方法：
：注册组件的一些基本行为，供组件继承
：注册组件，与我们的交互接口主要是属性和事件
组件触发事件（调用接口），然后分发到层指定的页面注册事件处理方法。
总结
小程序底层依然是基于的，没有发明什么新技术，整个框架体系比较清晰简单，基于Web规范，保证了现有技能价值的最大化，只需要理解框架规范就可以使用现有的Web技术进行开发，理解和开发都比较简单。
MSSM：它彻底将逻辑和 UI 隔离，这一点和目前流行的 Vue 有本质区别。小程序的逻辑和 UI 完全在两个独立的系统中执行，而后面的框架还是在一个系统中执行，如果你愿意，你仍然可以直接操作 DOM 对象，进行 UI 渲染。
组件机制：引入了组件机制，但并不完全基于组件开发，像Vue大部分UI还是模板化渲染，引入组件机制可以更好的规范开发模式，也更方便升级和维护。
多重限制：最多可以同时打开5个窗口，打包文件不能大于1M，DOM对象不能大于等，都是为了保证更好的体验。
以上就是《小程序开发原理》这篇文章的全部内容了，感谢大家的阅读！希望分享的内容对大家有所帮助，更多相关知识请关注易速云行业资讯频道！