第二章-配置文件

全局配置文件

全局配置项

全局配置文件内容整体结构：

{
设置页面路径
"pages":[]，
//设置默认页面的窗口表现
"window":{},
//设置底部 tab 的表现
"tabBar":{}，
//设置网络请求API的超时时间值
"networkTimeout":{}，
//设置是否开启 debug 模式
"debug":false
}

1.psges配置项

app.json文件配置

{
  "pages": [
    "pages/news/news",
    "pages/logs/logs"
  ],
}

window配置项及其描述

在app.json中设置window配置项

"window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序window功能演示",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },

tabBar配置项及其描述

tabBar中list选项

在app.json文件设置tabBar配置

"tabBar": {
      "color":"#666666",
      "selectedColor":"#ff0000",
      "borderStyle":"black",
      "backgroundColor":"ffffff",
      "list":[
        {
          "pagePath":"pages/logs/logs",
          "iconPath": "images/6b2e7226deef74f675d79d6cf0f21a3.png",
          "selectedIconPath": "images/84c52bdd9c1f0f077507bbf367b8019.jpg",
          "text": "首页"
        },
        {
          "pagePath":"pages/news/news",
          "iconPath": "images/6b2e7226deef74f675d79d6cf0f21a3.png",
          "selectedIconPath": "images/84c52bdd9c1f0f077507bbf367b8019.jpg",
          "text": "新闻"
        }
      ]
    },

 

networkTimeout配置项

例如，为了提高网络效率，可以在app.json中使用下列超时设置：

{
  "networkTimeout":{
    "request":20000,
    "connectSocket":20000,
    "uploadFile":20000,
    "downloadFlie":20000
  }
}

页面中的window配置只需写配置项，不用写window：

{
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序window功能演示",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  }

逻辑层文件

项目逻辑文件配置项

 页面逻辑文件配置项

 在Page（）函数的参数中，可以定义当前页面的生命周期函数。页面的生命函数主要有onLoad，onShow，onReady,onHide,onUnload.

onLoad，页面加载函数，当页面加载完成后调用该函数，一个页面只会调用一次，该函数的参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>

onShow，页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次

onReady,页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。

onHide,页面隐藏函数。当页面隐藏时及当navigateTo 或小程序底部进行tab 切换时调用该函数

onUnload,页面卸载函数。当页面卸载、进行navigateBack或redirectTo 操作时，调用该函数

 

data:{
    name:'lwk',
    age:30,
    birthday:[{year:1988},{month:11},{data:18}],
    object:{hobby:'computer'},
}

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].data}}日
</view>

冒泡事件

 

 WXSS常用属性