微信小程序项目安装与使用指南

最新推荐文章于 2024-09-08 09:13:58 发布

甄如冰Lea

最新推荐文章于 2024-09-08 09:13:58 发布

阅读量269

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00714/article/details/141117835

版权

微信小程序项目安装与使用指南

weapp项目地址:https://gitcode.com/gh_mirrors/wea/weapp

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

在一个标准的微信小程序项目中，典型的目录结构如下：

├── app.json       # 全局配置文件，用于设定全局的样式以及页面路径等
├── app.wxss       # 全局样式表，用于定义整个小程序的主题和风格
├── pages          # 存放所有页面的相关文件夹
│   ├── index      # 首页或某个功能页面的文件夹
│   │   ├── index.wxml    # 页面的结构文件，类似于HTML
│   │   ├── index.wxss    # 页面的样式文件，类似于CSS
│   │   └── index.js      # 页面的逻辑处理文件，类似于JS
│   └── ...
├── components     # 存放可复用组件的文件夹
│   ├── header     # 如头部导航栏等通用组件
│   └── ...
├── utils          # 存放各种工具函数和辅助类库
│   └── util.js   # 示例文件，如日期处理、请求封装等功能
├── static         # 存放不会变动的静态资源，如图片、字体文件
└── project.config.json    # 编辑器相关配置，例如调试环境的选择

主要目录说明

pages: 包含小程序中的各个页面。每个页面都有其对应的.js, .json, .wxml, .wxss文件。
components: 存储可以重复使用的UI组件。
utils: 存放各种实用工具函数，如网络请求、数据处理等。
static: 存放不需服务器动态加载的静态资源。

2. 项目的启动文件介绍

app.json

这是小程序的全局配置文件，在这里可以设置小程序的基本信息以及注册页面。

示例配置:

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

"pages"字段用于注册小程序的所有页面路径列表，路径是相对于app.json同级目录下的pages目录。
"window"字段则用于配置小程序界面的外观和行为，比如背景颜色、导航栏的颜色和文本。

3. 项目的配置文件介绍

除了app.json之外，另一个重要的配置文件是project.config.json，它主要用于编辑器的个性化配置，包括项目的基础库版本、AppID、调试环境的指定等。

示例配置:

{
  "appid": "your_appid_here",
  "projectname": "my_project_name",
  "setting": {
    "urlCheck": true,
    "eslintrule": {
      "max-len": ["error", 80],
      "no-debugger": false
    },
    "minifyWXML": true,
    "minifyWXSS": true,
    "minifyJS": true,
    "checkNeedAuth": true,
    "checkIsEmitVirtualComponent": true,
    "useNotKeptAliveStaticNode": true,
    "postcss": {
      "autoprefixer": {}
    },
    "babelSetting": {
      "ignore": [],
      "copy": {},
      "extra": {
        "globalObject": "this"
      }
    }
  },
  "libVersion": {},
  "simulator": {},
  "cloudfunctionnode": {},
  "envId": "",
  "version": "0.0.1",
  "libList": []
}

其中，关键字段含义如下：