小程序代码的构成一、前言小程序作为当前主流的轻量级应用形态，广泛应用于电商、社交、教育等多个领域。无论是微信小程序

一、前言

小程序作为当前主流的轻量级应用形态，广泛应用于电商、社交、教育等多个领域。无论是微信小程序、支付宝小程序还是抖音小程序，其项目结构和代码构成都具有高度相似性。

本文将以 微信小程序 为例，带你全面了解小程序项目的核心代码组成，包括：

✅ 小程序的整体目录结构
✅ 全局配置文件 app.json
✅ 全局逻辑文件 app.js
✅ 全局样式文件 app.wxss
✅ 单个页面的四个基础文件（.js, .json, .wxml, .wxss）
✅ 模块化开发与组件复用

并通过完整的代码示例帮助你快速掌握小程序项目的构建方式和编码规范。

二、小程序项目基本结构

一个标准的小程序项目包含如下核心文件：

├── app.js           // 全局逻辑（生命周期函数）
├── app.json         // 全局配置（页面路径、窗口样式等）
├── app.wxss         // 全局样式
└── pages/           // 页面目录
    └── index/       // 首页
        ├── index.js     // 页面逻辑
        ├── index.json   // 页面配置（可选）
        ├── index.wxml   // 页面结构
        └── index.wxss   // 页面样式

⚠️ 所有页面必须放在 pages 文件夹中，并在 app.json 中注册，否则无法访问。

三、全局文件详解

✅ 1. `app.json` —— 全局配置文件

用于配置小程序的基础信息、窗口样式、导航栏设置以及页面路径。

{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationStyle": "custom"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

常用配置项说明：

配置项	说明
`pages`	页面路径列表，第一个为启动页
`window`	窗口表现配置（标题、背景色、是否启用自定义导航栏等）
`style`	使用的 UI 样式版本
`sitemapLocation`	SEO 相关配置

✅ 2. `app.js` —— 全局逻辑文件

小程序入口文件，用于定义全局变量、生命周期函数等。

App({
  globalData: {},

  onLaunch() {
    console.log('小程序启动');
    // 初始化全局数据或调用登录接口
  }
});

💡 通过 getApp() 可以在页面中获取到该全局对象。

✅ 3. `app.wxss` —— 全局样式文件

用于定义整个小程序的公共 CSS 样式，所有页面都可以使用。

/* app.wxss */
.container {
  padding: 20rpx;
}

.text-center {
  text-align: center;
}

⚠️ WXSS 是微信扩展的 CSS 语法，支持 rpx 单位（响应式像素单位），适配不同屏幕尺寸。

四、页面文件详解

每个页面由四个文件组成，分别负责逻辑、配置、结构和样式。

✅ 1. `index.js` —— 页面逻辑

页面的核心文件，用于处理数据绑定、事件交互、网络请求等。

Page({
  data: {
    message: '欢迎来到小程序',
    list: [1, 2, 3]
  },

  onClick() {
    this.setData({
      message: '按钮被点击了'
    });
  }
});

💡 this.setData() 是更新视图数据的核心方法。

✅ 2. `index.json` —— 页面配置文件（可选）

用于覆盖 app.json 中的全局配置，仅对当前页面生效。

{
  "navigationBarTitleText": "首页",
  "usingComponents": {}
}

✅ 3. `index.wxml` —— 页面结构文件

类似 HTML，但使用的是微信自定义标签系统，如 <view>、<text>、<image> 等。

<!-- index/index.wxml -->
<view class="container">
  <text>{{message}}</text>
  <button bindtap="onClick">点击我</button>

  <view wx:for="{{list}}" wx:key="index">
    {{item}}
  </view>
</view>

⚠️ 不支持 DOM 操作，数据驱动视图更新。

✅ 4. `index.wxss` —— 页面样式文件

用于定义当前页面的私有样式。

/* index/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

五、WXML 与 HTML 的区别

对比点	WXML	HTML
标签	自定义组件，如 `<view>`、`<text>`	标准标签如 `<div>`、`<span>`
数据绑定	`{{}}` 插值语法	必须通过 JS 操作 DOM
列表渲染	`wx:for` 指令	依赖 JavaScript 动态生成
事件绑定	`bindtap` 等	使用 `addEventListener`
不支持 DOM 操作	✅ 是	❌ 否

六、WXSS 与 CSS 的区别

对比点	WXSS	CSS
支持 rpx 单位	✅ 是	❌ 否
引入方式	`@import url("common.wxss")`	`@import url("common.css")`
不支持伪类选择器	❌ 如 `::after`、`::before`	✅ 是
无浏览器兼容问题	✅ 是	❌ 否

七、模块化开发与组件复用

✅ 1. 组件化开发（自定义组件）

在 components/ 文件夹中创建组件，例如 my-header/my-header

// my-header/my-header.json
{
  "component": true
}

然后在页面 JSON 中引用：

{
  "usingComponents": {
    "my-header": "/components/my-header/my-header"
  }
}

在 WXML 中使用：

<my-header title="首页" />

✅ 2. 工具模块（utils.js）

将通用函数封装到 utils.js 中，便于复用。

// utils.js
function formatTime(date) {
  return date.toISOString().slice(0, 10);
}
module.exports = {
  formatTime
};

在页面中引入：

const util = require('./utils.js');

Page({
  onLoad() {
    console.log(util.formatTime(new Date()));
  }
});

八、总结对比表：小程序文件类型一览

文件名	类型	作用
`app.js`	JavaScript	全局逻辑与生命周期
`app.json`	JSON	全局配置（页面路径、窗口样式）
`app.wxss`	WXSS	全局样式
`index.js`	JavaScript	页面逻辑与数据绑定
`index.json`	JSON	页面配置（可选）
`index.wxml`	WXML	页面结构
`index.wxss`	WXSS	页面样式

九、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！

小程序代码的构成