微信小程序之文件类型

新建好一个微信小程序工程后，会发现其有四种文件类型，分别是：

.js -------- 脚本文件：页面的交互逻辑均在此页面中进行
json ------ 配置文件：用于设置程序的配置效果
.wxml ---- 页面结构文件：书写控件，构建页面
wxss ----- 样式文件：类似于css样式，用于美化页面

以下三个文件比较重要，作下解释

app.js
app.json
app.wxss

app.js

每个小程序工程中，有且仅有一个app.js文件，用于处理程序的生命周期等，位于项目的根目录下。
生命周期函数主要有：

onLaunch: function () {
        //监听小程序初始化-小程序初始化完成时，会触发，且只会触发一次。
    },
 onShow: function () {
        //监听小程序显示-小程序启动或从后台进入前台，会触发。
    },
onHide: function () {
        //监听小程序隐藏-小程序从前台进入后台，会触发。
    },

app.json

使用app.json对程序进行全局配置，如：文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{
  "pages": [
    "pages/index/index"//可以在这里写上路径，可自动生成页面文件。
  ],
  "window": {
    "navigationBarTitleText": "Demo"//可设置窗体的背景颜色等。
  },
  "tabBar": {//底部tabBar
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/tab_income.png",//设置图片
      "selectedIconPath": "images/tab_income_selected.png"//选中后的图片
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

app.wxss

和css样式很相似，多了两个特性

尺寸单位: 主要用rpx，可以根据屏幕宽度进行自适应
样式导入：使用@import可引入外联样式表，句尾用分号隔开
如：
@import "common.wxss";