微信小程序踩坑集合项目教程

微信小程序踩坑集合项目教程

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

wechat-app-issues/
├── README.md
├── LICENSE
├── package.json
├── src/
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── pages/
│   │   ├── index/
│   │   │   ├── index.js
│   │   │   ├── index.json
│   │   │   ├── index.wxml
│   │   │   ├── index.wxss
│   │   └── ...
│   ├── utils/
│   │   ├── util.js
│   │   └── ...
│   └── ...
├── test/
│   └── ...
└── ...

• README.md: 项目说明文件。
• LICENSE: 项目许可证文件。
• package.json: 项目依赖管理文件。
• src/: 源代码目录。
  • app.js: 小程序的入口文件。
  • app.json: 小程序的全局配置文件。
  • app.wxss: 小程序的全局样式文件。
  • pages/: 小程序的页面目录，每个页面包含四个文件（js, json, wxml, wxss）。
  • utils/: 工具函数目录。
• test/: 测试代码目录。

2. 项目的启动文件介绍

app.js

app.js 是小程序的入口文件，负责小程序的初始化和全局变量的定义。以下是一个简单的示例：

App({
  onLaunch: function () {
    // 小程序启动时的初始化操作
  },
  globalData: {
    userInfo: null
  }
})

app.json

app.json 是小程序的全局配置文件，用于配置小程序的页面路径、窗口表现、网络超时时间等。以下是一个简单的示例：

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

app.wxss

app.wxss 是小程序的全局样式文件，定义了小程序的全局样式。以下是一个简单的示例：

page {
  background-color: #f6f6f6;
}

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

3. 项目的配置文件介绍

package.json

package.json 是项目的依赖管理文件，定义了项目的依赖包和脚本命令。以下是一个简单的示例：

{
  "name": "wechat-app-issues",
  "version": "1.0.0",
  "description": "微信小程序踩坑集合",
  "main": "src/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "Apache-2.0",
  "dependencies": {
    "wechat-miniprogram": "^2.14.1"
  }
}

其他配置文件

• .gitignore: 定义了Git版本控制中需要忽略的文件和目录。
• .eslintrc.js: 定义了代码风格检查规则。
• .prettierrc: 定义了代码格式化规则。

以上是微信小程序踩坑集合项目的目录结构、启动文件和配置文件的介绍。希望这份教程能帮助你更好地理解和使用该项目。