微信小程序学习笔记之目录结构、基本配置图文详解

关于“微信小程序学习笔记之目录结构、基本配置图文详解”的完整攻略，我将会分以下几个部分进行讲解：

1. 目录结构的介绍
2. app.json文件的配置
3. 配置各个页面的json文件
4. 示例说明
5. 总结

1. 目录结构的介绍

微信小程序采用了类似于MVVM的框架来开发应用，应用主要由配置文件和代码文件两部分组成。其中配置文件主要包括：app.json文件、各个页面的json文件、以及全局的配置文件。代码文件主要包括了组件、页面、工具函数和样式文件。

微信小程序的目录结构如下：

app.js                                    // 小程序入口文件
app.json                                  // 小程序公共配置文件
app.wxss                                  // 小程序公共样式文件
project.config.json                       // 项目配置文件
pages/                                    // 主要存放小程序页面相关文件
    index/                                // index页面目录
        index.js                           // index页面逻辑文件
        index.wxml                         // index页面结构文件
        index.wxss                         // index页面样式文件
        index.json                         // index页面个性化配置文件
    logs/
        logs.js
        logs.wxml
        logs.json
    ...
utils/                                    // 工具函数目录
    util.js                                // 工具函数
components/                               // 组件目录
    componentA/
        componentA.js                      // 组件逻辑文件
        componentA.wxml                    // 组件结构文件
        componentA.wxss                    // 组件样式文件

2. app.json文件的配置

app.json是小程序的公共配置文件，用来配置小程序的全局性质。以下是一份默认的app.json配置示例：

{
  "pages": [                      // 必选项，声明小程序中所有页面路径
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {                     // 必选项，小程序的全局配置，详见官方文档
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#fff",
    "backgroundTextStyle": "light"
  },
  "networkTimeout": {             // 可选项，超时时间
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true                   // 可选项，是否开启调试
}

其中，pages是必选项，用来声明小程序中的所有页面路径。每一个路径对应pages目录下的一个子目录。例如，"pages/index/index"表示index目录下的index页面。

3. 配置各个页面的json文件

每个页面的目录下都应该有一个json文件，用来对当前页面进行个性化配置。以下是一份示例：

{
  "navigationBarTitleText": "标题",                        // 导航栏标题文字内容
  "navigationBarBackgroundColor": "#ffffff",              // 导航栏背景颜色
  "navigationBarTextStyle": "black",                       // 导航栏标题颜色，仅支持 black/white
  "backgroundTextStyle": "dark",                            // 下拉 loading 的样式，仅支持 dark/light
  "backgroundColor": "#f7f7f7",                             // 窗口的背景色
  "enablePullDownRefresh": true,                            // 是否开启下拉刷新
  "disableScroll": false,                                   // 是否禁止页面滚动
  "usingComponents": {                                      // 引用的自定义组件，具体介绍见官方文档
      "my-component": "/components/my-component/my-component"
  }
}

4. 示例说明

下面通过两个具体的示例来说明使用目录结构和json文件进行小程序开发。

示例1

一个简单的小程序，只有一个主页面，包含一个标题和一张图片。页面所在目录为pages/index，具体文件如下：

pages/
  index/
    index.js
    index.wxml
    index.wxss
    index.json

其中index.js用来处理页面逻辑，可以为空；index.wxml定义了页面结构，代码如下：

<view class="container">
  <view class="title">这是一个标题</view>
  <image src="../../img/pic.png" class="pic"></image>
</view>

样式文件index.wxss：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100rpx;
  font-size: 36rpx;
}

.title {
  margin-bottom: 50rpx;
}

.pic {
  width: 200rpx;
  height: 200rpx;
  margin-top: 50rpx;
}

index.json为：

{
  "navigationBarTitleText": "主页面"
}

示例2

一个含有导航栏和底部导航栏的小程序，共有3个页面。

目录结构：

pages/
  index/
    index.js
    index.wxml
    index.wxss
    index.json
  contacts/
    contacts.js
    contacts.wxml
    contacts.wxss
    contacts.json
  about/
    about.js
    about.wxml
    about.wxss
    about.json

app.json配置为：

{
  "pages": [
    "pages/index/index",
    "pages/contacts/contacts",
    "pages/about/about"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#f0f0f0",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#007AFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home_unselected.png",
        "selectedIconPath": "images/home_selected.png"
      },
      {
        "pagePath": "pages/contacts/contacts",
        "text": "联系人",
        "iconPath": "images/contacts_unselected.png",
        "selectedIconPath": "images/contacts_selected.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "images/about_unselected.png",
        "selectedIconPath": "images/about_selected.png"
      }
    ]
  }
}

其中tabBar用来定义底部导航栏。list数组中每一项表示一个选项，包含以下几个属性：

• pagePath：必选项，表示页面路径，必须在pages数组中定义过
• text：必选项，选项名称
• iconPath：必选项，未选中时的图标路径（27x27px），支持JPG、PNG、SVG格式
• selectedIconPath：必选项，选中时的图标路径（27x27px），支持JPG、PNG、SVG格式

以pages/about/about为例进行说明，about.js：

Page({
  data: {
    about: '这是一段关于我们的介绍'
  }
})

about.wxml：

<view class="container">
  <view class="about">{{ about }}</view>
</view>

about.wxss：

.container {
  margin-top: 100rpx;
}

.about {
  font-size: 36rpx;
}

about.json：

{
  "navigationBarTitleText": "关于我们"
}

5. 总结

本文介绍了微信小程序的目录结构、基本配置以及使用示例。小程序开发使用的目录结构比较清晰明了，各个配置文件的作用也十分明确，可以根据需求灵活配置，方便开发。在进行小程序开发的时候，需要遵守上述规则和建议，才能顺利开发出优秀的小程序应用。