小程序开发全解析：从结构到API

目录

一、小程序项目结构

（一）项目文件组成

（二）页面文件组成

二、核心配置文件解析（app.json）

三、WXSS 与 CSS 的区别

四、小程序中 .js 文件的分类

五、小程序的宿主环境

六、小程序启动流程

七、小程序组件使用

（一）基础内容组件

（二）功能组件

八、小程序 API 分类

---

一、小程序项目结构

（一）项目文件组成

• pages：存放所有小程序的页面，每个页面以单独文件夹组织。
• utils：存放工具性模块，例如格式化时间的自定义函数。
• app.js：小程序项目的入口文件，通过调用App()函数启动整个小程序。
• app.json：小程序项目的全局配置文件，管理页面路径、窗口外观、底部 tab 等。
• app.wxss：小程序项目的全局样式文件，作用于所有页面。
• project.config.json：项目的配置文件，记录项目的个性化设置。
• sitemap.json：配置小程序及其页面是否允许被微信索引。

（二）页面文件组成

每个页面由 4 个基本文件构成：

• .js 文件：页面的脚本文件，存放页面数据、事件处理函数等。
• .json 文件：当前页面的配置文件，配置窗口外观、表现等。
• .wxml 文件：页面的模板结构文件，类似 HTML 用于搭建页面结构。
• .wxss 文件：当前页面的样式表文件，用于页面样式渲染。

二、核心配置文件解析（app.json）

app.json 是小程序的全局配置文件，主要包含以下配置项：

• pages：记录当前小程序所有页面的路径，例如示例中的"pages/index/index"和"pages/logs/logs"。
• window：全局定义小程序所有页面的背景色、文字颜色等，如导航栏背景色、标题文字等。
• style：全局定义小程序组件所使用的样式版本，如示例中的"v2"。
• sitemapLocation：指定 sitemap.json 文件的路径，用于配置页面索引规则。

三、WXSS 与 CSS 的区别

WXSS 是小程序的样式语言，在 CSS 基础上做了扩展，主要区别有：

• 新增 rpx 尺寸单位：CSS 需手动进行像素单位换算（如 rem），而 WXSS 的 rpx 会在不同屏幕上自动换算，适配性更强。
• 全局与局部样式分离：项目根目录的app.wxss作用于所有页面；局部页面的.wxss仅对当前页面生效。
• 支持部分 CSS 选择器：仅支持 .class、#id、element、并集选择器、后代选择器以及 ::after、::before 等伪类选择器。

四、小程序中 .js 文件的分类

小程序的 JS 文件分为三大类，各自职责明确：

• app.js：整个小程序项目的入口文件，通过调用App()函数创建小程序实例，初始化全局数据和生命周期函数。
• 页面的 .js 文件：页面的入口文件，通过调用Page()函数创建并运行页面，管理页面的 data、方法和生命周期。
• 普通的 .js 文件：功能模块文件，封装公共函数或属性供页面调用，例如 utils 目录下的工具函数。

五、小程序的宿主环境

手机微信是小程序的宿主环境，具体表现为：

• 在 Android 系统中，微信 for 安卓是小程序的运行载体，与微博 for 安卓等其他安卓软件共用 Android 系统环境。
• 在 iOS 系统中，微信 for iOS 是小程序的运行载体，与微博 for iOS 等其他 iOS 软件共用 iOS 系统环境。

六、小程序启动流程

小程序启动遵循以下步骤：

1. 把小程序的代码包下载到本地。
2. 解析 app.json 全局配置文件，确定页面路径、窗口样式等。
3. 执行 app.js 入口文件，调用 App() 创建小程序实例。
4. 渲染小程序首页。
5. 小程序启动完成。

七、小程序组件使用

（一）基础内容组件

• text 组件：支持长按选中效果，通过selectable属性开启，如 <text selectable>13800005056</text>。
• rich-text 组件：可渲染富文本内容，通过nodes属性传入 HTML 结构，如 <rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>。

（二）功能组件

• button 组件：功能丰富的按钮组件，可通过属性定制样式和功能：
  • type：指定按钮类型，可选primary（主色调）、warn（警告色）等。
  • size：设置按钮尺寸，mini 表示小尺寸按钮。
  • plain：设置按钮为镂空样式。
  • open-type：调用微信提供的功能，如客服、转发、用户授权等。
• image 组件：图片组件，默认宽度约 300px、高度约 240px，支持多种图片模式和懒加载等特性。
  • mode 属性（图片裁剪和缩放模式）：

    mode 值	说明
    scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来，可完整显示图片
    aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来，另一方向会被截取
    widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
    heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

八、小程序 API 分类

小程序官方将 API 分为 3 大类，各具特点：

• 事件监听 API：
  • 特点：以 on 开头，用于监听某些事件的触发。
  • 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件。
• 同步 API：
  • 特点 1：以 Sync 结尾的 API 均为同步 API。
  • 特点 2：执行结果可通过函数返回值直接获取，执行出错会抛出异常。
  • 举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容。
• 异步 API：
  • 特点：类似 jQuery 中的 $.ajax(options) 函数，需通过 success、fail、complete 接收调用结果。
  • 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据。