uniapp——框架整理及分析总结
一、生命周期汇总
/**
* 页面生命周期 - 监听页面加载
* @param {Object} options 传递过来的参数对象
*/
async onLoad(options) {},
/**
* 页面生命周期 - 监听页面显示（每次显示时都会触发）
*/
async onShow() {},
/**
* 页面生命周期 - 监听页面初次渲染完成
*/
async onReady() {
// 加载数据
this.loadData();
},
/**
* 页面生命周期 - 监听页面隐藏
*/
async onHide() {},
/**
* 页面生命周期 - 监听页面卸载
*/
async onUnload() {},
/**
* 页面生命周期 - 监听窗口尺寸变化
* App、微信小程序
*/
async onResize() {},
/**
* 页面生命周期 - 监听用户下拉动作
*/
async onPullDownRefresh() {
// 停止下拉刷新
uni.stopPullDownRefresh();
},
/**
* 页面生命周期 - 页面上拉触底事件的处理函数
*/
async onReachBottom() {},
/**
* 页面生命周期 - 点击 tab 时触发
* 微信小程序、百度小程序、H5、App（自定义组件模式）
* @param {String} event.index 被点击tabItem的序号，从0开始
* @param {String} event.pagePath 被点击tabItem的页面路径
* @param {String} event.text 被点击tabItem的按钮文字
*/
async onTabItemTap(event) {},
/**
* 页面生命周期 - 用户点击右上角分享
* 微信小程序、百度小程序、字节跳动小程序、支付宝小程序
*/
async onShareAppMessage() {},
/**
* 页面生命周期 - 监听页面滚动
* @param {Number} event.scrollTop 页面在垂直方向已滚动的距离（单位px）
*/
async onPageScroll(event) {},
/**
* 页面生命周期 - 监听原生标题栏按钮点击事件
* 5+App、H5
* @param {Number} event.index 原生标题栏按钮数组的下标
*/
async onNavigationBarButtonTap(event) {},
/**
* 页面生命周期 - 监听页面返回
* App、H5
* @param {String} event.from 触发返回行为的来源：'backbutton'——左上角导航栏按钮及安卓返回键；'navigateBack'——uni.navigateBack() 方法
* 注意事项：
* - 只有在该函数中返回值为 true 时，才表示不执行默认的返回，自行处理此时的业务逻辑；
* - 不返回或返回其它值，均会执行默认的返回行为；
* - H5 平台，顶部导航栏返回按钮支持 onBackPress()，浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()；
*/
async onBackPress(event) {},
/**
* 页面生命周期 - 监听原生标题栏搜索输入框输入内容变化事件
* App、H5
*/
async onNavigationBarSearchInputChanged() {},
/**
* 页面生命周期 - 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的 "搜索" 按钮时触发
* App、H5
*/
async onNavigationBarSearchInputConfirmed() {},
/**
* 页面生命周期 - 监听原生标题栏搜索输入框点击事件
* App、H5
*/
async onNavigationBarSearchInputClicked() {},
二、pages.json 配置文件的属性值
/**
* pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
*/
{
// 设置默认页面的窗口表现，用于设置应用的状态栏、导航条、标题、窗口背景色等
"globalStyle": {
"navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色（同状态栏背景色）。默认值："#F7F7F7"。平台差异说明：APP与H5为#F7F7F7，小程序平台请参考相应小程序文档
"navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white。默认值："white"
"navigationBarTitleText": "uni-app", // 导航栏标题文字内容
"navigationStyle": "default", // 导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏。平台差异说明：微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
"backgroundColor": "#F8F8F8", // 窗口的背景色。默认值："#FFFFFF"。平台差异说明：微信小程序
"backgroundTextStyle": "dark", // 下拉 loading 的样式，仅支持 dark / light。默认："dark"。平台差异说明：微信小程序
"enablePullDownRefresh": true, // 是否开启下拉刷新。默认：false
"onReachBottomDistance": 50, // 页面上拉触底事件触发时距页面底部距离，单位只支持px。默认：50
"backgroundColorTop": "#FFFFFF", // 顶部窗口的背景色（bounce回弹区域）。默认值："#FFFFFF"。平台差异说明：仅 iOS 平台
"backgroundColorBottom": "#FFFFFF", // 底部窗口的背景色（bounce回弹区域）。默认值："#FFFFFF"。平台差异说明：仅 iOS 平台
"titleImage": "", // 导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址。默认：""。平台差异说明：支付宝小程序、H5、APP
"transparentTitle": "none", // 导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明。默认："none"。平台差异说明：支付宝小程序、H5、APP
"titlePenetrate": "NO", // 导航栏点击穿透。默认："NO"。平台差异说明：支付宝小程序、H5
"pageOrientation": "portrait", // 屏幕旋转设置，仅支持 auto / portrait。默认："portrait"。平台差异说明：微信小程序
"animationType": "pop-in", // 窗口显示的动画效果。默认："pop-in"。可选的值：slide-in-right、slide-in-left、slide-in-top、slide-in-bottom、pop-in、fade-in、zoom-out、zoom-fade-out、none。平台差异说明：APP
"animationDuration": 300, // 窗口显示动画的持续时间，单位为 ms。默认：300。平台差异说明：APP
"app-plus": {}, // 设置编译到 App 平台的特定样式。平台差异说明：APP
"h5": {}, // 设置编译到 H5 平台的特定样式。平台差异说明：H5
"mp-alipay": {}, // 设置编译到支付宝小程序的特定样式。平台差异说明：支付宝小程序
"mp-weixin": {}, // 设置编译到微信小程序的特定样式。平台差异说明：微信小程序
"mp-baidu": {}, // 设置编译到百度小程序的特定样式。平台差异说明：百度小程序
"mp-toutiao": {}, // 设置编译到字节跳动小程序的特定样式。平台差异说明：字节跳动小程序
"mp-qq": {}, // 设置编译到QQ小程序的特定样式。平台差异说明：QQ小程序
"usingComponents": {} // 引用小程序组件。平台差异说明：微信小程序、App
},
// 设置页面路径及窗口表现。数组中第一项表示应用启动页
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}, {
"path": "pages/biaofun-region/biaofun-region",
"style": {
"navigationBarTitleText": "省市区选择器"
}
}, {
"path": "pages/biaofun-datetime-picker/biaofun-datetime-picker",
"style": {
"navigationBarTitleText": "日期时间选择器"
}
}, {
"path": "pages/biaofun-waterfall/biaofun-waterfall",
"style": {
"navigationBarTitleText": "瀑布流布局"
}
}, {
"path": "pages/biaofun-swiper-list/biaofun-swiper-list",
"style": {
"navigationBarTitleText": "滑动列表",
"enablePullDownRefresh": false
}
}, {
"path": "pages/biaofun-loading-more/biaofun-loading-more",
"style": {
"navigationBarTitleText": "加载更多"
}
}, {
"path": "pages/biaofun-marquee/biaofun-marquee",
"style": {
"navigationBarTitleText": "跑马灯"
}
}]
}