微信小程序 boilerplate 项目快速入门指南

---

1. 项目目录结构及介绍

微信小程序 Boilerplate 是一个基础框架，旨在简化微信小程序的开发起点。下面是该项目的基本目录结构及其功能介绍：

├── dist                # 编译后的产出目录，部署时使用此目录的内容
├── src                 # 源码目录
│   ├── components      # 组件目录，存放自定义组件
│   ├── pages           # 页面目录，每个页面对应小程序的一个界面
│   │   ├── index.wxml  # 页面结构文件
│   │   ├── index.wxss   # 页面样式文件
│   │   ├── index.js    # 页面逻辑文件
│   │   └── index.json  # 页面配置文件
│   ├── app.js          # 应用级入口文件，全局生命周期管理
│   ├── app.json        # 应用配置，包括窗口表现、底部tab等
│   └── app.wxss        # 应用级样式表
├── utils               # 工具函数目录
├── .babelrc            # Babel 配置文件，用于代码转换
├── .eslintrc.js       # ESLint 配置，确保代码风格一致
├── project.config.json # 小程序项目配置，如云服务路径、编译选项等
├── README.md           # 项目说明文档
└── package.json       # Node.js 项目配置，包括依赖和脚本命令

• src 目录是开发的核心区，包含了应用的所有源代码。
• dist 是编译后的目录，准备上线的代码存放于此。
• 其余如.babelrc, .eslintrc.js等，用于代码质量和构建过程中的预处理。

---

2. 项目的启动文件介绍

• app.js: 这是整个小程序的入口文件，负责初始化小程序的应用实例。在这里可以设置全局的事件监听、全局变量以及调用onLaunch等生命周期方法来执行初始化操作。

App({
  onLaunch: function() {
    // 初始化工作
  },
  // ...其他生命周期函数
});

• 页面的.js文件 (例如 src/pages/index/index.js)：每一个页面都有对应的.js文件，作为该页面的逻辑层，负责数据管理和处理页面交互逻辑。

---

3. 项目的配置文件介绍

• app.json: 应用级别的全局配置，包含小程序的全局属性，如窗口背景色，下拉refresh样式，底部tab等。它也用来注册默认导航栏的样式或指定特定页面不需要导航栏。

{
  "window": {
    "navigationBarTitleText": "首页", 
    "backgroundColor": "#ffffff"
  },
  "tabBar": {
    "list": [{...}] // 底部标签栏设置
  },
  // 更多配置...
}

• project.config.json: 此文件用于配置小程序的项目特性，比如编译相关的选项，是否使用ES6语法，上传代码时自动压缩等。

{
  "compileType": "miniprogram",
  "component": true,
  "usingComponents": true,
  "condition": "{\"version\":\"^3.0.0\"}",
  // ...其他项目相关配置
}

以上就是基于https://github.com/zce/weapp-boilerplate.git项目的基础介绍，帮助您快速理解其结构和关键配置点。