第二章总结

小程序的基本目录结构

项目主目录（pages ，utils）

pages：Pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同扩展名(.wxml、.wxss、.js和.json)的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定，同一个页面的4个文件必须具有相同的路径与文件名。

utils：utils 目录用来存放一些公共的.js文件，当某个页面需要用到utls.js函数时，可以将其引人后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目录用来存放。

主体文件

微信小程序的主体部分由3 个文件组成，这3 个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。

app.js 小程序逻辑文件，主要用来注册小序全局实例。在编译时，app.  文件会程序的整体配置，它们的名称是固定的。和其他页面的逻辑文件打包成一个JavaScript 文件。该文件在项目中不可缺少。

app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少

app.wxss 小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4 个文件必具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对应的资源进行数据绑定

.js文件页面逻辑文件，在该文件中编写 JavaScript 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。

.wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖 app.wxss 中的样式规则;否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少

.json 文件 页面配置文件。该文件在页面中不可缺少

微信小程序的开发框架

微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统网络通信、任务管理、数据安全等基础功能，对上层提供了一整套JavaSerip API，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。

小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标
签语言 WXML(WeiXin Markup Language)和用于描述 WXML,组件样式的 WXss(weixinsnle sheets)组成，它们的关系就像 HTML和CSS的关系。逻辑层(App Serice)是 MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。MINA框架中的逻辑层使用JavaScript来编写交互逻辑网络请求、数据处理，但不能使用JavaSeript中的DOM操作。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。
MINA 框架为页面组件提供了bindtap、bindtouchstart 等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定，当逻辑层中的数据变更时，小程序会主动触发对应页面组件的重新数据绑定。
微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能(如page切换、tab切换、多媒体、网络连接等)上使用接近于系统层(Native)的组件承载。所以小程序MINA框架有着接近原生 App的运行速度，对 Android 端和 i0S 端能呈现得高度一致,并为开发者准备了完备的开发和调试工具。

视图层

MINA框架的视图层由WXML与WXSS 编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构:wxss 文件用于描述页面的样式。

微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。组件是视图的基本组成单元。

逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaSeript 的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括:
(1)增加app()和Page()方法，进行程序和页面的注册
(2)提供丰富的 API，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。逻辑层就是通过各个页面的.is脚本文件来实现的。由于小程序并非运行在浏览器中所以 JavaScript 在 Web中的一些功能在小程序中无法使用，如 document、window 等。开发者开发编写的所有代码最终会被打包成独立的JavaScript文件，并在小程序启动的时候运行，直到小程序被销毁。

数据层

数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。

1.页面临时数据或缓存
在Page()中，使用setData 函数将数据从逻辑层发送到视图层，同时改变对应的this. data 的值。
setData()函数的参数接收一个对象，以(key,value)的形式表示将 key 在 this. data 中对应的值改变成 value。
2.文件存储(本地存储)
使用数据 API接口，如下:
wx.getStorage 获取本地数据缓存
设置本地数据缓存wx. setStorage
清理本地数据缓存。wx.clearStorage
3.网络存储与调用
上传或下载文件 API接口，如下
wx.request 发起网络请求
wx.uploadFile 上传文件。
wx.downloadFile 下载文件
调用 URL的API接口，如下:
wx.navigateTo 新窗口打开页面
wx.redirectTo 原窗口打开页面

创建小程序页面

创建第一个页面文件

继续在项目主日录下新建一个pages目录，在pages 目录下新建一个 index 目录，并在 index 目录下新建 index.js、index.json、index.wxml和 index. wxss 空文件。

创建另一个页面文件

配置文件

小程序的配置文件按其作用范围可以分为全局配置文件(appjson)和页面配置文件(.j)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。

全局配置文件
小程序的全局配置保存在全局配置文件(app,jon)中，使用全局配置文件来配置页面支件(pp)的路径，设置窗日(window)表现、设定网络请求A的超时时间值(mdmmktimeom)以及配置多个切换页(mhBa)等。表2-2列出了各全局配置项的相关描述。

pages配置项
pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项
设置pages 配置项时，应注意以下3点:
(1)数组的第一项用于设定小程序的初始页面。
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、wxml和wxss 文件进行整合数据绑定。

window配置项

tabBar配置项

networkTimeout配置项

debug 配置项
debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console(控制台)面板上。
 页面配置文件
页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件(app.json)中的配置值。

逻辑层文件

页面逻辑文件

页面结构文件

数据绑定

1，运算

2，条件数据绑定

模板

页面样式文件

属性类别
字体
页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩充和修改。

2.样式导入