第二章微信小程序开发基础（1）

1.小程序的基本目录结构

在微信小程序的基本目录结构中，项目主目录下有2个子目录（pages和utils)和4个文件（app.js、app.json、app. wxss和project.config.json）。
在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。
project.config. json文件是项目配置文件，包含项目名称、AppID等相关信息

pages 目录中有2个子目录，分别是index和 logs，每个子目录中保存着一个页面的相关
文件。通常，一个页面包含4个不同扩展名（.wxml、.wxss、.js和、json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定，同一个竟
面的4个文件必须具有相同的路径与文件名。
utils 目录用来存放一些公共的，js文件，当某个页面需要用到utils.js 函数时，可以将其引入后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目录用来存放。

1.1主题文件

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

app.js 小程序逻辑文件，主要用来注册小程序全局实列。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。

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

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

2.2页面文件

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

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

2.小程序开发框架

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

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

2.1视图层

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

2.2逻辑层

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

2.3数据层

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

1.页面临时数据或缓存

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

2.文件存储（本地存储）使用数据 API接口

如下:wx. getStorage
wx. setStorage wx.clearStorage 3.网络存储与调用
获取本地数据缓存。设置本地数据缓存。清理本地数据缓存。

3.网络储存与调用

上传或下载文件 API接口，如下：
wx. request
wx. uploadFile
发起网络请求。上传文件。wx. downloadFile下载文件。调用URL的API接口，如下：
wx. navigateTo新窗口打开页面。
wx. redirectTo原窗口打开页面。

3.创建小程序页面