小程序代码的构成

1. 项目组成

1.1 了解项目的基本组成结构

小程序项目的基础文件和目录结构如下，了解这些是开发小程序的第一步：

 pages // 用来存放所有小程序的页面
 utils // 用来存放工具性质的模块（例如：格式化时间的自定义模块）
 app.js // 小程序项目的入口文件，包含小程序的生命周期函数
 app.json // 小程序项目的全局配置文件，配置页面路径、窗口属性等
 app.wxss // 小程序项目的全局样式文件，设置全局样式
 project.config.json // 项目的配置文件，记录开发工具的相关配置
 sitemap.json // 用来配置小程序页面是否允许被微信索引，用于 SEO 优化

具体文件及其作用：

• pages/：每个小程序页面都对应一个子目录，包含页面的 .wxml、.wxss、.js、.json 文件。每个页面都是一个独立的模块。
• utils/：存放工具类的文件，通常用于编写一些可以复用的函数或模块。
• app.js：小程序的主入口文件，管理小程序的启动、生命周期函数和全局的应用逻辑。
• app.json：全局的配置文件，用于定义小程序的页面路径、窗口表现、导航栏、底部菜单等。
• app.wxss：全局样式文件，定义项目中所有页面的通用样式。
• project.config.json：记录开发工具的个性化配置，如编译设置、项目名称等。
• sitemap.json：SEO 配置文件，允许微信索引小程序页面内容，提升在搜索中的展示机会。

下图展示了项目的目录结构：

1.2 小程序页面的组成部分

小程序页面是由四个文件组成的一个模块，通常每个页面都放置在 pages 目录中，每个页面的文件夹都包含以下文件：

• page.wxml：页面的结构文件，类似于网页开发中的 HTML，描述页面的布局。
• page.wxss：页面的样式文件，类似于 CSS，定义页面的视觉样式。
• page.js：页面的逻辑文件，处理页面的用户交互和数据操作。
• page.json：页面的配置文件，定义当前页面的导航栏标题、窗口背景颜色等。

官方建议将页面文件放在 pages 目录下，并以文件夹的形式存在：

2. JSON 配置文件

2.1 JSON 配置文件的作用

在小程序项目中，JSON 文件起着非常重要的作用。通过不同级别的 JSON 配置文件，开发者可以对整个小程序项目或某个具体页面进行全局或局部的配置。常见的 JSON 配置文件如下：

// app.json：全局配置文件，配置小程序的页面、窗口、底部导航栏等
// project.config.json：项目配置文件，记录开发者工具的设置
// sitemap.json：配置页面的搜索索引功能，影响微信索引
// 页面.json：每个页面都有自己独立的配置文件，覆盖全局配置

2.2 app.json 文件

app.json 文件是整个小程序的全局配置文件，控制小程序的页面路径、窗口外观、导航栏、底部 Tab 栏等。一个典型的 app.json 文件如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

• pages：定义了小程序的页面路径，按数组的顺序排列，第一个页面是小程序的首页。
• window：配置全局窗口的外观，例如导航栏的颜色、背景色、文字样式等。
• tabBar：定义底部 Tab 栏的显示，包括图标和页面路径。

2.3 project.config.json 文件

project.config.json 文件用于记录开发者工具的个性化配置，主要用于保存项目的编译设置、项目名称、AppID 等信息。

{
  "description": "项目配置文件",
  "appid": "wx1234567890abcdef",
  "projectname": "demo",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "minified": true,
    "postcss": true
  }
}

• appid：小程序的唯一标识。
• projectname：项目的名称。
• setting：开发工具相关的配置，例如是否开启 ES6 支持、是否压缩代码等。

2.4 sitemap.json 文件

微信开放了小程序内搜索功能，这与网页 SEO 十分相似，允许用户通过关键词搜索找到小程序的特定页面。sitemap.json 文件用于配置是否允许微信对小程序页面进行内容索引，从而提升小程序在微信搜索结果中的展示几率。

当允许索引时，微信的爬虫会对小程序页面进行抓取，为页面建立索引。当用户的搜索关键词与这些索引匹配时，小程序页面有可能出现在搜索结果中，从而提高小程序的曝光率。

