01：微信小程序结构和配置

微信小程序，简称CX，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。跟着时代走，随波逐流，所以很有必要学习一下小程序。

1.结构

小程序跟Html5只是比较相似的，又有人说小程序本质上就是html5，优化之后的html5。来上一张图，看一下小程序的结构：

app.json文件是小程序的全局配置文件;

app.js小程序全局逻辑;

app.wxss是小程序的全局样式，其中可以引入多个样式用@import “style.css”;

每个页面由四部分构成js（接口）、wxml（视图层描述语言）、wxss（视图层描述语言）,json（页面配置）上图的pages目录下有两个页面index和logs。

注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名,重要的话说三遍，相同的路径与文件名，相同的，相同。

2.配置

小程序的全局配置在app.json里，可以配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

注意：pages里的页面需要配置一下才能访问到，不然的话访问该页面会给出提示app.json中未配置当前页面

下面来看个列子：

1.配置app.json

{
  "pages":[
    "pages/index/index",
    "pages/login/login",
    "pages/account/account"
  ],

  
  "tabBar": {
    "color": "#7c7c7c",
    "selectedColor": "#2e9ef4",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "pages/images/icon_nav_button.png",
      "selectedIconPath": "pages/images/icon_nav_button_hover.png",
      "text": "首页"
    }, {
      "pagePath": "pages/login/login",
      "iconPath": "pages/images/icon_nav_article.png",
      "selectedIconPath": "pages/images/icon_nav_article_hover.png",
      "text": "登录/注册"
    },
    {
      "pagePath": "pages/account/account",
      "iconPath": "pages/images/icon_nav_cell.png",
      "selectedIconPath": "pages/images/icon_nav_cell_hover.png",
      "text": "信息披露"
    }]
  },

  "window":{
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#black5",
    "navigationBarTitleText": "通金钱包",
    "navigationBarTextStyle":"white"
    
  },
   "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

效果图如下：

tabBar配置的是页面的页脚导航，tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。具体属性如下图：

其中每个小程序页面也可以设置自己的page.json，页面中配置项会覆盖 app.json 的 window 中相同的配置项，每个页面的名称不一样所以具体每个页面单独配置