♥ uniapp 环境搭建

♥ uniapp 环境搭建

开发uniapp需要用到的工具有两个:

1、用到的平台和地址:

需要了解的几个平台以及地址:

(1)微信公众平台

https://mp.weixin.qq.com/

(2)微信开发文档

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

(3)uniapp开发文档

https://uniapp.dcloud.net.cn/

2、HbuilderX (开发工具)

官网地址是:
https://www.dcloud.io/
下载地址
https://www.dcloud.io/hbuilderx.html

windows系统选择对应的版本,建议下载到D盘
♥ uniapp 环境搭建_第1张图片

下载好的压缩包直接解压
♥ uniapp 环境搭建_第2张图片
解压成功以后双击进行运行
♥ uniapp 环境搭建_第3张图片

运行成功
♥ uniapp 环境搭建_第4张图片

3、微信开发者工具(运行环境)

微信开发者工具是微信运行小程序和uniapp的工具
下载的地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

选择自己对应的版本下载即可:

♥ uniapp 环境搭建_第5张图片

记住自己的安装地址:♥ uniapp 环境搭建_第6张图片
记住这个地址:

D:\anzhuang\微信web开发者工具

等待安装完毕!
♥ uniapp 环境搭建_第7张图片

至此,uniapp的运行环境咱们已经搭建好了!

4、开发属于我们的第一个uniapp

Hbuildx中文件 =》 新建=》项目
♥ uniapp 环境搭建_第8张图片

选择可以搭建属于我们的vue2或者vue3项目,这里我们以vue2版本为例,选择最简单的空白模板
♥ uniapp 环境搭建_第9张图片

新建立的项目目录如下
♥ uniapp 环境搭建_第10张图片
目录文件夹以及供能如下:
♥ uniapp 环境搭建_第11张图片

点击工具=》设置=》运行配置=> 微信开发者工具路径
♥ uniapp 环境搭建_第12张图片

选中我们的微信开发者工具,方便我们在运行的时候自动打开工具
♥ uniapp 环境搭建_第13张图片

点击运行,运行我们的第一个项目
♥ uniapp 环境搭建_第14张图片
安装成功以后会提示我们:
在这里插入图片描述

这个时候重新运行即可!

运行以后自动打开我们的微信开发者工具,提示扫码登陆:
登录账号
♥ uniapp 环境搭建_第15张图片

这个时候会提示我们打开服务端口
在这里插入图片描述
点击设置=》安全=》服务端口开启,去Huildx重新启动项目
♥ uniapp 环境搭建_第16张图片

信任项目并且运行
♥ uniapp 环境搭建_第17张图片
至此,我们的项目就完成啦!快去开发属于自己的项目吧!
♥ uniapp 环境搭建_第18张图片

5、进一步开发属于我们的项目

先放图片,开发属于底部界面tab栏目
♥ uniapp 环境搭建_第19张图片

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

♥ uniapp 环境搭建_第20张图片

底部tab栏切换进行配置对应的界面
♥ uniapp 环境搭建_第21张图片

{
	"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": {}
}

认识一下uniapp的常用生命周期

//页面初始化
onLoad() {
			uni.switchTab({
				url:'/pages/tabBar/API'
			})
},

//页面初始化
onShow() {},

//卸载
onUnload() {},

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

转的主页面
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;
	}

为了方便,我们可以直接写一个固定的页面:方便调试
♥ uniapp 环境搭建_第22张图片

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

♥ uniapp 环境搭建_第23张图片

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

6、人脸检测

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

<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();
			},

配置微信小程序ID
♥ uniapp 环境搭建_第24张图片

我们理清楚一下自己的思路
思路:
1检测授权
2调用相机
(穿插是否活体检测人脸)
3开始录制
4结束录制

1检测授权

2调用相机
(穿插是否活体检测人脸)

3开始录制
4结束录制

你可能感兴趣的:(UniApp,uni-app,数据库,apache)