小程序

微信小程序采用模块化文件结构，每个文件类型承担特定功能。以下是标准小程序项目各核心文件的含义及作用：

---

一、根目录文件（全局配置）

文件	类型	作用
app.js	JavaScript	小程序入口文件 ，定义全局逻辑： - 声明全局变量（如 globalData） - 监听生命周期（onLaunch, onShow, onHide）
app.json	JSON	全局配置 ： - pages：注册所有页面路径（自动生成对应文件） - window：导航栏/背景色等窗口样式 - tabBar：底部导航栏配置
app.wxss	CSS	全局样式（可选），定义公共样式规则，会被所有页面继承
project.config.json	JSON	项目个性化配置： - 开发者工具设置（编译模式、端口号） - AppID、项目名称等元数据
sitemap.json	JSON	搜索引擎索引规则： - 控制哪些页面允许被微信搜索收录

---

二、页面文件（pages/目录下）

每个页面由4个同名文件组成（必须位于同名目录）：

文件	类型	作用
page.js	JavaScript	页面逻辑 ： - 定义数据（data） - 生命周期（onLoad, onShow） - 事件处理函数
page.json	JSON	页面级配置 （可选）： - 覆盖 app.json 中的 window 配置（如单独设置导航栏标题）
page.wxml	XML	页面结构模板 ： - 使用小程序组件（如 <view>, <image>） - 数据绑定（{{data}}）和逻辑判断（wx:if）
page.wxss	CSS	页面样式 （可选）： - 仅作用于当前页面，优先级高于 app.wxss

---

三、其他关键目录

目录/文件	作用
utils/	存放工具类文件（如日期格式化、网络请求封装）： ```javascript // utils/http.js const request = (url) => { ... } export { request }
components/	存放自定义组件 ： - 每个组件同样由 .js, .json, .wxml, .wxss 组成 - 需在 page.json 中通过 usingComponents 引入
images/	存放静态图片资源（建议使用绝对路径 /images/logo.png 引用）

四、代码示例

1. app.json 示例（配置页面和底部导航）

json

复制

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "Demo",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

2. page.wxml 数据绑定

html

复制

<view class="container">
  <text>{{message}}</text>
  <button bindtap="changeText">点击修改</button>
</view>

运行 HTML

3. page.js 数据与事件

javascript

复制

Page({
  data: {
    message: "Hello World"
  },
  changeText() {
    this.setData({ message: "文本已更新！" });
  }
});

---

五、关键注意事项

1. 文件命名规范：

   • 页面目录名和文件名必须完全一致（如 pages/home/home）
   • JSON 文件不能有注释（与标准 JSON 格式要求一致）

2. 样式隔离：

   • 页面样式（.wxss）默认只影响当前页面 ，可通过 app.wxss 设置全局样式
   • 使用 !important 提高优先级

3. 组件通信：

   • 父子组件通过 properties 传递数据
   • 子组件通过 triggerEvent 向父组件发送事件