微信小程序示例项目教程

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

微信小程序示例项目的目录结构如下：

miniprogram-demo/
├── miniprogram/
│   ├── app.json
│   ├── app.js
│   ├── app.wxss
│   ├── pages/
│   │   ├── index/
│   │   │   ├── index.json
│   │   │   ├── index.js
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   └── ...
│   ├── components/
│   │   ├── custom-component/
│   │   │   ├── custom-component.json
│   │   │   ├── custom-component.js
│   │   │   ├── custom-component.wxml
│   │   │   └── custom-component.wxss
│   │   └── ...
│   ├── utils/
│   │   └── util.js
│   └── ...
├── project.config.json
└── ...

目录结构介绍

• miniprogram/：小程序的主要代码目录。
  • app.json：小程序的全局配置文件。
  • app.js：小程序的入口文件。
  • app.wxss：小程序的全局样式文件。
  • pages/：存放小程序的各个页面。
    • index/：示例页面目录。
      • index.json：页面的配置文件。
      • index.js：页面的逻辑文件。
      • index.wxml：页面的结构文件。
      • index.wxss：页面的样式文件。
  • components/：存放自定义组件。
    • custom-component/：示例自定义组件目录。
      • custom-component.json：组件的配置文件。
      • custom-component.js：组件的逻辑文件。
      • custom-component.wxml：组件的结构文件。
      • custom-component.wxss：组件的样式文件。
  • utils/：存放工具函数。
    • util.js：示例工具函数文件。
• project.config.json：小程序的项目配置文件。

2、项目的启动文件介绍

小程序的启动文件是 miniprogram/app.js，它包含了小程序的初始化逻辑和全局变量的定义。以下是 app.js 的基本结构：

App({
  onLaunch: function () {
    // 小程序启动时的初始化操作
  },
  globalData: {
    // 全局数据
  }
})

启动文件介绍

• App({})：小程序的入口函数，用于定义小程序的生命周期函数和全局数据。
  • onLaunch：小程序启动时调用的函数。
  • globalData：定义全局数据的对象。

3、项目的配置文件介绍

小程序的配置文件主要包括 miniprogram/app.json 和 project.config.json。

app.json

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：开启调试模式。

project.config.json

project.config.json 是小程序的项目配置文件，用于配置小程序的开发工具设置、编译设置等。以下是 project.config.json 的基本结构：

{