微信小程序页面结构与全局配置

微信小程序的结构

项目的文件结构

    微信小程序的根目录下通常包含 app.js、app.json、app.wxss 这三个必不可少的主体文件，project.config.json项目配置文件，sitemap.json微信索引文件，以及pages文件夹。

• app.json：小程序的公共设置，可以对小程序进行全局配置，决定页面文件的路径（pages）、窗口表现（window）、设置标签导航（tabBar）、全局自定义组件配置（usingComponents）、指明sitemap.json的位置（sitemapLocation）等；
• app.wxss：小程序的公共样式表，可以配置整个小程序的字体、颜色、背景、图片等样式，可以在页面组件的class属性上直接使用文件中声明的样式规则；
• app.js：用来表示逻辑的JavaScript脚本文件，可以在文件中监听并处理小程序项目的生命周期、声明全局变量，还可以调试微信小程序API；
• project.config.json：使用开发者工具进行项目开发时的任何配置都会写入该文件中，当重新安装开发者工具或者更换电脑开发时，只需要导入同一个项目的代码包（包含该文件），开发者工具就能自动恢复项目的个性化配置，包括编辑器的颜色、代码上传是否自动压缩、是否启用ES6转ES5、是否检查域名等；
• sitemap.json：该文件用于配置小程序及其页面是否允许被微信索引，rules配置项指定索引规则，每项规则为一个Json对象，对象内的page属性指定页面，action属性设定该页面是否能被索引。
• pages文件夹：存放小程序的所有页面。

小程序的页面组成

    在每一个页面文件夹里都包含以下四个文件名称相同的文件。

• json文件：是该页面的配置文件，与app.json作用差不多，如设置是否使用自定义组件（usingComponents）等。如果不配置该文件则默认使用app.json内的配置，若配置该文件则会覆盖app.json文件中相关的配置项。
• wxml文件：小程序的页面结构，使用<view>、<image>、<text>等微信小程序组件或自定义组件进行页面代码的编写，通过组件可以进行绑定函数和数据交互处理。
• js文件：是页面的逻辑文件，可以监听并处理页面生命周期函数，获取小程序实例，声明并处理数据，响应页面交互事件等。
• wxss文件：页面的样式文件。如果不配置该文件则使用app.wxss中定义的样式规则；若页面定义了自己的样式文件，则会覆盖app.wxss中对相同选择器定义的样式规则。
  
  

微信小程序的全局配置

小程序的窗口表现

“window”: {
     “backgroundColor”: “#F6F6F6”,
     “backgroundTextStyle”: “light”,
     “navigationBarBackgroundColor”: “#F6F6F6”,
     “navigationBarTitleText”: “小马超速啦”,
     “navigationBarTextStyle”: “black”,
     “enablePullDownRefresh”: true
}

• backgroundColor 属性不是指页面窗口的背景颜色，而是下拉当前页面后出现的刷新页面的窗口背景色；backgroundTextStyle 属性则是指下拉刷新窗口的三个点点的颜色（可选值为dark和light）。这两个属性都需要先配置 “enablePullDownRefresh”: true 启用下拉刷新才能生效。
• navigationBarBackgroundColor 属性设置顶部导航栏的背景颜色，navigationBarTitleText 属性设置顶部导航栏的文字内容，navigationBarTextStyle 属性设置顶部导航栏的文字颜色（可选值为black和white）。
• enablePullDownRefresh 属性设置是否开启下拉刷新，可选值为true（开启）和false（关闭），默认值为false。

在json文件配置的属性颜色值除规定的颜色值外，均需要使用十六进制颜色代码表示

新建小程序页面

1. 在小程序pages文件夹下新建一个文件夹，再在文件夹内新建所需要的文件。
2. 通过app.json新建页面，在app.json文件内的的pages配置项内新增所需要的页面，此法可以自动帮你创建文件夹和四个文件（wxml、wxss、json、js）。
   
   
   注：pages配置项数组的第一项为小程序的初始页面。
   
   

tabBar标签栏

    小程序底部的tabBar标签栏的一项通常由一个小图标和描述文字组成，多个项共同组成底部的标签栏，可以在app.json文件内的tabBar进行配置。

• color属性表示未选择状态下的字体颜色；
• selectedColor属性表示已选择状态下的字体颜色；
• borderStyle属性tabBar上边框的颜色， 仅支持 black/white；
• list属性通过数组对tabBar每一项进行设置：
  • pagePath属性表示点击该项跳转的页面路径地址
  • text属性表示文字描述
  • iconPath属性表示未选择状态的icon图标路径
  • selectedIconPath属性表示已选择状态下的icon图标路径

推荐一个icon图标网站：阿里巴巴 iconfont