小程序开发：搭建小程序开发环境，项目目录介绍

红太狼 2023-01-01 08:58 140阅读 0赞

1，在[微信小程序开发官网][Link 1]下载微信小程序开发工具；

2，安装软件，创建小程序项目；

3，目录介绍：  
![在这里插入图片描述][20210101211308573.png]

**pages：** 就是微信公众号的页面；目前有两个页面分别为index和logs；  
**utils：** 就是放一些公共的文件，比如是js，css文件等（可以删除utils，无影响）；  
**app.js：** 入口文件，用于创建应用程序对象；  
**app.json：** 配置文件；  
**app.wxss：** 全局样式 （局部可以覆盖全局）；  
**project.config.json：** 项目配置文件，做一些个性化的配置，例如界面颜色，编译配置等等；  
**sitemap.json：** 一个地图，为了给小程序索引的；

## app.json的配置项 ##

**注意：  
1，json格式不能使用注释，这里的注释为解释说明的目的；  
2，在pages里面的json文件只能去修改app.json的window文件，其他不能修改**

{ 
      "pages": [  // 设置网页路径
        "pages/index/index", // 把谁放第一个谁，谁就默认被首先加载
        "pages/logs/logs"
      ],
      "window": {   // 设置默认页面的窗口表现
        "navigationBarBackgroundColor": "#ffffff",  // 顶部背景颜色
      	"navigationBarTextStyle": "black",   // 顶部字体颜色
      	"navigationBarTitleText": "微信接口功能演示",  // 顶部字体
      	"backgroundColor": "#eeeeee",  // 设置窗口的背景颜色，并非页面的背景色，换句话说就是下拉刷新的时候底下的背景色
      	"backgroundTextStyle": "light",  // 只能取 "light/dark" 下拉刷新的时候，有三个小点，这三个小点的前景色是什么颜色
      	"enablePullDownRefresh": true,  // 启用下拉刷新 
        "onReachBottomDistance": 50    // 页面上拉后距离底下的距离 50px
      },
      "debug": true,    // 开始应用调试模式，在console里面进行实时查看 
      "tabBar": {   // 底部 tab 表现
      	"color": "#444", // 字体颜色
      	"selectedColor": "#219bf3",  // 点击高亮
      	"backgroundColor": "#e0e0e0",  // 背景颜色
      	"borderStyle": "white",   // 白色边框
      	"position": "bottom",     // 导航栏在底部
        "list": [{ 
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "XXXXXX", // 目录和pages 同一目录下
          "selectedIconPath": "XXXXXXX"  // 图片点击高亮
        }, { 
          "pagePath": "pages/logs/index",
          "text": "日志"，
          "iconPath": "XXXXXX", 
          "selectedIconPath": "XXXXXXX"
        }]
      },
      "networkTimeout": {   // 设置网络超时
        "request": 10000,
        "downloadFile": 10000
      },
      "navigateToMiniProgramAppIdList": [
        "wxe5f52902cf4de896"
      ]
    }

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[20210101211308573.png]: /images/20221120/256d0b2895e64b52965161ff3d297f90.png