vue项目5+app项目实现顶部状态栏

参考文档 http://www.html5plus.org/doc/h5p.html#

app.vue获取状态栏高度

<template>
	<div id="app" class="app" :class="{'has-nav-footer':$route.meta.navFooterShow}">
		<transition :name="transitionName">
			<keep-alive :include="keepAliveInclude">
				<router-view class="router-view" />
			</keep-alive>
		</transition>
		<!-- 底部导航 -->
		<!-- <transition name='slide'> -->
		<nav-footer v-show="$route.meta.navFooterShow" />
		<!-- </transition> -->
	</div>
</template>

<script>
	import NavFooter from "@components/NavFooter";
	export default {
		name: 'App',
		components: {
			NavFooter
		},
		data() {
			return {
				transitionName: '',
				keepAliveInclude: ["home", "exercises", "course", "mine"],
				statusBarHeight:0,
				isImmersedStatusbar:false,
			}
		},
		created() {
			let _this = this;
			// 只有5+APP 才会执行这段代码
			document.addEventListener("plusready", function() {
				plus.navigator.setStatusBarStyle('dark');//状态栏文字颜色全局默认为黑色，如需单独设置复制进独立的vue页面中
				_this.statusBarHeight = Number.isFinite(plus.navigator.getStatusbarHeight()) ? plus.navigator.getStatusbarHeight() : 28;//状态栏高度,判断是否是数字，不是使用默认高度28
				_this.isImmersedStatusbar = plus.navigator.isImmersedStatusbar();//是否为沉浸式
				_this.addStyleElement();
			}, false);
		},
		methods: {
			//存储手机状态栏高度;
			getStatusBarHeight() {
				if (this.isImmersedStatusbar) {
					this.$store.commit('setStatusBarHeight', this.statusBarHeight)
					return this.statusBarHeight;
				} else {
					let statusBarHeight = 0;
					this.$store.commit('setStatusBarHeight', statusBarHeight)
					return statusBarHeight;
				}
			},
			//添加样式
			addStyleElement() {
				let statusBarHeight = this.getStatusBarHeight();
				let head = document.head || document.getElementsByTagName('head')[0];
				let styleElement = document.createElement('style');
				let css =
					`.page-header{padding-top:${statusBarHeight}px}.page-header .status-bar{height:${statusBarHeight}px}.page-header+.page-body{border-top:${statusBarHeight}px solid transparent}}`;
				styleElement.type = 'text/css';
				if (styleElement.styleSheet) {
					styleElement.styleSheet.cssText = css;
				} else {
					styleElement.appendChild(document.createTextNode(css))
				}
				head.appendChild(styleElement);
			}
		},
		watch: {
			'$route'(toPage, fromPage) {
				let toPageRouteLevel = toPage.meta.routeLevel;
				let fromPageRouteLevel = fromPage.meta.routeLevel;
				if (toPageRouteLevel == fromPageRouteLevel || fromPage.fullPath == '/') {
					//路由层级相同,或者是首次加载;
					this.transitionName = '';
				} else {
					this.transitionName = toPageRouteLevel > fromPageRouteLevel ? 'slideLeft' : 'slideRight'
				}
			}
		}
	}
</script>

<style lang="less">
	@import './assets/css/common.less';
</style>
<style lang="less" scoped>
	.app {
		height: 100%;
		position: relative;

		.router-view {
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			right: 0;

			&.slideRight-leave-to,
			&.slideLeft-enter {
				transform: translateX(100%);
			}

			&.slideRight-enter-active,
			&.slideRight-leave-active,
			&.slideLeft-enter-active,
			&.slideLeft-leave-active {
				transition: transform .3s ease-out;
			}

			&.slideRight-enter,
			&.slideLeft-leave-to {
				transform: translateX(-100%);
			}
		}

		.nav-footer-c {

			&.slide-enter,
			&.slide-leave-to {
				transform: translateX(-100%);
			}

			&.slide-enter-active,
			&.slide-leave-active {
				transition: transform .3s ease-out;
			}

			&.slide-enter-to,
			&.slide-leave {
				transform: translateX(0);
			}
		}

		&.has-nav-footer {
			.router-view {
				height: calc(100% - 98px);
			}
		}
	}
</style>

每个页面按照固定结构

<template>
	<div class="home">
		<div class="page-header van-nav-bar--box">
			<div class="status-bar"></div>
			<van-nav-bar>
				<div class="nav-bar__title toe" slot="title">首页</div>
			</van-nav-bar>
		</div>
		<div class="page-body">
			<div class="page-body-inner ">
				//页面内容
				<van-button type="primary" @click="btn" block>预览图片，并保存到系统相册</van-button>
				
				<van-button type="primary" @click="btn2" block>弹出系统日期选择对话框</van-button>
				
				<van-button type="primary" @click="btn3" block>弹出系统时间选择对话框</van-button>
				
				<van-button type="primary" @click="btn4" block>弹出系统确认对话框</van-button>
				
				<van-button type="primary" @click="btn5" block>清除缓存111</van-button>
			</div>
		</div>


	</div>
</template>
<script>
	export default {
		components: {},
		data() {
			return {}
		},
		mounted() {
			localStorage.setItem('first_falg', true)
		},
		methods: {
			btn() {
				let _this = this;
				plus.nativeUI.previewImage([
					"http://www.qc888.info/uploads/share/QJESUK.png",
					"http://img-cdn-qiniu.dcloud.net.cn/newpage/images/logo4.png"
				], {
					current: 0,
					loop: true,
					onLongPress: function(e) { // 预览界面长按显示ActionSheet
						let url = e.url;
						console.log('url: ' + e.url);
						let bts = [{
							title: "保存"
						}];
						plus.nativeUI.actionSheet({
								title: "保存图片",
								cancel: "取消",
								buttons: bts
							},
							function(e) {
								if (e.index == 1) {
									let dtask = plus.downloader.createDownload(url, {}, function(d, status) {
										if (status == 200) {
											//下载完成：d.filename，保存文件到系统相册中
											plus.gallery.save(d.filename, function() {
												plus.nativeUI.toast('图片已保存');
											});
										} else {
											console.log("失败: " + status);
										}
									});
									dtask.start(); //开始下载
								} else {
									//取消
								}
							}
						);
					}
				});
			},
			btn2(){
				var styles = {};
				styles.title = "请选择日期："; // 显示标题
				plus.nativeUI.pickDate(function(e){
					var d=e.date;
					console.log( "选择的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
				}, function(e){
					console.log( "未选择日期："+e.message );
				}, styles);
			},
			btn3(){
				plus.nativeUI.pickTime(function(e){
					var d=e.date;
						console.log("选择的时间："+d.getHours()+":"+d.getMinutes());
					}, function(e){
						console.log("未选择时间："+JSON.stringify(e));
				});
			},
			btn4(){
				plus.nativeUI.confirm("内容", function(e){
					console.log((e.index==0 ? "确认" : "取消") + e.index);
					},
					{"title":"标题",
						"buttons":["确认","取消"],
						"verticalAlign":"center"
					}
				);
			},
			btn5(){
				localStorage.clear()
			},
		},
	}
</script>
<style scoped lang="less">
	.home {
		/deep/.page-header {
			.status-bar {
				background: #0294FF;
			}
		}

		/deep/.page-body {
			.page-body-inner {
				button{
					margin-top: 20px;
				}
			}
		}
	}
</style>