微信小程序--一--文件夹及内容解析

js学习

以后坚持一日一更，和大家分享我每天学习的成果及经验，让想要学习的小伙伴少走弯路。
1、微信小程序目录结构
2、.json文件配置

一、微信小程序目录结构

小程序主体部分三个文件

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表
utils	是	存放工具的函数，主要就是为了达到代码复用的目的
project.config.json	是	微信开发者工具的配置信息
pages	是	存放小程序的所有页面，每个页面主要就是由四个文件组成

pages，一个小程序页面由四个文件组成

文件	必需	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面配置
json	否	页面样式表

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名

二、.json文件配置

示例：

{
  /* 有哪一个就可以查看哪一个，哪一个在前面就显示哪一个 */
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  /* 页面显示 */
  "window": {
    /* 页面向下滑显示的三个小点样式 ，刷新*/
    "backgroundTextStyle": "dark",
    /* 导航条的背景颜色 */
    "navigationBarBackgroundColor": "#11eeee",
    /* 标题 */
    "navigationBarTitleText": "YKenan",
    "navigationBarTextStyle": "black",
    /* 页面向下滑显示的背景颜色 */
    "backgroundColor": "#11ee11",
    /* 是否显示页面向下滑，刷新 */
    "enablePullDownRefresh": true
  },
  "sitemapLocation": "sitemap.json",
  /* 底部显示 */
  "tabBar": {
    /* 字体颜色 */
    "color": "#888",
    /* 选中的字体颜色 */
    "selectedColor": "#23ed88",
    /* 背景颜色 */
    "backgroundColor": "#44aaaa55",
    /* 显示位置 */
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        /* 图标的路径 */
        "iconPath":"resources/1.png",
        /* 被选中的图标的路径 */
        "selectedIconPath":"resources/2.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        /* 图标的路径 */
        "iconPath": "resources/1.png",
        /* 被选中的图标的路径 */
        "selectedIconPath": "resources/2.png"
      }
    ]
  },
  /* 设置超时时间 */
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

pages：存放页面文件路径
window：存放顶部导航条的样式及显示文字
tabBar：底部栏，最少两个最多五个，底部导航
基本结构：

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils