微信小程序开发教程-目录文件说明

目录结构

全局文件

整个小程序生效

1. app.js

小程序全局逻辑入口文件,官方详解见 链接

  • 作用:定义小程序生命周期(onLaunch/onShow/onHide)、全局数据globalData、全局工具方法;所有页面可通过getApp()访问这里的全局变量。
  • 示例用途:登录鉴权、全局请求封装、用户信息缓存。

2. app.json

小程序全局配置文件(核心),官方详解见 链接

  • 作用:配置页面路由、底部tabBar、窗口表现(导航栏颜色/标题)、权限、分包、网络超时等;必须存在,语法严格JSON。
  • 关键节点:
    • pages:注册所有页面,数组第一项为小程序首页;
    • window:全局导航栏、背景样式;
    • tabBar:底部导航栏(多页面切换)。

3. app.wxss

小程序全局公共样式表,官方详解见 链接

  • 作用:所有页面自动继承该样式,统一设置全局字体、重置默认边距、公共class(如按钮、卡片通用样式);页面wxss会覆盖全局同名样式。

4. project.config.json

项目工具配置文件(开发者工具专用)

  • 作用:保存开发者工具的本地配置:项目appid、编译设置、ES6转译、上传代码忽略文件、编辑器配色、真机调试参数;团队协作时可提交到git。

5. project.private.config.json

本地私有配置(不提交版本库)

  • 作用:存放个人本地专属配置,如本地代理、私有编译参数;.gitignore一般忽略此文件,不会污染团队公共配置。

6. sitemap.json

小程序搜索索引配置

  • 作用:控制微信爬虫抓取哪些页面,配置页面是否允许被微信搜索收录;开启后小程序页面可在微信搜索结果展示。

pages 页面文件夹

每一个子文件夹 是:一个独立页面

小程序单页面必须包含4个同名文件(js/json/wxml/wxss),截图里有 index(首页)、logs(日志页)两个页面:

以 pages/index 首页为例

  1. index.wxml:页面结构层(等价HTML)
    写页面标签、数据绑定{{}}、循环wx:for、条件渲染wx:if等视图结构。

  2. index.wxss:页面私有样式(等价CSS)
    仅当前页面生效,优先级高于app.wxss;支持rpx自适应单位、选择器。

  3. index.js:页面逻辑脚本
    通过Page({})注册页面,存放当前页面数据data、点击事件、生命周期(onLoad/onReady/onUnload)、接口请求。

  4. index.json:页面独立配置(局部覆盖app.json)
    单独修改当前页面导航栏标题、颜色、下拉刷新,不影响其他页面;无配置可空{}。

pages/logs

日志示例页面,文件结构、作用和index完全一致,只是独立路由页面。


utils 工具文件夹

公共工具函数

util.js

全局通用工具封装文件

  • 作用:存放复用逻辑,如时间格式化、金额转换、正则校验、防抖节流;各页面通过const util = require('../../utils/util.js')引入调用,避免代码重复。

层级生效优先级(由高到低)

页面json > app.json
页面wxss > app.wxss
页面js局部data > app.js全局globalData

最简运行流程

  1. 开发者工具读取 project.config.json 加载项目;
  2. 启动小程序时先执行 app.js onLaunch;
  3. 读取 app.json 的pages数组,加载第一个页面(index);
  4. 渲染页面:先全局app.wxss → 页面index.wxss;结构index.wxml;逻辑index.js;局部配置index.json。

原文出处:/show_1GW3WwSrrZ6Q.html