第二章微信小程序基础

学习目标

学习目标
了解小程序的基本目录结构了解小程序的开发框架
了解小程序的文件类型
了解小程序的相关配置信息
小程序的基本目录结构

在微信小程序的基本目录结构中，项目主目录下有2个子目录（pages和utils）和4个文件（app.js,app.json,app.wxss和config.json）
pages目录中有2个子目录，分别是index和logs,每个子目录保存着一个页面的相关文件，通常一个页面有4个不同扩展名（wxml,wxss,js,json）的文件。

主体文件：

微信小程序的主体由3个文件组成：
app.js 小程序逻辑文件,主要用来注册小程序全局实例，编译时，app.js文件会和其他逻辑文件打包成一个JavaScript文件，该文件在项目中不可缺少。

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

app.wxss 小程序主样式表文件，类似HTML的.css文件，该文件在项目中不是必需的。

页面文件：
小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根捷app.json 设置的路径找到相对应的资源进行数据绑定。
js文件  页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件
在每个小程序的页面中不可缺少。
.wxml文件   页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
.wxss 文件  页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使用app.wxss中指定的样式规则。该文件在页面中不可缺少
.json文件 页面配置文件该文件在页面中不可缺少

主体文件：

微信小程序的主体由3个文件组成：
app.js 小程序逻辑文件,主要用来注册小程序全局实例，编译时，app.js文件会和其他逻辑文件打包成一个JavaScript文件，该文件在项目中不可缺少。

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

app.wxss 小程序主样式表文件，类似HTML的.css文件，该文件在项目中不是必需的。

页面文件：

12.:
pages目录中有2个子目录，分别是index和logs,每个子目录保存着一个页面的相关文件，通常一个页面有4个不同扩展名（wxml,wxss,js,json）的文件。

主体文件：

微信小程序的主体由3个文件组成：
app.js 小程序逻辑文件,主要用来注册小程序全局实例，编译时，app.js文件会和其他逻辑文件打包成一个JavaScript文件，该文件在项目中不可缺少。

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

app.wxss 小程序主样式表文件，类似HTML的.css文件，该文件在项目中不是必需的。

页面文件：
小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根捷app.json 设置的路径找到相对应的资源进行数据绑定。
js文件  页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件
在每个小程序的页面中不可缺少。
.wxml文件   页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
.wxss 文件  页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使用app.wxss中指定的样式规则。该文件在页面中不可缺少
.json文件 页面配置文件该文件在页面中不可缺少

12.:
小程序MINA框架将整个系统分为试图层和逻辑层。视图层由（View）由框架设计的标签语言WXML和用于描述WXML组成样式的WXSS组成，他们的关系就像HTML和CSS的关系。

视图层：

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

逻辑层：

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.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.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目录下新建ss.js,ss.json,ss.wxml,ss.wxss。配置文件

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

全局配置文件

小程序的全局配置保存在全局配置文件（app.json）中，使用全局配置文件来配置页面文件（pages）的路径、设置窗口（window）表现、设定网络请求 API的超时时间值（networkTimeout）以及配置多个切换页（tabBar）等。

逻辑层文件

项目逻辑文件 app.js中可以通过App(）函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp(）获取。
App(）函数用于注册一个小程序，参数为Objcet，用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如表所示。

项目逻辑文件配置项

逻辑层文件

小程序的逻辑文件分为项目逻辑文件和页面逻辑文件。

项目逻辑文件

项目逻辑文件 app.js中可以通过App(）函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp(）获取。
App(）函数用于注册一个小程序，参数为Objcet，用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如表所示。

  项目逻辑文件配置项

当启动小程序时，首先会依次触发生命周期函数onLanuch和onShow方法,然后通过app.json的pages属性注册相应的页面，最后根据默认路径加载首页，当用户单击左上角的关闭”按翻或单击设备的Home键离开微信时，小程序没有被直接销毁，而是进入g后台这两种情况都会触发onHidc方法：当用户再次进入微信或再次打开小程序时，小程后台进入前台、这时会触发onShow方法。只有当小程序进入后台一段时间（或者系纷我们在Demo2的app.js加入如图2-10所示的代码。
古用过高）时、小程序才会被销毁。
保存并编译后，Console面板的显示效果如图2-11所示。
小程序启动后首先触发onLaunch方法，然后触发onShow 方法，在onShow方法中通过this 参数获取自定义属性和自定义方法并显示。在其他逻辑文件中，开发者可以通过全局函数getApp(）方法获取小程序实例