微信小程序开发基础（2）

3.创建微信小程序

1.创建第一个页面文件 

继续在项目主目录下新建一个pages目录，在pages目录下新建一个 index 目录，并在index 目录下新建 index.js、index.json、index.wxml和index.wxss空文件。

此时，系统仍然提示错误信息。假设，我们的目的是页面能显示“欢迎学习小程序，实现大梦想”。首先，打开index.wxml文件，输入“欢迎学习小程序，实现大梦想”。然后,告诉系统这个文件的名称及所处路径。因此，打开项目配置文件app.json，输人如下代码：

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

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

//index.json
{
}

在index.json文件中，只需加入一对空“什”即可。
打开index.js文件，输入如下代码：

//index.js
page（{
}）

只需引入Page(）方法，保证index.js文件不为空即可。

将这4个文件保存后进行编译，在模拟器中即可得到所需的结果。各文件的代码内容如
表2-1所示

文件名	代码内容
app.js	空
app.json	{”pages":[“pages/index/index”]}
app.wxss	空
index.js	pages({}）
index.json	{}
index.wxml	欢迎学习小程序
index.wxss	空

2.创建另一个页面文件

在2.3.1小节中，我们采用逐步创建目录及4个文件的方式成功创建了一个页面文件。
在本节中，我们采用另一种方式来创建另一个页面文件news。
打开app.json文件，输入以下代码：

//app.json
{
"pages":[
"pages/news/news",

4.配置文件

4.1.全局配置文件

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

4.1.1.pages配置项 

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

4.1.2.window配置项

4.1.3.tabBar配置项

 其中，list（列表）接受数组值，数组中的每一项也都是一个对象。对象的数据值说明
如表所示。

4.1.4.networkTimeout配置项

4.1.5. debug配置项

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

5.逻辑层文件项目

5.1项目逻辑文件

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

2.页面逻辑文件 

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JaaSerp引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象（document、window）及通过操作DOM改变页面，只能采用数据绑定和事件响应来实现。
在逻辑层，Page(）方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表所示。

5.2.1设置初始数据

设置初始数据是对页面的第一次数据绑定。对象data 将会以 JSON(Javascript Object No ation，JS对象简谱）的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式字符串、数字、布尔值、对象、数组）。
视图层可以通过WXML对数据进行绑定。

5.2.2.定义当前页面的生命周期函数

在Page(）函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主
有onload、onShow、onReady、onHide、onUnload。
onLoad页面加载函数。当页面加载完成后调用该函数。
-个页面只会调用一次。
函数的参数可以获取 wx.navigateTo和wx.redirectTo及<navigator/>中的query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。
一个页面只
经调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时，周用该函数。
onUnload页面卸载函数。当页面卸载、进行navigateBack 或redirectTo操作时，调用该函数。

5.2.3.定义事件处理函数

开发者在Page(）中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定，当达到触发事件时，小程序就会执行 Page(）中定义的事件处理函数。

5.2.4使用setData更新数据

小程序在Page 对象中封装了一个名为setData(）的函数，用来更新data中的数据。函数参数为Objecl，以“key：value”对的形式表示将 this. data 中的key 对应的值修改为value。

6.页面文件结构

6.1.数据绑定

小程序在进行页面数据绑定时，框架会将 WXML文件与逻辑文件中的data 进行动态绑定，在页面中显示data 中的数据。小程序的数据绑定使用Mustache 语法（11【）将变量或运算规则包起来。

6.1.1简单绑定

简单绑定是指使用双大括号（门11）将变量包起来，在页面中直接作为字符串输出使用。
简单绑定可以作用于内容、组件属性、控制属性等的输出。

6.1.2运算

在（{})内可以做一些简单的运算（主要有算术运算、逻辑运算、三元运算、字符串
运算等），这些运算均应符合JavaScript运算规则。

6.2条件数据绑定

1.wx:if条件数据绑定

if条件数据绑定是指使用wx：if这个属性来判断是否数据绑定当前组件

2.block wx:if条件数据绑定

当需要通过一个表达式去控制多个组件时，可通过<block>将多个组件包起来，然后在block中添加wx：if属性即可

6.3.列表数据绑定

1.wx:if

在组件上，可使用wx:if控制属性绑定一个数组 ，将数据中的各个数据循环进行数据绑定到该数据

2.block wx:for

与block wx:if类似，在wxml中也可以使用block包装多个组件进行列表数据绑定。

6.4模板

在小程序中，如果要经常使用几个组件的组合(如”登录“选项），通常把这几个组件结合定义为一个模板，以后在需要的文件直接使用这个模板。

1定义模板

模板代码由wxml组成，因此其定义也是wxml文件中，定义模板的格式：

<template name>="模板名”>

相关组件代码为：

</tempate>

2.调用模板 

将模板定义后，就可以对其进行调用了格式为

<template is="模板名称“data=="{{传入的数据}}”/>

 

 6.5引用页面文件

1.import方式

如果在要引用的文件定义模板代码，则需要用import方式引用。

2.incude方式

include方式可以将源文件中除3模板之外的其他代码全部引用，相当于将原文件中的代码复制到include所在位置。

6.6页面事件

简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制，需要定义事件函数和调用事件。
定义事件函数 在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册（同组件属性)，以“key = value”形式出现，key（属性名）以bind或catch开头，再加上事件类型，如bindap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value（属性值）是在js中定义的处理该事件的函数名称，如click。

2.7页面样式 

 

2.8本章小结 

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