1.3 编写HelloWorld程序

几乎学习任何一门编程技术，都是从HelloWorld程序开始的。HelloWorld程序虽小，但是“五脏俱全”，本节基于一个最简单的入门程序，展开介绍小程序开发的基础框架。

1.3.1 分析小程序示例工程

1.2.2节创建了一个小程序示例项目，其目录结构如图1-20所示。

可以看到，小程序项目的根目录下有两个文件夹，分别命名为pages和utils，根目录下还有4个全局文件，其中，3个是应用程序的配置文件，1个是工程配置文件。

在开发小程序时会遇到4种类型的文件：以.js为后缀的文件是核心的逻辑代码文件；以.json为后缀的文件通常用来存储配置信息；以.wxml为后缀的文件用来编写页面结构；以.wxss为后缀的文件是样式表文件，用来进行页面渲染样式的设置。

project.config.json配置文件用来对工程进行全局配置，如工程名称、目录路径、AppID等。project.config.json配置文件可进行配置的常用字段如表1-1所示。

setting选项可以配置的字段如表1-2所示。

compileType字段可选的字符串值如表1-3所示。

app.js文件是当前应用程序的入口文件，阅读此文件的代码可以发现，其中只调用了一个App（）函数。App（）函数的作用是注册小程序，并且会接收一个Object作为参数，其中会定义小程序的生命周期回调。需要注意的是，App（）函数必须在app.js文件中进行调用，并且只能调用一次。

App（）函数中传入的Object参数可以指定的回调函数如表1-4所示。

app.json文件用来对小程序进行全局配置，其决定页面文件的路径、窗口表现等，可配置项如表1-5所示。

窗口配置字段window对象的可配置属性如表1-6所示。

tabBar字段的可配置属性如表1-7所示。

关于标签栏的list属性，其中可以定义一组标签，标签数量需要大于1个且小于6个。每个标签可配置的属性如表1-8所示。

networkTimeout字段用来配置网络超时时间，其中可以配置的属性如表1-9所示。

①注意：

所有超时时间的配置单位都为ms。

app.wxss用来定义一些全局的样式表，样式表的定义与CSS语法基本一致，后面会详细介绍。

除上面比较重要的几个文件外，模板工程中还生成了一个命名为pages的文件夹，该文件夹中又包含index和logs两个文件夹。pages文件夹用来存放页面文件，其中每个文件夹都是一个页面，如index文件夹存放的是示例程序的主页面相关代码，在微信小程序中，每个页面都由JS、JSON、WXML和WXSS这4种类型的文件共同定义。关于页面的相关内容，后面章节会具体介绍。

1.3.2 修改示例程序

下面将模板生成的示例程序修改为HelloWorld程序，先修改index.wxml文件，具体如下：

WXML文件主要编写页面的骨架，上述代码在页面中定义了一个文本组件和一个按钮组件，并绑定了一个单击按钮的回调方法，修改index.js文件，具体如下：

如上述代码所示，date中定义了文本的颜色，默认为红色，当用户单击按钮时，会随机切换文本的颜色，小程序页面是由数据进行驱动的，当有数据改变时，开发者只需要调用setData方法重新设置数据即可实现页面的刷新。在index.wxss文件中添加样式表属性，具体如下：

上述样式表代码的意义是将文本与按钮之间隔开60rpx的距离。刷新小程序，即可在模拟器上看到HelloWorld程序的运行效果，单击按钮后，HelloWorld的文字颜色也会随机发生改变，如图1-21所示。

1.3.3 进行真机调试

通过1.3.2节代码的编写可以发现，当有代码更改时，只要代码文件被保存，模拟器也会实时地进行页面刷新。这是小程序开发中非常方便的一点，它可以让开发者所见即所得地进行程序开发，实时看到代码运行的效果，极大地提高了开发效率，节约了调试时间。如果在真机上进行小程序的预览也非常方便，单击微信开发者工具中的“预览”按钮，即可生成一个小程序二维码（见图1-22），使用手机微信扫描这个二维码即可打开小程序进行真机预览，需要注意的是，此二维码的有效时间很短。

预览小程序只能看到小程序的运行效果，并不能使用微信开发者工具中的调试器进行断点调试、页面布局查看、网络查看等功能。若要在真机上使用调试功能，需要使用开发者工具的真机调试功能，单击“真机调试”按钮后也会生成一个二维码，扫描这个二维码后，微信开发者工具会打开一个“真机调试”窗口，开发者在手机上的所有操作都会反馈到这个调试窗口中，如图1-23所示。