【微信小程序】小程序的框架和文件结构

前言

    之前的博客中从小程序开发者和使用者的角度介绍了小程序的功能特性和应用场景，在了解了小程序富客户端的特点后，已经可以通过自己理解创建工程了。本篇博客的侧重点在于开发时整体工程的理解，博客将从小程序的架构出发，介绍逻辑上的概念，然后扩展到实际工程的部署和实施上，本文解决的问题如下：
1.小程序自身架构是什么？
2.逻辑层，视图层的关系（小程序的运行环境）？
3.小程序文件结构和工程部署？

第一章 小程序架构

1.1 小程序框架

    小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
    整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
（本段节选自官方文档，链接: link.）

1.2 小程序通讯环境

    为了促进开发者的开发效率，腾讯微信小程序工作组将微信小程序的运行环境分成渲染层和逻辑层，其中渲染层也称之为视图层。在视图层使用了继承XML语言的WXML语言，视图层的样式设计使用了优化CSS的WXSS语言，逻辑层采用JavaScript语言所编写的脚本。
    视图层和逻辑层的数据交互由宿主环境，也就是微信软件，完成传递。通过触碰视图层而触发的逻辑层网络请求，同样由宿主环境进行发送，腾讯微信工作小组所给出的小程序的通信模型下图1-1所示。

图1-1 小程序通讯图

    如图所示，绿色部分是微信小程序的逻辑层，蓝色部分是微信小程序多页面所对应的视图层，而灰色部分所指代的微信客户端为两个层之间的数据交流提供了平台，同样可以看到，微信小程序所涉及网络请求发送和接收也全部由宿主环境微信客户端提供。

第二章 文件结构

2.1 全局文件讲解

    小程序的文件分为两种一种是控制全局的文件，一种是控制页面生成的文件。

表1.1 全局文件结构

文件	作用
app.js	小程序逻辑