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} 被点击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
*/flutter uniapp 哪个好
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、AP P
"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
"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":"跑马灯"
}
}]
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。