uniapp 内使用 nvue 做原生标题

本贴最后更新于 1757 天前,其中的信息可能已经沧海桑田

nvue 页面只能使用 vue 的生命周期,uniapp 生命周期 api 支持部分,css 样式只支持 flex,很多 css 样式不支持

<template>
	<div class="controls-top" ref="controlsTop">
		<div class="title"><text class="text">{{title}}</text></div>
		<div class="fanhui" @tap="back"><text class="ios-icon">&#xe60a;</text></div>
		<div class="top-right1">
			<div class="power-view">
				<div class="power-box">
					<div class="power-header"></div>
					<div class="power-body"><div class="power-level" :style="{ width: `${16 * level}px`, backgroundColor: '#fff' }"></div></div>
				</div>
			</div>
		</div>
		<div class="top-right2">
			<text class="ios-sm-title">{{nowTime}}</text>
		</div>
	</div>
</template>

<script>
const animation = weex.requireModule('animation');
const modal = weex.requireModule('modal');
export default {
	data() {
		return {
			level:0,
			nowTime:"00:00",
			title:'',
			timer:null,
			platform:null
		}
	},
	beforeCreate() {
		// #ifdef APP-PLUS-NVUE
		var domModule = weex.requireModule('dom');
		domModule.addRule('fontFace', {
			fontFamily: 'texticons',
			src: "url('../../../static/text-icon.ttf')"
		});
		// #endif
	},
	created(){
		uni.getSystemInfo({
			success: (e) => {
				// #ifndef MP
				this.platform = e.platform
				// #endif
			}
		})
	},
	mounted() {
		this.getLevel()
		this.timer = setInterval(()=>{
			this.nowTime = this.getNowTime()
		},1000)
		uni.$on("videoTitileShow",()=>{
			this.nowTime = this.getNowTime()
			this.animateControls(0,this.$refs.controlsTop)
		})
		uni.$on("videoTitileHide",()=>{
			this.animateControls(-40,this.$refs.controlsTop)
		})
		uni.$on("videoTitileChange",(title)=>{
			this.title = title
		})
	},
	destroyed() {
		uni.$off("videoTitileShow")
		uni.$off("videoTitileHide")
		uni.$off("videoTitileChange")
		clearInterval(this.timer)
	},
	methods: {
		getLevel(){
			let promise = new Promise((resolve,reject)=>{
				//#ifdef APP-PLUS-NVUE
				if(this.platform == 'android'){
					//注意,安卓需要配置下manifest.json文件,打开后,进入模块权限配置,在右侧的Android权限设置里勾选上android.permission.BATTERY_STATS
					var main = plus.android.runtimeMainActivity();  
					var Intent = plus.android.importClass('android.content.Intent');  
					var recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {  
					        onReceive: function(context, intent) {  
					        var action = intent.getAction();  
					        if (action == Intent.ACTION_BATTERY_CHANGED) {  
					            let level   = intent.getIntExtra("level", 0); //电量  
					            var voltage = intent.getIntExtra("voltage", 0); //电池电压  
					            var temperature = intent.getIntExtra("temperature", 0); //电池温度  
								resolve(level/100)
					        }  
					     }  
					 });  
					var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
					var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);  
					main.registerReceiver(recevier, filter);
				}else if(this.platform == 'ios'){
					var UIDevice = plus.ios.import("UIDevice");
					var dev = UIDevice.currentDevice();  
					if (!dev.isBatteryMonitoringEnabled()) {  
					    dev.setBatteryMonitoringEnabled(true);  
					}  
					let level =dev.batteryLevel();  
					
					resolve(level)
				}
				//#endif
				//#ifdef MP-WEIXIN
				wx.getBatteryInfo({
					success: function(e) {
						resolve(e.level)
					}
				})
				//#endif
			})
			promise.then(res=>{
				this.level = res
			})
		},
		getNowTime(){
			var now = new Date();
			var hh = now.getHours();            //时
			if(hh<10) hh = "0" + hh;
			var mm = now.getMinutes();          //分
			if(mm<10) mm = "0" + mm;  
			return `${hh}:${mm}`; 
		},
		back(){
			this.animateControls(-40,this.$refs.controlsTop)
			uni.$emit("exitFullscreen")
		},
		animateControls(distance,el){
			animation.transition(el, {
				styles: {
					transform: `translate(0px, ${distance}px)`,
				},
				duration: 350, //ms
				timingFunction: 'ease',
				delay: 0 //ms
				}, () => {
					
				}
			)
		}
	}
};
</script>

<style>
.controls-top {
	/* width: 750upx; */
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	position: relative;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
	height: 40px;
	transform: translateY(-40px);
	align-items: center;
	justify-content: space-between;
	text-align: left;
	padding: 0 40px 0 40px;
}
.ios-icon {
	font-size: 18px;
	color: #fff;
	font-family: texticons;
}
.title {
	/* width: 750upx; */
	height: 40px;
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	position: absolute;
	left: 40px;
	right: 80px;
	top: 0px;
	justify-content: center;
	text-align: left;
	align-items: flex-start;
	/* background-color: #007aff; */
	padding: 0 10px 0 10px;
}
.text {
	color: #fff;
	font-size: 14px;
}
.fanhui {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
}
.top-right1 {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	font-size: 12px;
	color: #fff;
	position: absolute;
	top: 14px;
	right: 2px;
	width: 40px;
}
.top-right2 {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	font-size: 12px;
	color: #fff;
	position: absolute;
	top: 12px;
	right:38px;
	width: 40px;
}
.power-view {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
}
.power-box {
	flex-direction: row;
	align-items: center;
}
.power-header {
	height: 4px;
	width: 2px;
	background-color: #fff;
}
.power-body {
	height: 9px;
	width: 20px;
	border-width: 1px;
	border-color: #fff;
	padding: 1px;
	flex-direction: row;
	justify-content: flex-end;
}
.power-level {
	height: 5px;
}
.ios-sm-title{
	font-size: 10px;
	color: #fff;
}
</style>

image.png

pages.josn 配置 nvue
image.png

vue 页面里获取 nvue 组件,使用

this.videoTitleNvue = uni.getSubNVueById('title');
this.videoTitleNvue.setStyle({
	top: 44 + uni.getSystemInfoSync().statusBarHeight + 'px',
	left: '0px',
	width: '100%',
	height: '40px'
});
this.videoTitleNvue.show('auto', 0, function() {
	// 打开后进行一些操作...
	//
});

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
gjTool
欢迎博客互链 https://www.gjtool.cn/ 武汉

推荐标签 标签

  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 4 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 383 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    338 引用 • 705 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 53 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 533 回帖 • 778 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    565 引用 • 3532 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 741 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 127 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 2 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 659 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 407 关注
  • 996
    13 引用 • 200 回帖 • 2 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 123 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 3 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 623 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 127 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    124 引用 • 169 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 4 关注