2.7 微信小程序开发

微信小程序是前端开发的一个重要阵地，它是一种连接用户与服务的全新方式。微信小程 序可以在微信内便捷地获取和传播，同时具有出色的使用体验。同时，微信小程序还提供了一 个简单、高效的应用开发框架，以及丰富的组件和 API。

微信小程序是一种不需要安装即可使用的应用。它实现了应用“触手可及”的梦想，用户 扫一扫或者搜一下即可打开应用，也体现了“用完即走”的理念。用户无须关心是否安装太多 应用的问题。应用将无处不在，随时可用，也无须卸载。

2.7.1 微信小程序框架结构分析

一个网页由 HTML、CSS、JavaScript 构成。其中，HTML 用来描述网页的页面结构，CSS 用来描述网页的页面样式，JavaScript 用来处理页面和用户的逻辑交互。

同样的道理，在小程序中，WXML（WeiXin Markup Language）充当的就是类似于 HTML 的角色，WXSS（WeiXin Style Sheet）充当的就是类似于 CSS 的角色，JavaScript 代码就 是用来处理用户操作的脚本文件。开发者可以在 JavaScript 中调用小程序提供的丰富的 API，利用这些 API 可以轻松调用微信提供的功能，如获取用户信息，完成本地存储、微 信支付等。

整个小程序框架系统分为两部分——逻辑层和视图层。小程序提供了自己的视图层描述语 言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层之间提供了数 据传输和事件系统，让开发者能专注于数据与逻辑。

接下来，新建一个微信小程序项目。微信开发者工具主界面如图 2-33 所示。

由图 2-33 可知，所创建的微信小程序项目名称为 20210116_demo。在该项目的主目录 pages 下有两个子目录和 5 个文件（本节最后将简单介绍 utils 文件夹、project.config.json 文件及 sitemap.json 文件）。其中，以 app 开头的 3 个文件就是微信小程序框架的主描述文件，这 3 个 文件不属于任何页面。

在 pages 目录下，有两个子目录 index 和 logs。在每个子目录中保存着一个页面的所有相 关文件。通常一个页面包含 4 种不同扩展名的文件，分别为页面逻辑文件 index.js、页面结构 文件 index.wxml、样式表文件 index.wxss 和配置文件 index.json。为了减少配置项，描述页面 的 4 个文件必须具有相同的路径与文件名。图 2-34 即为微信小程序的目录结构。

接下来，我们介绍主目录（项目描述文件）中的文件。

1．app.js

app.js 是微信小程序的主逻辑文件，在项目中不能缺少，每个小程序都需要在 app.js 中调 用 App 方法去注册小程序实例，该实例是全部页面共享的，如代码清单 2-29 所示。

代码清单 2-29

// app.jsApp({
onLaunch(options) {
  },
onShow(options) {
  },
onHide() {
  },
onError(msg) {
console.log(msg)
  },
globalData: 'I am global data'})

2．app.wxss

app.wxss 是微信小程序的主样式表文件，在项目中可有可无，类似于 HTML 中的 CSS， 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

3．app.json

app.json 是微信小程序的主配置文件，在项目中不能缺少。该文件用来对微信小程序进行 全局配置。其文件内容是一个 JSON 对象，用来决定页面文件的路径、窗口表现，设置网络超 时时间，设置多个页签等。

图 2-35 所示即为 20210116_demo 项目中的 app.json 文件。

表 2-9 所示即为 app.json 文件中涉及的配置项。

关于 list 属性再补充一点，该属性接收一个数组，最少配置两个 tab，最多配置 5 个 tab。 所配置的 tab 将按照数组的顺序排列，其中每一项都是一个对象。我们以本书后续案例中的 hahaAI 小程序为例介绍 tabBar 配置项（见图 2-36）的实际应用。

接下来，解释子目录（页面描述文件）中的文件。小程序通常由多个页面组成，每个页面 由以下 4 个文件组成。

• index.wxml 文件：页面的描述文件，类似于 HTML 文档，用来进行页面的布局和数 据的绑定等，是一个页面的必需文件。

• index.wxss 文件：页面样式表文件，用来定义本页面使用到的各类样式表，会覆盖app.wxss 中相同的选择器。

• index.js 文件：页面的逻辑文件，小程序中的每个页面都需要在页面对应的 index.js 文 件中通过 Page 构造器进行注册，来指定页面的初始数据、事件处理函数等，是一个 页面的必需文件。

• index.json 文件：页面配置文件，页面中的配置项会覆盖 app.json 的 window 属性中相 同的配置项，对于一个页面来说，可有可无。

接着，继续介绍子目录（其他资源文件，见图 2-37）中的文件。在小程序中，根据项目需 求，我们可能会用到诸如静态图片（图标）、通用 js 模块等文件，这些文件应该存放在单独创 建的子目录中，在调用时指定相对目录即可。

提示

hahaAI 小程序使用 colorui 来美化页面，用 tabbar 文件夹中包含的图标来显示页面底部的 tab。

最后，介绍 utils 文件夹、project.config.json 文件和 sitemap.json 文件。默认情况下，utils 文件夹仅包含一个 util.js 文件，该文件是一个公用的 JavaScript 库，用来完成日期格式的转换。project.config.json 文件是项目配置文件，在工具上进行的任何配置都会被写入这个文件，当重 新安装微信开发者工具或重换系统时，只要导入相同的代码包，微信开发者工具就会自动恢复到开发项目时的个性化配置，包括编辑器的颜色、代码上传时自动压缩等。sitemap.json 文件 用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，当开发者允许被 微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引，当用户的搜索词条触发 该索引时，小程序的页面就可能显示在搜索结果中。