mini-blog 项目使用教程

mini-blog 项目使用教程

1. 项目的目录结构及介绍

mini-blog/
├── cloudfunctions/
│   └── ...
├── miniprogram/
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── pages/
│   │   └── ...
│   ├── components/
│   │   └── ...
│   └── ...
├── .gitignore
├── LICENSE
├── README.md
└── project.config.json

目录结构介绍

• cloudfunctions/: 存放云函数的目录。
• miniprogram/: 小程序的主要代码目录，包含应用的入口文件和页面文件。
  • app.js: 小程序的入口文件，负责初始化应用。
  • app.json: 小程序的全局配置文件，定义页面路径、窗口表现等。
  • app.wxss: 小程序的全局样式文件。
  • pages/: 存放小程序页面的目录。
  • components/: 存放自定义组件的目录。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• project.config.json: 小程序项目的配置文件。

2. 项目的启动文件介绍

app.js

app.js 是小程序的入口文件，负责初始化应用。以下是 app.js 的基本结构：

App({
  onLaunch: function () {
    // 小程序启动时执行的代码
  },
  globalData: {
    // 全局数据
  }
})

app.json

app.json 是小程序的全局配置文件，定义了小程序的页面路径、窗口表现、网络超时时间等。以下是 app.json 的基本结构：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "mini-blog",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

app.wxss

app.wxss 是小程序的全局样式文件，定义了小程序的全局样式。以下是 app.wxss 的基本结构：

page {
  background-color: #f6f6f6;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

3. 项目的配置文件介绍

project.config.json

project.config.json 是小程序项目的配置文件，包含了小程序的开发工具配置信息。以下是 project.config.json 的基本结构：

{
  "miniprogramRoot": "miniprogram/",
  "cloudfunctionRoot": "cloudfunctions/",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "appid": "your-app-id",
  "projectname": "mini-blog",
  "description": "A blogging mini-program based on cloud development."
}

配置项说明

• miniprogramRoot: 指定小程序代码的根目录。
• cloudfunctionRoot: 指定云函数代码的根目录。
• setting: 开发工具的配置项，如 urlCheck、es6、postcss、minified 等。
• appid: 小程序的 AppID。
• projectname: 项目的名称。
• description: 项目的描述。