❤ Uniapp使用四( 高阶使用配置和各种实现篇)

news2024/11/30 8:59:51

❤ Uniapp使用四( 复杂配置和各种实现篇)

uniapp引入 vant

引入方式
1、下载vant源码
方式一：从 Vant 官网首页进入 GitHub下载对应版本的压缩包,将文件解压后备用,确保下载的压缩包里有dist 文件夹

2、创建 uniapp 项目,在根目录下新建 一个文件夹wxcomponents ，将下载好的压缩包中的 dist 文件夹放到 wxcomponents 里, 推荐将 dist 重命名为 vant,

3、在根目录下App.vue中引入UI样式index.wxss，如下图

@import "/wxcomponents/vant/common/index.wxss";

4、main.js

实现配置启动页面和四个底部tab切换栏目

先放图片，开发属于底部界面tab栏目
在这里插入图片描述

配置启动页面和四个底部tab切换栏目

在这里插入图片描述

底部tab栏切换进行配置对应的界面
在这里插入图片描述

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "启动页面"
			}
		},
		{
			"path": "pages/tabBar/component",
			"style": {
				"navigationBarTitleText": "内置组件",
				"backgroundColor": "#F8F8F8"
			}
		}, {
			"path": "pages/tabBar/API",
			"style": {
				"navigationBarTitleText": "接口",
				"backgroundColor": "#F8F8F8"
			}
		}, {
			"path": "pages/tabBar/CSS",
			"style": {
				"navigationBarTitleText": "CSS",
				"backgroundColor": "#F8F8F8"
			}
		},
		{
		  "path": "pages/tabBar/template",
		  "style": {
		    "navigationBarTitleText": "模板"
		  }
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#007AFF",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"list": [{
				"pagePath": "pages/tabBar/component",
				"iconPath": "static/component.png",
				"selectedIconPath": "static/componentHL.png",
				"text": "内置组件"
			},
			{
				"pagePath": "pages/tabBar/API",
				"iconPath": "static/api.png",
				"selectedIconPath": "static/apiHL.png",
				"text": "接口"
			},
			{
				"pagePath": "pages/tabBar/CSS",
				"iconPath": "static/css.png",
				"selectedIconPath": "static/cssHL.png",
				"text": "CSS"
			},
			{
				"pagePath": "pages/tabBar/template",
				"iconPath": "static/template.png",
				"selectedIconPath": "static/templateHL.png",
				"text": "模板"
			}
		]
	},
	"uniIdRouter": {}
}

配置跳转完成以后的界面：

转的主页面
uni.switchTab({
			url:'/pages/tabBar/API'
})

实现人脸检测

搭建

进入tabBar => 下面的component界面，因为我们设置的该页面为加载页面以后的页面：

写一个人脸检测按钮：

格外注意：
uniapp的css样式和我们的平时写的css pc端样式略微不同，采用单位为rpx

（大致就是我们px的二分之一）

uniapp的全屏宽为 750rpx；

所以按钮样式为

.btnface{
		// 750 - 690 = 60
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: cadetblue;
		color: #fff;
		margin:30rpx;
		border-radius: 10rpx;
	}

为了方便，我们可以直接写一个固定的页面：方便调试
在这里插入图片描述

查看效果 不用想我们大致也能猜到 ,跳转进入我们的人脸检测界面
（人脸检测界面前提：我们在目录下搭建文件夹 并且 上面的pages.json 进行了配置 ）

在这里插入图片描述

 
// 去人脸识别
uni.navigateTo({
		url:'/pages/face/face',
 })

思路

1 检测授权
2调用相机
（穿插是否活体检测人脸）
3开始录制
4结束录制

功能

放进去我们的相机组件和相对应的相机方法

<camera ref="video" device-position="front" flash="off" @initdone="initdone" @error="error" 
		style="width:100%;height:100%;border-radius:50%;
				-webkit-backface-visibility: hidden;
				overflow: hidden;
				position: relative;
				-webkit-transform: translate3d(0, 0, 0);">
</camera>


