文件结构解析：小程序的“骨架”长什么样？

我们了解了第一个获取头像的微信小程序，我们就会很好奇，它为什么如此构成？

微信小程序的文件结构就像一个人体，各个部分各司其职，共同构成了一个完整的小程序。在本文中，我们将通过比喻来说明小程序中的主要文件和目录的作用，帮助您更好地理解小程序的结构。

小程序的“骨架、心脏、肢体”

骨架：app.json

app.json文件是小程序的全局配置文件，定义了小程序的页面路径、界面表现、网络超时时间、底部 tab、窗口表现等。它就像是小程序的“骨架”，决定了小程序的整体结构和布局。

// app.json 示例
{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "豆子碎片",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

心脏：app.js

app.js文件是小程序的入口文件，定义了小程序的生命周期函数，如小程序初始化时执行的方法、全局数据等。它就像是小程序的“心脏”，驱动着小程序的运行。

// app.js 示例
App({
  onLaunch: function () {
    // 小程序初始化时执行
    console.log("小程序初始化完成");
  },
  globalData: {
    userInfo: null,
  },
});

肢体：pages 目录

pages目录包含了小程序的各个页面，每个页面由.wxml、.js、.wxss和.json四个文件组成，分别用于定义页面的结构、逻辑、样式和配置。它们就像是小程序的“肢体”，负责展示和交互。

示例页面目录结构

pages/
  ├── index/
  │   ├── index.wxml
  │   ├── index.js
  │   ├── index.wxss
  │   ├── index.json
  ├── logs/
  │   ├── logs.wxml
  │   ├── logs.js
  │   ├── logs.wxss
  │   ├── logs.json

index 页面示例

<!-- index.wxml -->
<view class="container">
  <image src="/images/avatar.png" class="avatar"></image>
  <button bindtap="getUserInfo">获取头像</button>
</view>

// index.js
Page({
  data: {
    userInfo: {},
  },
  getUserInfo: function () {
    wx.getUserProfile({
      desc: "展示用户信息",
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
        });
        wx.navigateTo({
          url: "/pages/logs/logs?info=" + JSON.stringify(res.userInfo),
        });
      },
    });
  },
});

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

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

总结

通过本文的比喻，您应该对微信小程序的文件结构有了更直观的理解。app.json文件是小程序的“骨架”，决定了小程序的整体结构和布局；app.js文件是小程序的“心脏”，驱动着小程序的运行；pages目录中的各个页面是小程序的“肢体”，负责展示和交互。希望这篇文章能够帮助您更好地理解和开发微信小程序。