微信小程序【专注时钟】项目教程

1. 项目的目录结构及介绍

WXminiprogram-Focus-clock/
├── app.js
├── app.json
├── app.wxss
├── pages/
│   ├── index/
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── logs/
│   │   ├── logs.js
│   │   ├── logs.json
│   │   ├── logs.wxml
│   │   └── logs.wxss
│   └── ...
├── utils/
│   └── util.js
└── README.md

目录结构说明：

• app.js: 小程序的入口文件，负责全局逻辑。
• app.json: 小程序的全局配置文件，包括页面路径、窗口表现、网络超时时间等。
• app.wxss: 小程序的全局样式文件。
• pages/: 存放小程序的各个页面，每个页面由四个文件组成：.js、.json、.wxml、.wxss。
  • index/: 首页页面。
  • logs/: 日志页面。
• utils/: 存放工具函数，如util.js。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

app.js

app.js是小程序的入口文件，负责全局逻辑。以下是app.js的基本结构：

App({
  onLaunch: function () {
    // 小程序启动时执行的代码
  },
  globalData: {
    // 全局数据
  }
})

主要功能：

• onLaunch: 小程序启动时执行的函数，可以在这里进行一些初始化操作。
• globalData: 定义全局数据，可以在其他页面中通过getApp()获取。

3. 项目的配置文件介绍

app.json

app.json是小程序的全局配置文件，包含小程序的所有页面路径、窗口表现、网络超时时间等配置。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "专注时钟",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

主要配置项：

• pages: 定义小程序的页面路径。
• window: 配置小程序的窗口表现，如导航栏标题、背景颜色、文字颜色等。
• networkTimeout: 配置网络请求的超时时间。
• debug: 是否开启调试模式。

通过以上配置，可以控制小程序的整体表现和行为。