//初始化相机以及初始化相机失败
initdone() {
				let _this = this;
				// 1、检测相机权限
				// 2、录制15s视频
				_this.ctx = uni.createCameraContext(); // 初始化相机
				//调用人脸检测方法
				
},
// 相机初始化失败
error(e) {
				let _this = this;
				console.log(e.detail);
				if (e.detail.errMsg == 'insertCamera:fail auth deny') {
					_this.tishimsg = '相机授权失败，点击重新授权！';
				}
				uni.showToast({
					title: '相机授权失败，请点击重新授权！',
					icon: 'none',
		duration: 2000
	});
},




//人脸检测方法
// 人脸识别start
			isfaceact() {
				let _this = this;
				console.log('走人脸识别!!!!!!!');
				_this.tishimsg = '初始化人脸识别!';
				wx.initFaceDetect();
				// console.log(wx.initFaceDetect(),'初始化人脸识别');
				// createVKSession
				// 2、创建 camera 上下文 CameraContext 对象
				// _
				// this.cameraEngine = wx.createCameraContext();
				// 3、获取 Camera 实时帧数据
				const listener = this.ctx.onCameraFrame((frame) => {
					// if (this.tempImg) {
					// 	return;
					// }
					// VKSession.detectFace
					// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
					//wx.faceDetect   VKSession.detectFace
					wx.faceDetect({
						frameBuffer: frame.data,
						width: frame.width,
						height: frame.height,
						enablePoint: true,
						enableConf: true,
						enableAngle: true,
						enableMultiFace: true,
						success: (faceData) => {
							let face = faceData.faceInfo[0]
							if (faceData.x == -1 || faceData.y == -1) {
								this.tishimsg = '请保持在相机中！';
								// this.showrppg(1);
			
							} else {
								if (faceData.faceInfo.length > 1) {
									this.tishimsg = '请保证只有一个人';
									// this.showrppg(1);
								} else {
									const {
										pitch,
										roll,
										yaw
									} = face.angleArray;
									const standard = 0.5
									if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
										Math.abs(yaw) >= standard) {
										this.tishimsg = '请平视摄像头';
									} else if (face.confArray.global <= 0.8 || face.confArray
										.leftEye <=
										0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <=
										0.8 ||
										face.confArray.rightEye <= 0.8) {
										// 人脸置信度
										this.tishimsg = `请勿遮挡五官${face.confArray}`;
									} else {
										this.tishimsg = '正在录制！';
										// this.showrppg(2);
									}
								}
							}
						},
						fail: (err) => {
							if (err.x == -1 || err.y == -1) {
								this.tishimsg = '检测不到人';
								// this.showrppg(1);
							} else {
								// console.log(err.errMsg)
								this.tishimsg = '网络错误，请退出页面重试';
								// this.showrppg(1);
							}
						},
					})
				})
				// 5、开始监听帧数据
				listener.start();
},

uniapp横屏配置

在pages.json中配置 pageOrientation: “auto”

"globalStyle": {
  "pageOrientation": "auto"
}

此时已经可以全局切换横竖屏了，再分别给横竖屏各写一套样式

方式一 css 控制

/* <view class="landscape">666</view> */

/* 竖屏 */
@media screen and (orientation: portrait) {
  .landscape {
    color: #f00;
  }
}

/* 横屏 */
@media screen and (orientation: landscape) {
  .landscape {
    color: #00f;
  }
}

方式二 js 控制

在 data 里定义isLandScape: false表示是否横屏，默认为竖屏
// <view :class="{'landscape': isLandScape}">666</view>
// .landscape { color: #00f; }

