小程序代码组成

在上一章中，我们通过开发者工具快速创建了一个项目。 您可以注意到该项目中生成了不同类型的文件：

.json 后缀为 JSON 配置文件 .wxml 后缀为 WXML 模板文件 .wxss 后缀为 WXSS 样式文件 .js 后缀为 JS 脚本逻辑文件

接下来我们分别看看这四个文件的作用。

JSON配置

JSON 是一种数据格式，而不是一种编程语言。 在小程序中，JSON起到静态配置的作用。

我们可以看到项目根目录下有一个app.json和..json，在pages/logs目录下也有一个logs.json。 我们依次解释一下它们的用途。

小程序配置app.json

app.json是当前小程序的全局配置，包括小程序的所有页面路径、界面性能、网络超时、底部标签等。 项目中app.json配置内容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

我们简单说一下这个配置中每一项的含义：

pages字段——用于描述当前小程序所有页面的路径。 这是为了让微信客户端知道你的小程序页面当前定义在哪个目录下。 字段 - 定义小程序所有页面的顶部背景颜色、文字颜色定义等。

其他配置项详情请参考文档小程序的配置app.json。

工具配置..json

通常大家在使用一个工具的时候，都会根据自己的喜好进行一些个性化的配置，比如界面颜色、编译配置等，当你换到另一台电脑，重新安装该工具时，就得重新配置。

考虑到这一点，小程序开发者工具会在每个项目的根目录下生成一个..json。 您对该工具所做的任何配置都将写入此文件。 当您重新安装工具或者换电脑工作时，只要加载同一个项目的代码包，开发者工具就会自动帮您恢复开发项目时的个性化配置，包括编辑器的颜色、自动上传代码时的压缩，以及一系列选项。

其他配置项的详细信息请参考文档开发者工具配置。

页面配置page.json

这里的page.json实际上是用来表示小程序页面相关的配置，比如pages/logs目录下的logs.json。

如果你的整个小程序的风格是蓝色，那么你可以在app.json中声明顶部颜色为蓝色。 实际情况可能并非如此。 也许你的小程序中的每个页面都有不同的色调来区分不同的功能模块。 因此，我们提供了page.json，以便开发者可以独立定义每个页面的一些属性，比如刚才讲的顶部颜色、是否允许下拉刷新等。

其他配置项的详细信息请参考文档。

JSON语法

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

JSON 文件包含在大括号 {} 中，数据以键值形式表示。 JSON 的 Key 必须用双引号括起来。 实践中，在编写JSON时，忘记在Key值上加双引号或者写双引号而不是单引号是一个常见的错误。

JSON的值只能是以下数据格式。 任何其他格式都会触发错误，例如 in.

数字，包括浮点数和整型字符串，需要用双引号括起来 Bool 值，true 或 false 数组，需要用方括号括起来 [] 对象，需要用大括号括起来 {} Null

还需要注意的是，JSON 文件中不能使用注释，尝试添加注释会导致错误。

WXML 模板

从事过Web编程的人都知道，Web编程使用的是HTML+CSS+JS的组合。 HTML用于描述当前页面的结构，CSS用于描述页面的外观，JS通常用于对页面进行处理。 与用户的互动。

同样的，在小程序中也有同样的作用，其中WXML扮演着与HTML类似的角色。 打开pages/index/index.wxml，您将看到以下内容：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover">image>
      <text class="userinfo-nickname">{{userInfo.nickName}}text>
    block>
  view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}text>
  view>
view>

与 HTML 非常相似，WXML 由标签、属性等组成。 但也有很多区别，我们一一解释一下：

标签名称略有不同

在编写HTML时，经常使用的标签是div、p和span。 开发者在编写页面的时候，可以根据这些基本的标签来组合不同的组件，比如日历、弹窗等。换句话来说，既然大家都需要这些组件，为什么我们不能把这些常用的组件封装到一起呢？大大提高了我们的开发效率。

从上面的例子可以看到，小程序的WXML中使用的标签有view、text等，这些标签是小程序为开发者封装的基础能力。 我们还提供地图、视频、音频等组件能力。 。

更详细的组件说明请参考下一章小程序的能力。