刚做微信小程序的心得

一开始做很难，在网上找了些视频，看了一天左右，一开始有点蒙比，然后熟悉了目录。
首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss.
先从这三个文件说起.
app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量.
app.json 这个文件可以对小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多tab等.
app.wxss 是小程序的公共样式表.(为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改）。
首先说的是配置文件app.json.下面是官方给出的例子.

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
pages它的作用是配置小程序的页面,这个配置项是必填的,它接受一个数组,里面的每一项都是字符串,从上面给出的代码: 
"pages": [ 
"pages/index/index", 
"pages/logs/index" 
] 
可以看出,每一项分别对应的都是实现文件的路径以及他的文件名. 
注意:这个配置里面的第一行配置是它的初始页面,例如上面代码的初始页面就是index

window

这个配置项是用来设置小程序的状态栏、导航条、标题、窗口背景色。

他给出了六个属性(navigationBarBackgroundColor(HexColor), navigationBarTextStyle(String-(black,white)), navigationBarTitleText(String), backgroundColor(HexColor), backgroundTextStyle(String-(dark,light)), enablePullDownRefresh(Boolean)),开发者可以根据自己的需求来进行配置.
navigationBarBackgroundColor 它是用来设置导航栏背景颜色,这个属性要输入的是十六进制颜色值.
navigationBarTextStyle 它是用来导航栏标题颜色的,它的输入类型是字符串(String),但是现在官网给出的文档目前仅支持(black和white)这两种颜色.
navigationBarTitleText 这个属性是显示导航栏标题内容的,开发者可以根据自己的需要来进行设置.
backgroundColor 这个属性是设置窗口的背景色的,它需要输入的也是十六进制颜色值的.
backgroundTextStyle 这个属性我的理解是设置窗口内容的样式的,官方给出的标准说明是下拉背景字体、loading 图的样式,这个属性同navigationBarTextStyle属性一样目前仅支持两种颜色(dark和light).
enablePullDownRefresh 这个属性是设置是否开启下拉刷新,默认是开启的,注意: 在这个配置文件(app.json)中如果关闭了下拉刷新,当你在你自己开发的页面中想要设置下拉刷新也是行不通的,也就是说如果你想要在以后页面中使用下拉刷新这个功能,就必须保证这个配置文件中的这一项设置是打开的. 
{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
} 

显示效果是这样的

tabBar

这个配置项是用来配置页面底部的tab栏的,开发者可以根据自己的需求来进行配置.
注意: tabBar是一个数组,只能配置最少2个,最多5个,而且tab栏的顺序是按照数组的排序来的.
tabBar官方给出了一下五个属性(color(HexColor), selectedColor(HexColor), backgroundColor(HexColor), borderStyle(String), list(Array) ).
接下来说说我对这五个属性的理解:
color 设置tab上的文字默认颜色
selectedColor 设置tab上的文字选中的颜色
backgroundColor 设置tab的背景颜色
borderStyle 设置边框的颜色,现在仅支持(black和white)
上面这四个属性就是按照官方给出的API来设置就可以,下面说一下list属性.list属性接受的是一个数组(Array),在list下面配置的每一项都是一个对象,他们都有以下这四个属性(pagePath(String), text(String), iconPath( String), selectedIconPath(String)).
pagePath 这个定义的是页面的路径,但是这个属性定义的路径必须是在pages上定义过的.
text 设置的是按钮上的文字
iconPath 是定义icon图片的路径,这个属性定义的图片大小不超过40kb
selectedIconPath 定义的是当选中按钮之后显示的图片,同样图片的大小不能超过40kb.
官方显示效果是这样的