小程序项目结构

介绍

微信小程序是一种轻量级的应用程序，用户无需下载安装即可使用。为了高效开发小程序，理解其项目结构至关重要。一个典型的小程序项目由多个文件和目录组成，每个部分都有其特定的功能和作用。本文将详细介绍小程序的项目结构，帮助你快速上手开发。

小程序项目结构概览

一个标准的微信小程序项目通常包含以下文件和目录：

project
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── app.js
├── app.json
├── app.wxss
├── project.config.json
└── utils
    └── util.js

1. `app.js`

app.js 是小程序的入口文件，负责小程序的全局逻辑。你可以在这里定义全局变量、生命周期函数以及事件处理函数。

App({
  onLaunch() {
    console.log('小程序启动');
  },
  globalData: {
    userInfo: null
  }
});

2. `app.json`

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

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "小程序示例"
  }
}

3. `app.wxss`

app.wxss 是小程序的全局样式文件，用于定义小程序的全局样式。类似于 CSS，但有一些小程序特有的样式规则。

page {
  background-color: #f8f8f8;
}

4. `pages` 目录

pages 目录是小程序页面的集合，每个页面通常包含四个文件：.js、.json、.wxml 和 .wxss。

index.js: 页面的逻辑文件，定义页面的生命周期函数和事件处理函数。
index.json: 页面的配置文件，用于设置页面的窗口表现。
index.wxml: 页面的结构文件，类似于 HTML，用于定义页面的结构。
index.wxss: 页面的样式文件，类似于 CSS，用于定义页面的样式。

// index.js
Page({
  data: {
    message: 'Hello, 小程序!'
  },
  onLoad() {
    console.log('页面加载');
  }
});

// index.json
{
  "navigationBarTitleText": "首页"
}

<!-- index.wxml -->
<view class="container">
  <text>{{message}}</text>
</view>

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

5. `project.config.json`

project.config.json 是小程序项目的配置文件，用于配置项目的开发者工具设置、编译选项等。

{
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "appid": "your-app-id",
  "projectname": "小程序示例"
}

6. `utils` 目录

utils 目录通常用于存放工具函数或公共方法，以便在多个页面中复用。

// utils/util.js
function formatDate(date) {
  return date.toLocaleString();
}

module.exports = {
  formatDate
};

实际案例

假设我们正在开发一个简单的天气小程序，项目结构如下：

weather-app
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── detail
│       ├── detail.js
│       ├── detail.json
│       ├── detail.wxml
│       └── detail.wxss
├── app.js
├── app.json
├── app.wxss
├── project.config.json
└── utils
    └── weather.js

在 utils/weather.js 中，我们可以定义一个获取天气数据的函数：

// utils/weather.js
function getWeather(city) {
  return fetch(`https://api.weather.com/${city}`)
    .then(response => response.json());
}

module.exports = {
  getWeather
};

然后在 pages/index/index.js 中调用这个函数：

// pages/index/index.js
const weather = require('../../utils/weather.js');

Page({
  data: {
    weatherInfo: null
  },
  onLoad() {
    weather.getWeather('Beijing').then(data => {
      this.setData({
        weatherInfo: data
      });
    });
  }
});

总结

通过本文，你已经了解了微信小程序的基本项目结构，包括核心文件和目录的作用。掌握这些基础知识将为你后续的小程序开发打下坚实的基础。

附加资源与练习

练习: 尝试创建一个新的小程序项目，并添加一个新的页面 about，包含 .js、.json、.wxml 和 .wxss 文件。
资源: 参考微信官方文档，了解更多关于小程序开发的详细内容。

提示

在开发过程中，合理组织项目结构可以提高代码的可维护性和可读性。建议遵循官方推荐的项目结构，并根据实际需求进行调整。

介绍​