sitemap.json 文件的基本格式如下：

{
  "rules": [
    {
      "page": "pages/index/index",
      "index": true
    },
    {
      "page": "pages/about/about",
      "index": false
    },
    {
      "page": "*",
      "index": false
    }
  ]
}

在这个例子中：

• page：指定要配置的页面路径，可以是具体的页面路径，也可以用 * 来代表所有页面。
• index：表示该页面是否允许微信索引。true 表示允许，false 表示不允许。

配置解释：

• 第一个规则表示首页（pages/index/index）允许微信索引，用户在搜索相关内容时可能会看到首页。
• 第二个规则表示关于页面（pages/about/about）不允许索引，因此该页面不会出现在搜索结果中。
• 第三个规则使用 *，表示默认情况下，所有未单独配置的页面都不允许微信索引。

SEO 设置和注意事项

默认情况下，微信会开启小程序页面的索引提示功能，意味着如果没有配置 sitemap.json，所有页面都可以被索引。如果开发者希望禁用索引提示，可以通过修改 project.config.json 文件来关闭此功能。在该文件中的 setting 配置部分加入以下字段：

{
  "setting": {
    "checkSiteMap": false
  }
}

• checkSiteMap: false：此设置将关闭小程序的索引提示功能，确保小程序不会出现在微信的搜索结果中。

此外，正确配置 sitemap.json 文件不仅有助于提升小程序的曝光率，还能确保敏感或不必要展示的页面不会被索引。例如，用户数据或后台管理页面通常应设置为不允许索引。

通过精确的 sitemap.json 配置，开发者可以有效控制哪些页面参与微信搜索索引，从而优化小程序的 SEO 效果。

2.5 页面的 .json 配置文件

每个页面的 .json 文件可以对该页面的窗口外观进行个性化设置，常见的配置项包括导航栏的标题、背景颜色等，这些配置会覆盖全局 app.json 中的相应设置。

{
  "navigationBarTitleText": "页面标题",
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTextStyle": "white"
}

• navigationBarTitleText：设置页面的导航栏标题。
• navigationBarBackgroundColor：设置导航栏的背景色。
• navigationBarTextStyle：设置导航栏文字的颜色，可以是 black 或 white。

2.6 新建小程序页面

在 app.json 的 pages 数组中新增页面路径，开发者工具会自动创建该路径对应的页面文件夹和基础文件。

2.7 修改项目首页

小程序的首页由 app.json 中 pages 数组的第一个页面决定。只需调整数组中页面的顺序即可更改首页。

3. WXML 模板

3.1 什么是 WXML

WXML（WeiXin Markup Language）是一种标记语言，用来描述小程序的页面结构，类似于 HTML。通过 WXML，开发者可以定义页面的结构、元素以及数据绑定。

3.2 WXML 和 HTML 的区别

WXML 与 HTML 在功能和使用场景上相似，但它们针对小程序的特性进行了优化和调整。WXML 的标签、指令与小程序的组件和框架深度集成。

4. WXSS 样式

4.1 什么是 WXSS

WXSS (WeiXin Style Sheets) 是一种样式语言，用于描述 WXML 中组件的样式。它类似于 CSS，支持

大多数 CSS 的语法和属性，还增加了一些针对小程序的特性。

4.2 WXSS 和 CSS 的区别

WXSS 支持像素单位 rpx，可以根据屏幕宽度自动适配不同设备。此外，WXSS 也支持 CSS 的绝大部分特性，并允许使用全局和局部样式。

5. JS 逻辑交互

5.1 小程序中的 .js 文件

小程序的 JS 文件负责处理用户的交互逻辑、数据操作和页面渲染。通过 JS 文件，开发者可以响应用户的点击、滑动、输入等事件，并执行相应的操作。

5.2 小程序中 .js 文件的分类

小程序中的 JavaScript 文件通常分为以下几类：

• app.js：处理全局的逻辑和事件，如应用启动时需要执行的操作。
• page.js：管理每个页面的逻辑，包括数据绑定、事件处理等。
• utils.js：存放工具函数和公共模块，便于在多个页面中复用。

通过这些模块和文件，开发者能够实现小程序的完整功能，确保用户交互的顺畅体验。