第二章--微信小程序开发基础

一、微信小程序的基本目录结构：

主目录: pages、utils

文件夹：app.js、app.json、app.wxss、project.config.json

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

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

主体文件：

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

APP:

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

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

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

页面文件：

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

index：

is文件页面逻辑文件，在该文件中编写 JavaScript 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
wxml文页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖 app.wxss 中的样式规则;否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少
ison 文件 页面配置文件。该文件在页面中不可缺少。

二、小程序的开发框架

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

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

①视图层：MINA框架的视图层由WXML与WXSS 编写由组件来进行展示。对F微信小程序而言，视图层就是所有wxml文件与.wxss文件白集合:.wxml 文件用于描述页面的结构;文件用于描述页面的样式wxsS
微信小程序在逻辑层将数据进行处理后发送合视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是I组件来进行的组件是视图的基本组成单元。

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

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

1.页面临时数据或缓存
在Page()中，使用 setData 函数将数据从逻辑层发送到视图层，同时改变对应的this.data 的值。
setData()函数的参数接收一个对象，以 (key,value) 的形式表示将 key 在this