项目结构认识

项目结构

一个小程序项目通常由以下类型的文件组成：

├── pages/                 // 页面目录，每个页面通常是一个独立的文件夹
│   ├── index/            // 首页
│   │   ├── index.wxml    // 首页的模板结构文件
│   │   ├── index.wxss    // 首页的样式文件
│   │   ├── index.js      // 首页的逻辑文件
│   │   └── index.json    // 首页的配置文件
│   └── logs/             // 日志页面（示例）
│       ├── logs.wxml
│       ├── logs.wxss
│       ├── logs.js
│       └── logs.json
├── utils/                 // 工具类JavaScript文件存放目录
│   └── util.js           // 例如：格式化时间的工具函数
├── app.js                 // 小程序入口文件 - 应用逻辑
├── app.json              // 小程序全局配置 - 公共设置
├── app.wxss              // 小程序全局样式 - 公共样式
├── project.config.json   // 项目配置文件（用于开发者工具）
├── sitemap.json          // 微信搜索索引配置文件
└── images/               // 自定义目录，用于存放图片等静态资源

四种文件类型：任何页面或组件都由四种文件组成，它们各司其职：

• .js：逻辑层文件。
• .wxml：视图层模板文件。
• .wxss：视图层样式文件。
• .json：配置文件。

入口文件：app.js、app.json、app.wxss 是应用级别的文件，是小程序的“大脑”和“总管家”。

配置文件

app.json - 全局配置

这个文件用来对整个小程序进行全局配置，决定了页面文件的路径、窗口表现、设置网络超时时间、底部 Tab 等。

// app.json 示例
{
  "pages": [
    "pages/index/index", // 页面路径，第一项代表首页
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff", // 导航栏背景色
    "navigationBarTitleText": "我的小程序",    // 导航栏标题
    "navigationBarTextStyle": "black",         // 导航栏标题颜色（black/white）
    "backgroundColor": "#eeeeee",              // 下拉窗口背景色
    "backgroundTextStyle": "light",            // 下拉 loading 的样式（dark/light）
    "enablePullDownRefresh": false             // 是否开启下拉刷新
  },
  "tabBar": { // 底部选项卡（如果需要的话）
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-active.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/logs.png",
      "selectedIconPath": "images/logs-active.png"
    }]
  },
  "networkTimeout": { // 网络超时时间设置
    "request": 10000
  },
  "debug": true // 开启调试模式
}

page.json - 页面配置

每一个页面也可以有自己的 .json 配置文件，用于覆盖 app.json 中 window 的配置。它比全局配置的优先级更高，但只能配置 window 相关的属性。

// pages/logs/logs.json 示例
{
  "navigationBarTitleText": "查看启动日志", // 这个页面独有的标题
  "enablePullDownRefresh": true // 仅在这个页面开启下拉刷新
}

WXML - 模板视图层

WXML 用于编写页面的结构，类似于 HTML，但有自己的一套组件和语法。

基本标签：

• <view>：相当于 HTML 中的 <div>，是一个块级容器。
• <text>：相当于 HTML 中的 <span>，用于包裹文本。只有 <text> 标签内的文字才能长按选中。
• <image>：相当于 HTML 中的 <img>，用于显示图片。它默认有宽度 300px、高度 225px，必须通过样式控制大小。
• <button>：按钮。

数据绑定：

• 使用双大括号 可以将 JavaScript 文件中 Page 下的 data 里的数据绑定到视图中。

<!-- index.wxml -->
<view> Hello {{name}} </view>
<image src="{{avatarUrl}}"></image>
<view wx:if="{{isShow}}">这个内容会根据 isShow 的值显示或隐藏</view>
<view wx:for="{{array}}">索引：{{index}}，项：{{item}}</view>

// index.js
Page({
  data: {
    name: '世界',
    avatarUrl: '/images/avatar.png',
    isShow: true,
    array: [1, 2, 3, 4, 5]
  }
})

WXSS - 样式层

WXSS 用于描述 WXML 的组件样式，绝大部分 CSS 语法都支持，并做了一些扩展。

尺寸单位 rpx：

• rpx 可以根据屏幕宽度进行自适应。
• 设计建议：规定屏幕宽为 750rpx。即在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 1rpx = 0.5px = 1物理像素。
• 换算简单：设计师给的设计稿如果是 750px 宽，那么设计稿上的元素尺寸可以直接写成 rpx 单位，无需除以 2。

样式导入：

• 使用 @import 语句可以导入外联样式表，这非常有利于模块化管理和复用样式。

/* app.wxss - 定义全局样式 */
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* index.wxss */
@import "/styles/common.wxss"; /* 导入公共样式 */

.user-avatar {
  width: 200rpx; /* 在750px设计稿上就是200px */
  height: 200rpx;
  border-radius: 50%;
}

JavaScript - 逻辑层

小程序的逻辑层由 JavaScript 编写，并通过 App() 和 Page() 等函数来注册程序和页面。

页面逻辑文件 page.js：

// index.js
Page({
  // 1. 页面的初始数据
  data: {
    message: "Hello World"
  },

  // 2. 生命周期函数
  onLoad: function(options) {
    // 页面加载时触发，一个页面只调用一次
    console.log('页面加载完成');
  },
  onShow: function() {
    // 页面显示/切入前台时触发
    console.log('页面显示');
  },
  onReady: function() {
    // 页面初次渲染完成时触发，一个页面只调用一次
  },

  // 3. 事件处理函数
  onButtonTap: function(event) {
    // 当按钮被点击时触发
    console.log('按钮被点击了', event);

    // 4. 修改数据，必须通过 this.setData 方法
    this.setData({
      message: "数据被更新了！"
    });
  },

  // 5. 自定义方法
  myCustomMethod: function() {
    // 可以在这里写自己的逻辑
  }
})

核心要点：

• 数据驱动：视图的更新是通过修改 data 里的数据来实现的。
• setData 方法：这是唯一可以改变 this.data 并同步更新视图的方法。直接修改 this.data.message 是无效的。
• 生命周期：onLoad、onShow、onReady 等函数在页面的不同阶段被自动调用，可以在里面编写相应的初始化逻辑。