第二章总结

总结

pages文件夹（所有的页面）

utils文件夹（所有的工具包）

主题文件

app开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。

app.js 小程序逻辑文件，主要用来注册小程序全局实例。

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

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

页面文件

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

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

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

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

小程序的开发框架

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

创建小程序页面

启动微信开发工具，创建新的项目。此处不勾选“创建QuickStart项目”复选项，单击“确定”按钮后，可以看到开发工具中的“目录结构”界面只显示项目配置文件(project.confgjson)，同时系统提示错误。将3个主体文件(app.js、app.json和app.wxss)在项目的主目录下建立，小程序依然提示错误信息。

继续在项目主目录下新建一个pags目录，在pages目录下新建一个 index 目录，并在index 目录下新建index.js、index. json、index. wxml和 index. wxss 空文件。输入以下代码：

/app. json
{
"pages " :[
"pages /index /index"
]
}

这段代码将 index页面注册到小程序中，这个对象的第一属性 pages 接受了一个数组,该数组的每一项是一个字符串，该字符串由“路径”+“文件名”组成，不包含扩展名。pages属性用来指定这个项目由哪些页面组成，多个页面之间用”,”分隔。

接下来，打开index.json 文件，输人如下代码:

{
}

打开 index.js 文件，输人如下代码:

Page({
})

将这4个文件保存后进行编译，在模拟器中即可得到所需的结果。

配置文件

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

全局配置文件

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

全局配置文件内容的整体结构如下:

{
/设置页面路径
"pages" :[ ],
/设置默认页面的窗口表现
"window" :{},
//设置底部 tab 的表现
"tabBar":{},
/设置网络请求API的超时时间值
"networkTimeout":{},
//设置是否开启 debug 模式
"debug" :false
}

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

2.window 配置项
window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。

3.tabBar 配置项
当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现。

其中，list(列表)接受数组值，数组中的每一项也都是一个对象。

4. networkTimeout 配置项
小程序中各种网络请求 API的超时时间值只能通过networkTimeout配置项进行统一设置不能在 AP中单独设置。networkTimeout可以配置的属性如表

5.debug 配置项

debug配置项用于开启开发者工具的调试模式，默认为se。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以imno 的形式输出到Console(控制台)面板上。

页面配置文件

页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置 window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件(appjson)中的配置值。
页面中的 window 配置只需书写配置项，不必书写window，代码示例如下：

{
"navigationBarBackgroundColor":"#ffffff ",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"页面window 配置演示",
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light"
}

逻辑层文件

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

项目逻辑文件

项目逻辑文件app.js中可以通过APp()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

App()函数用于注册一个小程序，参数为0bject，用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如表所示。

当启动小程序时，首先会依次触发生命周期雨数onLauch和onShow方法，然后通过中pjson的 pages属性注册相应的页面，最后根据默认路径加载首页;当用户单击左上角的“关闭”按钮或单击设备的Home 键离开微信时，小程序没有被直接销毁，而是进人后台这两种情况都会触发onHide方法;当用户再次进入微信或再次打开小程序时，小程序会后台进入前台，这时会触发onShow方法。只有当小程序进人后台一段时间(或者系统资占用过高)时，小程序才会被销毁。

小程序启动后首先触发onLaunch方法，然后触发onShow方法，在onShow方法中通过山is 参数获取自定义属性和自定义方法并显示。在其他逻辑文件中，开发者可以通过全局函数geLApp()方法获取小程序实例。

页面逻辑文件

页面逻辑文件的主要功能有;设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document\window)及通过操作DOM 改变页面，只能采用数据绑定和事件响应来实现。

在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表

在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onload 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次，该函数的参数可以获取 wx.navigaleTo和 wx.redireetTo及<navigator/ >中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。

onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigaeTo 或小程序底部进行tab 切换时调用该函数。
onUnload页面卸载丽数。当页面卸载、进行navigateBack或redirectTo 操作时，调用该函数。

在小程序中，事件分为冒泡事件和非冒泡事件两大类型。
■冒泡事件冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，级元素再向其父级元素传递，一直到页面的顶级元素。

■非冒泡事件非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个，如表

页面样式文件

WXSS常用属性