【愚公系列】《微信小程序与云开发从入门到实践》005-小程序项目的基本结构

愚公搬代码

已于 2024-11-06 03:13:39 修改

阅读量4.8w

点赞数 19

分类专栏：愚公系列-书籍专栏文章标签：微信小程序小程序

于 2024-08-29 23:55:51 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/141691159

版权

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在当今移动互联网的迅猛发展中，小程序以其轻便、高效的特点，逐渐成为了吸引用户的重要工具。无论是电商、社交还是生活服务，各类小程序如雨后春笋般涌现，改变了我们与应用的交互方式。然而，很多开发者在初次接触小程序时，往往对其项目结构感到迷茫。了解小程序的基本结构不仅是开发的第一步，更是构建高效、可维护应用的基础。

在本篇文章中，我们将深入探讨小程序项目的基本结构，帮助大家理清各个组成部分的功能与作用。无论你是刚入门的小白，还是有经验的开发者，相信都能从中获得启发和实用的知识。让我们一起揭开小程序的神秘面纱，开启你的开发之旅吧！

🚀一、小程序项目的基本结构

请重新观察一下之前我们创建的小程序项目的文件检索区，你会发现，测试工程虽然简单，但是默认生成的文件却不少。正所谓麻雀虽小，却五脏俱全。这个示例工程正是我们理解小程序工程结构的最好样例。

🔎1.项目目录结构

之前我们创建的 HelloWorld 项目的目录结构如图所示：

在这里插入图片描述

从图可以看到，工程根目录中有两个文件夹 pages 和 utils 以及一些独立文件。先来介绍各个独立文件的用途。

.eslintrc.js 是 ESLint 配置文件，小程序默认使用 ESLint 进行代码检查，在开发中一般无须修改这个文件。
app.js 文件可以理解为是小程序的入口文件，在这个文件中进行小程序应用实例的注册，整个小程序只有一个应用实例，此实例是全局共享的。
app.json 是当前小程序项目的全局配置文件，在其中进行页面路由、窗口标题等全局信息的配置。
app.wxss 是当前小程序项目中编写的公共样式表，这里面配置的样式在所有组件中都可以直接应用。
project.config.json 是工程配置文件，在这个文件中，可以对当前小程序工作做一些个性化的配置，如界面颜色、编译规则等。
sitemap.json 是一个配置文件，用来配置小程序页面是否允许被微信搜索。

下面，再来看一下工程根目录下的两个文件夹：

🦋1.1 utils 文件夹

utils 文件夹用来存放一些提供工具支持的 JS 文件，默认生成的 util.js 文件中的代码如下：

// 进行日期时间格式化的方法
const formatTime = date => {
   
  // 获取当前年份
  const year = date.getFullYear()
  // 获取当前月份
  const month = date.getMonth() + 1
  // 获取当前日期
  const day = date.getDate()
  // 获取当前时间中的时
  const hour = date.getHours()
  // 获取当前时间中的分
  const minute = date.getMinutes()
  // 获取当前时间中的秒
  const second = date.getSeconds()

  return `${
     [year, month, day].map(formatNumber).join('/')}` +
         ` ${