houyi-uniapp/App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			
		},
		onShow: function() {
			console.log('App Show')
			
			const updateManager = uni.getUpdateManager();
			
			updateManager.onCheckForUpdate(function(res) {
				// 请求完新版本信息的回调
			});
			
			updateManager.onUpdateReady(function(res) {
				uni.showModal({
					title: '更新提示',
					content: '新版本已经准备好，是否重启应用？',
					success(res) {
						if (res.confirm) {
							// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
							updateManager.applyUpdate();
						}
					}
				});
			});
			
			updateManager.onUpdateFailed(function(res) {
				// 新的版本下载失败
			});
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>


<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
	@import "@/com/index.scss";
	
	.grid-text-mini {
		font-size: 28rpx;
		color: #4e5458;
	}

	.grid-text {
		font-size: 30rpx;
		color: #4e5458;
	}

	.xkl-clear-btn::after {
		border: none;
	}

	.xkl-clear-btn {
		position: relative;
		display: block;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border-radius: 0;
		font-size: 28rpx;
		text-align: center;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #222222;
		background-color: #fff;
	}

	.xkl-com-bg {
		padding: 0 30rpx;
		height: 100%;
		min-height: 100vh;
		background-color: #F7F7F7;
	}

	// .u-flex {
	// 	@include vue-flex(row);
	// }

	// .u-flex-x {
	// 	@include vue-flex(row);
	// }

	// .u-flex-y {
	// 	@include vue-flex(column);
	// }

	// .u-flex-xy-center {
	// 	@include vue-flex(row);
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// .u-flex-x-center {
	// 	@include vue-flex(row);
	// 	justify-content: center;
	// }

	// .u-flex-y-center {
	// 	@include vue-flex(column);
	// 	justify-content: center;
	// }


	// flex布局
	.u-flex,
	.u-flex-row,
	.u-flex-x {
		@include flex;
	}

	.u-flex-y,
	.u-flex-column {
		@include flex(column);
	}

	.u-flex-x-center {
		@include flex;
		justify-content: center;
	}

	.u-flex-xy-center {
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.u-flex-y-center {
		@include flex;
		align-items: center;
	}

	.u-flex-x-left {
		@include flex;
	}

	.u-flex-x-reverse,
	.u-flex-row-reverse {
		flex-direction: row-reverse;
	}

	.u-flex-y-reverse,
	.u-flex-column-reverse {
		flex-direction: column-reverse;
	}

	/* #ifndef APP-NVUE */
	// 此处为vue版本的简写，因为nvue不支持同时作用于两个类名的样式写法
	// nvue下只能写成class="u-flex-x u-flex-x-reverse的形式"
	.u-flex.u-flex-reverse,
	.u-flex-row.u-flex-reverse,
	.u-flex-x.u-flex-reverse {
		flex-direction: row-reverse;
	}

	.u-flex-column.u-flex-reverse,
	.u-flex-y.u-flex-reverse {
		flex-direction: column-reverse;
	}

	// 自动伸缩
	.u-flex-fill {
		flex: 1 1 auto
	}

	// 边界自动伸缩
	.u-margin-top-auto,
	.u-m-t-auto {
		margin-top: auto !important
	}

	.u-margin-right-auto,
	.u-m-r-auto {
		margin-right: auto !important
	}

	.u-margin-bottom-auto,
	.u-m-b-auto {
		margin-bottom: auto !important
	}

	.u-margin-left-auto,
	.u-m-l-auto {
		margin-left: auto !important
	}

	.u-margin-center-auto,
	.u-m-c-auto {
		margin-left: auto !important;
		margin-right: auto !important
	}

	.u-margin-middle-auto,
	.u-m-m-auto {
		margin-top: auto !important;
		margin-bottom: auto !important
	}

	/* #endif */

	// 换行
	.u-flex-wrap {
		flex-wrap: wrap;
	}

	// 反向换行
	.u-flex-wrap-reverse {
		flex-wrap: wrap-reverse;
	}

	// 主轴起点对齐
	.u-flex-start {
		justify-content: flex-start
	}

	// 主轴中间对齐
	.u-flex-center {
		justify-content: center
	}

	// 主轴终点对齐
	.u-flex-end {
		justify-content: flex-end
	}

	// 主轴等比间距
	.u-flex-between {
		justify-content: space-between
	}

	// 主轴均分间距
	.u-flex-around {
		justify-content: space-around
	}

	// 交叉轴起点对齐
	.u-flex-items-start {
		align-items: flex-start
	}

	// 交叉轴中间对齐
	.u-flex-items-center {
		align-items: center
	}

	// 交叉轴终点对齐
	.u-flex-items-end {
		align-items: flex-end
	}

	// 交叉轴第一行文字基线对齐
	.u-flex-items-baseline {
		align-items: baseline
	}

	// 交叉轴方向拉伸对齐
	.u-flex-items-stretch {
		align-items: stretch
	}


	// 以下属于项目(子元素)的类

	// 子元素交叉轴起点对齐
	.u-flex-self-start {
		align-self: flex-start
	}

	// 子元素交叉轴居中对齐
	.u-flex-self-center {
		align-self: center
	}

	// 子元素交叉轴终点对齐
	.u-flex-self-end {
		align-self: flex-end
	}

	// 子元素交叉轴第一行文字基线对齐
	.u-flex-self-baseline {
		align-self: baseline
	}

	// 子元素交叉轴方向拉伸对齐
	.u-flex-self-stretch {
		align-self: stretch
	}

	// 多轴交叉时的对齐方式

	// 起点对齐
	.u-flex-content-start {
		align-content: flex-start
	}

	// 居中对齐
	.u-flex-content-center {
		align-content: center
	}

	// 终点对齐
	.u-flex-content-end {
		align-content: flex-end
	}

	// 两端对齐
	.u-flex-content-between {
		align-content: space-between
	}

	// 均分间距
	.u-flex-content-around {
		align-content: space-around
	}

	// 全部居中对齐
	.u-flex-middle {
		justify-content: center;
		align-items: center;
		align-self: center;
		align-content: center
	}

	// 是否可以放大
	.u-flex-grow {
		flex-grow: 1
	}

	// 是否可以缩小
	.u-flex-shrink {
		flex-shrink: 1
	}
</style>