微信小程序电商项目启动与配置教程

一、项目的目录结构及介绍

微信小程序电商项目（black_horse_mall_project）的目录结构如下：

black_horse_mall_project/
├── components/              # 小程序组件目录
├── icons/                   # 图标资源目录
├── images/                  # 图片资源目录
├── pages/                   # 页面目录
├── request/                 # 网络请求相关文件目录
├── styles/                  # 样式文件目录
├── utils/                   # 工具类目录
├── app.js                   # 小程序逻辑
├── app.json                 # 小程序公共设置
├── app.wxss                 # 小程序公共样式表
├── project.config.json      # 项目配置文件
└── sitemap30.json           # 小程序itemap配置文件

详细介绍：

• components/：存放小程序的组件，例如头部、底部导航等可复用的小模块。
• icons/：存放项目所需的图标资源。
• images/：存放项目所需的图片资源。
• pages/：存放小程序的页面相关文件，每个页面通常包含四个文件（.wxml、.wxss、.js、.json），分别代表页面结构、样式、逻辑和配置。
• request/：存放网络请求相关的代码，可能包含API接口和数据处理逻辑。
• styles/：存放全局样式或公共样式。
• utils/：存放工具类函数或方法，例如日期格式化、数据转换等。
• app.js：小程序逻辑文件，可以定义全局变量、生命周期函数等。
• app.json：小程序公共设置文件，可以配置窗口外观、网络超时时间等。
• app.wxss：小程序公共样式表，定义全局样式。
• project.config.json：项目配置文件，包含编译设置、项目信息等。
• sitemap30.json：小程序itemap配置文件，用于配置搜索引擎的抓取规则。

二、项目的启动文件介绍

项目的启动文件主要是app.js，这是小程序的入口文件，用于定义小程序的一些全局变量、生命周期函数以及页面注册等。

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  },
  onShow: function (options) {
    // 小程序启动或从后台进入前台显示时触发
  },
  onHide: function () {
    // 小程序从前台进入后台时触发
  },
  globalData: {
    // 全局变量
  }
})

在app.js中，通常还会包含一些全局的函数和逻辑，这些函数和逻辑会被小程序中的多个页面或组件共享。

三、项目的配置文件介绍

项目的配置文件主要是app.json和project.config.json。

1. app.json：用于配置小程序的全局设置，例如：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  // 其他配置...
}

在app.json中可以定义小程序的页面路径、窗口外观、底部tab栏等。

2. project.config.json：是项目级别的配置文件，用于配置编译相关的一些选项，例如：

{
  "miniprogramRoot": "src/",
  "qcloudRoot": "server/",
  "setting": {
    "urlCheck": false,
    "es6": true
  },
  // 其他配置...
}

在project.config.json中可以设置小程序的源码目录、云开发目录、编译设置等。

通过以上介绍，开发者可以快速了解微信小程序电商项目的基本结构，为后续开发打下良好基础。