微信小程序开发必知必会：文件结构和基本配置

一、微信小程序基本文件结构

1.  project.config.json：项目的基本配置文件，包括项目名称、appid、项目目录、页面文件夹等。

 

  {
      "setting": {
        "urlCheck": false,
        "es6": true,
        "postcss": true,
        "nodeModulesPath": "D:\\\\node_modules"
      },
      "appid": "wxd678efh567hg67",
      "projectname": "my-weapp",
      "debug": true,
      "dist": {
        "index": "dist/index.html",
        "subPackages": []
      },
      "compileType": "miniprogram",
      "miniprogramRoot": "dist"
    }

    

2.  sitemap.json：定义项目的页面结构，以及页面间的导航关系。

 

  {
      "pages": [
        {
          "path": "pages/index/index",
          "text": "首页"
        },
        {
          "path": "pages/logs/logs",
          "text": "日志"
        }
      ],
      "navigator": [
        {
          "name": "首页",
          "openType": "switchTab",
          "url": "/pages/index/index",
          "appid": ""
        },
        {
          "name": "日志",
          "openType": "navigate",
          "url": "/pages/logs/logs",
          "appid": ""
        }
      ]
    }

    

3.  pages目录：存放小程序的页面文件，每个页面由一个.json、.wxml、.js、.wxss文件组成。

1  .json：页面的基本配置，如页面标题、页面数据等。
2  .wxml：页面结构，使用WXML语言编写。
3   .js：页面逻辑，使用JavaScript编写。
4  .wxss：页面样式，使用WXSS语言编写。

4.  utils目录：存放公共方法，方便在多个页面中使用。
    
5.  images目录：存放项目中使用到的图片资源。
    
6.  components目录：存放自定义组件，方便在多个页面中使用。
    
7.  app.js：小程序的入口文件，用于初始化小程序。
    
8.  app.json：小程序的全局配置文件，如窗口配置、页面配置、网络超时时间等。
    

   

{
      "pages": [
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }
    

9.  app.wxss：小程序的全局样式文件。

二、基本配置

1.  修改项目名称：修改project.config.json中的`projectname`字段。
    
2.  修改页面标题：修改.json文件中的`navigationBarTitleText`字段。
    
3.  修改窗口配置：修改app.json中的`window`字段。
    
4.  修改网络超时时间：修改app.json中的`networkTimeout`字段。
    
5.  添加自定义页面：在pages目录下创建新的页面文件夹，并按照基本文件结构编写。
    
6.  添加自定义组件：在components目录下创建新的组件文件夹，并按照基本文件结构编写。
    
7.  添加全局样式：在app.wxss中编写。
    
8.  添加全局方法：在utils目录下创建新的文件，并在app.js中引入。
    

总之，微信小程序的文件结构和基本配置是小程序开发中不可忽略的一部分。了解这些基础知识，能够帮助我们更好地开发小程序，提高开发效率。如果你在实际开发中遇到问题，欢迎继续提问。