onResize() {
  uni.getSystemInfo({
    success: (res) => {
      if (res.windowWidth > res.windowHeight) {
        // 横屏
        this.isLandScape = true
      } else {
        // 竖屏
        this.isLandScape = false
      }
    }
  })
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1392061.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

解决哈希冲突的几种方法

解决哈希冲突的几种方法

什么是hash冲突 哈希函数是一个映像&#xff0c;把任意长度的输入&#xff0c;通过Hash算法变换成固定长度的输出&#xff0c;这个输出就是Hash值&#xff1b; 当两个不同的输入&#xff0c;产生了同一个输出值即为哈希冲突 解决方式 开放定址法 开放寻址法的核心思想是&am…
阅读更多...
OpenCV-25sobel算子（索贝尔算子）

OpenCV-25sobel算子（索贝尔算子）

前面所提到的滤波都是用于降噪的&#xff0c;去掉噪声&#xff0c;而算子是用来找边界&#xff0c;来识别图像的边缘。 一、概念 边缘是像素值发生跃迁的值&#xff0c;是图像的显著特点之一&#xff0c;在图像特征提取&#xff0c;对象检测&#xff0c;模式识别等方面都有重…
阅读更多...
c语言-库函数strstr()、strtok()、strerror()介绍

c语言-库函数strstr()、strtok()、strerror()介绍

文章目录 前言一、库函数strstr()1.1 strstr()介绍1.2 strstr()模拟实现 二、库函数strtok()2.1 strtok()介绍 三、库函数strerror()3.1 strerror()介绍 总结 前言 本篇文章介绍c语言库函数strstr()、strtok()、strerror()的使用。 一、库函数strstr() 1.1 strstr()介绍 str…
阅读更多...
【Emgu CV教程】5.1、几何变换之平移

【Emgu CV教程】5.1、几何变换之平移

图像的几何变换对于图像处理来说&#xff0c;也是最基础的那一档次&#xff0c;包括平移、旋转、缩放、透视变换等等&#xff0c;也就是对图像整理形状的改变&#xff0c;用到的函数都比较简单&#xff0c;理解起来也很容易。但是为了凑字数&#xff0c;还是一个函数一个函数的…
阅读更多...
java多线程面试（三）

java多线程面试（三）

1.Exchanger 了解吗 Exchanger&#xff08;交换者&#xff09;是用于一个线程之间的协调工具类&#xff0c;Exchannge用于进行线程之间的数据交换&#xff0c;它提供一个同步点&#xff0c;两个线程可以交换彼此的数据。 假如两个线程有一个没有执行exchange()方法&#xff0c…
阅读更多...
【Docker构建MySQL8.0镜像】

【Docker构建MySQL8.0镜像】

Docker构建MySQL8.0镜像 部署流程1. 拉取docker镜像2. 创建数据卷&#xff0c;存放MySQL数据3. 启动MySQL镜像4. 初始化sql放入MySQL镜像5. 执行MySQL脚本6. MySQL镜像打包7. MySQL镜像迁移 部署流程 1. 拉取docker镜像 docker pull mysql:8.0.35拉取成功后就可以看到镜像了&…
阅读更多...
从零学Java 线程池

从零学Java 线程池

Java 线程池 文章目录 Java 线程池1 线程池概念1.1 现有问题1.2 线程池 2 线程池原理3 如何使用线程池3.1 获取线程池 4 创建线程的第四种方式 1 线程池概念 1.1 现有问题 线程是宝贵的内存资源、单个线程约占1MB空间&#xff0c;过多分配易造成内存溢出。频繁的创建及销毁线…
阅读更多...
将台式机变为服务器，服务器设置静态IP的方法

将台式机变为服务器，服务器设置静态IP的方法

一.查看IP: 同时按winR&#xff0c;输入cmd&#xff0c;打开终端。输入 ifconfig查看IP地址 查看网关: route -n二、配置静态IP地址 进入root权限 sudo -i进入.yaml文件&#xff0c;开始配置静态IP地址 vim /etc/netplan /*.yaml文件地址是/etc/netplan/01-network-manager-…
阅读更多...
【Leetcode】277.搜寻名人

【Leetcode】277.搜寻名人

一、题目 1、题目描述 假设你是一个专业的狗仔，参加了一个 n 人派对，其中每个人被从 0 到 n - 1 标号。在这个派对人群当中可能存在一位 “名人”。所谓 “名人” 的定义是：其他所有 n - 1 个人都认识他/她，而他/她并不认识其他任何人。 现在你想要确认这个 “名人” 是…
阅读更多...
若依修改侧边栏

若依修改侧边栏

引用&#xff1a;https://blog.csdn.net/Sabrina_cc/article/details/125871591 子菜单选中后&#xff0c;文字和背景改变&#xff1a; .el-submenu__title i{color: #e8e8e8 !important;} #app .sidebar-container .theme-dark .nest-menu .el-submenu .is-active > .el-su…
阅读更多...
软件测试BUG分析以及BUG定位

软件测试BUG分析以及BUG定位

一般来说bug大多数存在于3个模块&#xff1a; 1、前台界面&#xff0c;包括界面的显示&#xff0c;兼容性&#xff0c;数据提交的判断&#xff0c;页面的跳转等等&#xff0c;这些bug基本都是一眼可见的&#xff0c;不太需要定位&#xff0c;当然也不排除一些特殊情况&#xf…
阅读更多...
详解ISIS动态路由协议

详解ISIS动态路由协议

华子目录 前言应用场景历史起源ISIS路由计算过程ISIS的地址结构ISIS路由器分类ISIS邻居关系的建立P2PMA ISIS中的DIS与OSPF中DR的对比链路状态信息的交互ISIS的最短路径优先算法&#xff08;SPF&#xff09;ISIS区域划分ISIS区域间路由访问原理ISIS与OSPF的不同ISIS与OSPF的术语…
阅读更多...
Redis数据结构学习笔记

Redis数据结构学习笔记

图文主要参考小林Coding的图解redis数据结构 redis为什么快 除了它是内存数据库&#xff0c;使得所有的操作都在内存上进⾏之外&#xff0c;还有⼀个重要因素&#xff0c;它实现的数据结构&#xff0c;使 得我们对数据进⾏增删查改操作时&#xff0c;Redis 能⾼效的处理。 数…
阅读更多...
USB转SPI USB转IIC 串口转SPI串口转IIC SPI I2C模块

USB转SPI USB转IIC 串口转SPI串口转IIC SPI I2C模块

一款支持USB转SPI、USB转I2C、USB转GPIO、USB转PWM、USB转ADC的模块。提供上位机工具&#xff0c;开发协议。 资料下载&#xff0c;链接&#xff1a;https://pan.baidu.com/s/1sw3RCMwjhrMO4qzUBq9bjA 提取码&#xff1a;qzjp 概述 串口转多协议模组为了客户调试一些功能…
阅读更多...
快速上手的 AI 工具-文心一言

快速上手的 AI 工具-文心一言

简介 最近正打得火热的AIGC概念&#xff0c;相信大家肯定也都多少接触到了&#xff0c;那么AIGC概念股到底是什么呢&#xff1f;我个人最近也看了一些平台如&#xff1a;文心一言、通义千问、讯飞星火、豆包等等&#xff01;各位朋友也千万不要错过啦&#xff0c;真是各有各的特…
阅读更多...
opengauss-高斯数据库的安装部署及MySQL数据迁移实战.

opengauss-高斯数据库的安装部署及MySQL数据迁移实战.

目录 介绍 下载安装包 安装 1.设置SEMMNI 2.新建用户和用户组 3.下载安装包解压 4.安装数据库 5.修改配置 6.重启服务 数据库使用 gsql命令和常用sql 1.使用omm用户连接数据库-本地登陆无需输入密码&#xff1a; 2.查看用户信息 3.删除数据库 4.创建用户 5.创建…
阅读更多...
【银行测试】银行项目，信用卡业务测试+常问面试（三）

【银行测试】银行项目，信用卡业务测试+常问面试（三）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行测试-信用卡业…
阅读更多...
uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子排行实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子排行实现

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…
阅读更多...
LNMP环境下综合部署动态网站

LNMP环境下综合部署动态网站

目录 LNMP部署--nginx 搭建mysql数据库 安装mysql的过程&#xff1a; 部署PHP&#xff1a; ​编辑​编辑php的配置文件在哪 wordpress程序安装 LNMP部署--nginx 纯净--联网状态 环境变量中没有nginx 安装形式的选择&#xff1a; yum安装&#xff1a;自动下载安装包及…
阅读更多...
C++ 最短路总结 朴素Dijkstra算法 || 模版题，求最短路

C++ 最短路总结 朴素Dijkstra算法 || 模版题，求最短路

算法选择&#xff1a; 稠密图用邻接矩阵写&#xff0c;稀疏图用邻接表写。 朴素dijkstra&#xff1a; 给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;所有边权均为正值。 请你求出 1 号点到 n 号点的最短距离&#xff0c;如果无法从 1 号点…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023