json配置可以分为:
1、app.json
2、page.json
一、app.json
app.json文件用来对微信小程序进行全局配置
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
//调试快捷键:将鼠标点击到需要调试的页面,按住Alt同时按上键,这时,需要调试的页面就会一行一行的向上移动,直到首页
"window": {
"navigationBarBackgroundColor":"#000000",//导航栏背景颜色
"navigationBarTextStyle":"black",//导航栏标题颜色,仅支持white和black
"navigationBarTitleText": "XXX",//导航栏标题文字内容
"backgroundColor":"#ffffff",//窗口的背景色
"backgroundTextStyle":"dark",//下拉 loading 的样式,仅支持 dark / light
"enablePullDownRefresh":true,//是否全局开启下拉刷新,true或false
"onReachBottomDistance":"50px";//页面上拉触底事件触发时距页面底部距离,单位为px。
},
"tabBar": {
"color":"",//文字默认颜色
"selectedColor":"",//文字选中时的颜色
"backgroundColor":"",tab的背景色
"borderStyle":"",//tabbar上边框的颜色, 仅支持 black / white
"position":"",//tabBar的位置,仅支持 bottom / top
"list": [
//最少2个、最多5个 tab
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"XXXX",
"selectedIconPath":"XXX"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
"iconPath":"XXXX",
"selectedIconPath":"XXX"
}]
},
//其中 list 接受一个数组,只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个对象
"networkTimeout": {
"request": 60000,//单位毫秒,默认60000
"uploadFile":60000,//单位毫秒,默认60000
"downloadFile": 60000//单位毫秒,默认60000
}
}
二、page.json
{
"navigationBarBackgroundColor": "#ffffff",//导航栏背景颜色
"navigationBarTextStyle": "black",//导航栏标题颜色,仅支持 black / white
"navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容
"backgroundColor": "#eeeeee",//窗口的背景色
"backgroundTextStyle": "light",//下拉 loading 的样式,仅支持 dark / light
"enablePullDownRefresh":true,//是否全局开启下拉刷新
"onReachBottomDistance":"50px",//页面上拉触底事件触发时距页面底部距离,单位为px。
"disableScroll":false//设置为 true 则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json 中设置该项
}
//page.json中不存在window直接写{}然后在里面更改就行,page.json会覆盖app.json中的设置
三、下拉刷新和上拉触底
1>onPullDownRefresh()
监听用户下拉刷新事件。
需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
2>onReachBottom()
监听用户上拉触底事件。
可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间,本事件只会被触发一次。
四、下拉刷新代码
1》首先子页面的.json里面:
"enablePullDownRefresh": true;
2》然后.js里面:
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
}
//setTimeout(code,millisec);
//方法用于在指定的毫秒数**后**调用函数或计算表达式。
//可以较为直观的观察到加载过程
}
五、设置页面标题
1>静态设置
在.json中设置
"navigationBarTitleText": "XXXXX",
2>动态设置
在.js中
wx.setNavigationBarTitle({
title: '当前页面'
})
//动态设置优先级高于静态设置