微信小程序开发教程！博卡君第二弹【微信小程序项目结构以及配置】
前言----
在上一篇博客中，我们已经介绍了如何使用微信小程序开发工具来创建一个新的小程序项目。现在，我们将继续讨论微信小程序项目的结构和配置。
1.项目结构
当你新建一个微信小程序项目时，会自动创建一个文件夹，包含以下几个子目录：
* assets:存放静态资源，如图片、视频等。
* components:存放自定义组件。
* pages:存放页面相关的代码和配置。
* utils:存放工具函数。
* app.json:小程序的配置文件。
2. app.json 配置
`app.json` 是微信小程序项目的核心配置文件。它包含了小程序的基本信息，如名称、版本号、描述等，以及一些关键配置项，如全局样式、导航栏等。
以下是 `app.json` 的基本结构：
```json{
"pages": [
"index/index",
"logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "fff",
"navigationBarTitleText": "",
"onReachBottomDistance":50,
"enablePullDownRefresh": true },
"style": {
"navigationBarTextStyle": "black"
}
}
```
其中，`pages` 属性指定了小程序的页面列表，每个页面对应一个 `index/index` 的形式。`window` 属性用于配置全局样式和导航栏等。
3. 页面结构
每个页面都有自己的目录结构，包含以下几个文件：
* index.wxml:页面的 WXML 文件。
* index.wxss:页面的 WXSS 文件。
* index.js:页面的 JavaScript代码。
* index.json:页面的配置文件。
4. 页面配置
每个页面都有自己的配置文件 `page.json`，用于指定页面的基本信息，如标题、描述等。
以下是 `page.json` 的基本结构：
```json{
"navigationBarTitleText": "",
"enablePullDownRefresh": true,
"onReachBottomDistance":50}
```
其中，`navigationBarTitleText` 属性用于指定导航栏的标题文本。`enablePullDownRefresh` 和 `onReachBottomDistance` 属性用于配置下拉刷新和触底事件。
5. 页面样式
每个页面都有自己的样式文件 `page.wxss`，用于定义页面的样式。
以下是 `page.wxss` 的基本结构：
```css.page {
background-color: fff;
}
.title {
color: 333;
}
```
其中，`.page` 类用于定义页面的背景颜色。`.title` 类用于定义标题文本的颜色。
6. 页面逻辑
每个页面都有自己的 JavaScript代码 `index.js`，用于实现页面的逻辑。
以下是 `index.js` 的基本结构：
```javascriptPage({
data: {
title: 'Hello World!'
},
onLoad: function(options) {
console.log('onLoad');
}
});
```
其中，`data` 属性用于定义页面的数据。`onLoad` 方法用于实现页面加载事件。
7. 页面组件
每个页面都可以使用自定义组件。
以下是 `index.wxml` 的基本结构：
```wxml
```
其中，`{{title}}` 表示使用数据绑定。
以上就是微信小程序项目的结构和配置。通过这些知识，你可以更好地理解微信小程序开发的基本原理，并且能够更高效地开发自己的小程序应用。
