第二章总结

2.1小程序的基本目录结构

2.1.1主体文件
微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负
程序的整体配置，它们的名称是固定的。
app.js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.j文和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。
app. json小程序公共设置文，配置小程序全局设置。该文件在项目中不可缺少 app.wxss小程序主样式表文件，类似HTML的.css文件。在主样式表文件中的样式在其他页面文件中同样有效。该文件在项目中不是必需的。
2.1.2 页面文件
小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会相 app.json 设置的路径找到相对应的资源进行数据绑定。
.js文件页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该在每个小程序的页面中不可缺少。
.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页中的.html 文件。该文件在页面中不可缺少。
.wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接 app.wxss中指定的样式规则。该文件在页面中不可缺少。
.json 文件页面配置文件。该文件在页面中不可缺少。
2.2 小程序的开发框架
微信团队为小程序的开发提供了MINA 框架。MINA框架通过微信客户端提供文件系网络通信、任务管理、数据安全等基础功能，对上层提供了一整套JavaScriptAPI,让刑
小程序MINA框架示意如图2-3所示。    能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。

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

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

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

2.3 创建小程序页面
启动微信开发工具，创建新的项目demo2，此处不勾选“创建QuickStart项目”复选项，如
图2-5所示。单击“确定”按钮后，可以看到开发工具编辑、奇试小程序小程序项目
中的“目录结构”界面只显示项目配置文件
项目目录    Fwendridemo2    
( project. config.json)，同时系统提示错误信息，    AppID    无AppID 部分功能受限    
如图2-6所示。    点此返回填写 AppID    
将在2.1.1小节中提到的3个主体文件    项目名称    demo2    
( app. js、app.json 和app.wxss)在项目的主目录    创建 QuickStart 项目    
下建立，小程序依然提示错误信息。
2.3.1 创建第一个页面文件
网络    调月    继续在项目主目录下新建一个pages目录，    图2-5 创建 demo2 项目

2.3.2 创建另一个页面文件    
在2.3.1小节中，我们采用逐步创建目录及4个文件的方式成功创建了一个页面文件。在本节中，我们采用另一种方式来创建另一个页面文件news。
打开app.json 文件，输入以下代码://app.json
"pages":[
个数组    "pages /news /news",    
2.4 配置文件
小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。

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

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

处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎
DOM改变页面，只能采用数据绑定和事件响应来实现。    中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作    
在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表
2-8所示。
表2-8 页面逻辑文件配置项
参数    类型    描述    
data    Object    页面的初始数据    
onLoad    Function    页面的生命周期函数，用于监听页面加载    
onReady    Function    页面的生命周期函数，用于监听页面初次数据绑定完成    
onShow    Function    页面的生命周期函数，用于监听页面显示    
onHide    Function    页面的生命周期函数，用于监听页面隐藏    
onUnload    Function    页面的生命周期函数，用于监听页面卸载    
onPullDownRefreash    Function    监听用户的下拉动作    
onReachBottom    Function    页面上拉触底事件的处理函数    
其他    Any    自定义函数或数据，用this可以访问    
1.设置初始数据
设置初始数据是对页面的第一次数据绑定。对象data 将会以JSON(Javascript Object No- tation，JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。
视图层可以通过WXML对数据进行绑定。
work    Security    数据初始、数据绑定及运行效果如图2-12所示。    
Filter    2.定义当前页面的生命周期函数    
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次该函数的参数可以获取wx.navigateTo和 wx.redirectTo及<navigator/>中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
示效果
onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时调用该函数。
onUnload 页面卸载函数。当页面卸载、进行navigateBack 或redirectTo操作时，
期函数;定义事件    用该函数。

2.6 页面结构文件
页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、用页面文件、页面事件等能力。

2.6.1 数据绑定
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法(1111)将变量或

2.8本章小结
本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识，大家必须深
rough    刻理解和熟练掌握，并勤写代码多加练习，为后续的学习打下扎实的基础。