[猫头虎分享21天微信小程序基础入门教程]第2天：了解小程序的结构与文件配置

文章目录

• 第2天：了解小程序的结构与文件配置 📂
  • 微信小程序的文件结构 🗂️
  • • 主要文件类型
    • 项目文件说明
  • 配置文件详解 🔍
  • 全局配置（app.json）
    • 页面配置
  • 小测试 🧪
  • 今日学习总结 📚
  • 结语

主要文件类型

• JSON 配置文件：定义程序的一些信息和页面的配置。🔧
• WXML 模板文件：相当于HTML，用于构建页面结构。🏗️
• WXSS 样式文件：相当于CSS，用于设置页面的样式。🎨
• JS 脚本文件：负责处理用户的操作和数据处理。📜

在这里插入图片描述

项目文件说明

1. app.js：程序的入口文件，可以监听并处理小程序的生命周期函数、声明全局变量等。
2. app.json：是小程序的全局配置文件，可以设置小程序的窗口背景色、导航条样式等。
3. app.wxss：全局样式文件，可以在这里声明全局的样式规则。
4. pages/：存放各个页面的文件夹，每一个页面都有自己独立的.js、.wxml、.json和.wxss文件。

在这里插入图片描述

配置文件详解 🔍

小程序的配置分为全局配置和页面配置，通过JSON文件进行设置。

全局配置（app.json）

全局配置文件app.json中，可以定义小程序的页面文件路径、界面表现、网络超时时间、底部tab等。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }
}

页面配置

每个页面可以有自己的.json文件，用于设置当前页面的标题、窗口颜色等属性。

小测试 🧪

• 尝试修改app.json中的navigationBarTitleText，改变某个页面的标题，并观察模拟器中的效果。

在这里插入图片描述

今日学习总结 📚

结语

通过今天的学习，你应该对微信小程序的文件结构和配置有了基本的了解。掌握这些是进行小程序开发的基础。明天我们将深入到页面布局和样式设计。有任何疑问，欢迎在猫头虎技术团队公众号上提问。📩