本部分主要参考微信小程序官方文档：小程序代码组织|微信公开文档，根据个人经验修改。

配置小程序代码

上一章通过开发人员工具快速创建了小程序项目。您可以看到，在此项目中生成了多种类型的文件：

.JSON后缀的JSON配置文件。wxml后缀的WXML模板文件。wxss后缀的WXSS样式文件。继js后缀的JS脚本逻辑文件之后，让我们看一下这四个文件的作用。

JSON配置

JSON是数据格式，不是编程语言，是JSON在小程序中扮演的静态配置的角色。

在项目根目录中，可以看到A和logs.json位于page/Logs目录下。让我依次说明它的用途。

小程序配置a

a是当前小程序的全局配置，包括小程序的所有页面路径、界面表示、网络超时、底部选项卡等。QuickStart项目的a配置如下：

{

第'页[

页面/索引/索引'

“页面/日志/日志”

]，

“窗口”: {

background text style ' ' light '

navigationbarbackgroundcolor ' ' # fff '

navigation bar title text ' ' weixin '

navigation bar text style ' ' black '

}}让我们快速回顾一下此配置项目的含义：

页面字段——用于描述当前小程序的所有页面路径，以便微信客户机知道当前小程序页面定义的目录。Window字段——定义小程序中所有页面顶部的背景色、文字颜色定义等。其他配置项详细信息可以参考文档小程序的配置a。配置工具

一般来说，使用一个工具时，可以根据各自的喜好进行个性化配置，包括界面颜色、编译配置等，需要更换其他计算机，重新安装工具时重新配置。

有鉴于此，小程序开发人员工具将从每个项目的根目录生成。工具创建的所有配置都将记录在此文件中。重新安装工具或更改计算机时，只要加载同一个项目的代码包，开发人员工具就可以自动恢复到开发项目时的个性化配置，其中包含编辑器颜色、上传代码时自动压缩等多个选项。实际情况可能不是这样。小程序中的每个页面可能有不同的色调，以区分不同的功能模块。因此，允许开发人员独立定义每一页的某些属性(如刚才所说的顶部颜色、是否允许下拉刷新等)。

其他配置项详细信息可以参考文档页面配置。

JSON语法

以下是在小程序中配置JSON的一些注意事项。

JSON文件全部用大括号{}包围，以键值的方式表示数据。JSON的密钥必须用双引号括起来。实际上，在编写JSON时，忘记用双引号括住键值或用单引号括住双引号是常见的错误。

JSON值可以是以下数据格式，其他格式(如JavaScript中的undefined)会触发错误报告：

请注意，JSON文件中不能使用数字、浮点和整数字符串、必须用双引号括起来的布尔值、true或false数组、方括号[]对象以及必须用大括号括起来的{}Null注释。尝试添加注释时，将报告错误。

WXML模板

从事web编程的人都知道web编程使用HTML CSS JS等组合。其中HTML描述当前页面的结构，CSS描述页面的外观，JS通常用于处理该页面和用户的交互。

同样，小程序也有同样的角色。其中，WXML的作用与HTML相同。打开Pages/index时，您将看到：

View class='container '

View class='userinfo '

Button wx:if='{！获取“HasUserInfo canIUse}}”头像别名/button

Bloc

k wx:else> <image src="{{u}}" background-size="cover"></image> <text class="userinfo-nickname">{{u}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view></view>

和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

• 标签名字有点不一样

往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。

从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。更多详细的组件讲述参考下个章节 小程序的能力

• 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。

WXML 是这么写 :

<text>{{msg}}</text>

JS 只需要管理状态即可:

({ msg: "Hello World" })

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

更详细的文档可以参考 WXML

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 a, 的概念相同，你可以写一个 a 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器

更详细的文档可以参考 WXSS 。

JS 逻辑交互

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view><button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({

clickMe: function() {

({ msg: "Hello World" })

}})

响应用户的操作就是这么简单，更详细的事件可以参考文档 WXML - 事件 。

此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API 。

通过这个章节，你了解了小程序涉及到的文件类型以及对应的角色，后续章节我们将以开发一个考试类小程序为例带将上述知识点逐个实战一遍，最终掌握小程序开发为工作、学习带来便利。