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": "跑马灯"
		}
	}]
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章