微信小程序项目结构和配置

📱 小程序是什么

微信小程序是一种不需要下载安装就可以使用的应用，它具有以下特点：

无需安装：用户扫码或搜索即可使用
体积小：通常只有几MB
打开快：加载速度比普通App快
微信生态：可以直接使用微信的登录、支付等功能

小程序非常适合做一些使用频率不高，但又想快速使用的功能，比如点餐、预约、查询等。

📂 项目文件结构

基本文件结构

app.js（全局逻辑）
app.json（全局配置）
app.wxss（全局样式）
pages（页面文件夹）
- index（首页文件夹）
  - index.js（页面逻辑）
  - index.wxml（页面结构）
  - index.wxss（页面样式）
  - index.json（页面配置）

每个文件的作用：

app.js：小程序启动时的代码
app.json：小程序的全局设置，比如页面列表、窗口样式等
app.wxss：全局的样式表，类似网页的CSS
pages文件夹：存放所有页面，每个页面都有自己的js、wxml、wxss和json文件

⚙️ 基本配置文件

1. 全局配置（app.json）

这是最重要的配置文件，它决定了小程序的基本设置：

{
  "pages": [             // 页面路径列表
    "pages/index/index"  // 第一个页面是启动页
  ],
  "window": {           // 窗口设置
    "navigationBarTitleText": "我的小程序",  // 顶部标题
    "navigationBarBackgroundColor": "#ffffff",  // 顶部背景色
    "navigationBarTextStyle": "black"   // 顶部文字颜色
  }
}

每添加一个新页面，都需要在这里的pages列表中添加路径。

2. 页面配置（页面的.json文件）

每个页面都可以有自己的配置，会覆盖全局配置：

{
  "navigationBarTitleText": "首页",  // 这个页面的标题
  "usingComponents": {}   // 使用的组件列表
}

📄 页面文件说明

1. 页面结构（.wxml文件）

类似HTML，但是使用微信自己的标签：

Hello World

常用的标签：

view：相当于网页的div，用来布局
text：显示文本
button：按钮
image：显示图片

2. 页面样式（.wxss文件）

和CSS很像，用来美化页面：

.container {
  padding: 20px;
  text-align: center;
}

.title {
  color: #333333;
  font-size: 20px;
}

3. 页面逻辑（.js文件）

处理页面的交互和数据：

Page({
  data: {           // 页面的数据
    message: 'Hello'
  },
  onLoad() {        // 页面加载时执行
    console.log('页面加载了')
  },
  onClick() {       // 按钮点击时执行
    console.log('按钮被点击了')
  }
})

💡 开发小提示

修改app.json后需要重新编译才能生效
修改页面文件会自动刷新，不需要重新编译
开发工具的模拟器和真机预览效果可能有差异，建议经常使用真机预览
开发时建议打开"详细错误日志"，方便发现问题