♥ uniapp environment construction
There are two tools needed to develop uniapp:
1. Platforms and addresses used:
Several platforms and addresses you need to know:
(1) WeChat public platform
https://mp.weixin.qq.com/
(2) WeChat development documentation
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
(3) uniapp development documentation
https://uniapp.dcloud.net.cn/
2. HbuilderX (development tool)
Government location:
https://www.dcloud.io/
Download location
https: //www.dcloud.io/hbuilderx.html
Select the corresponding version for windows system. It is recommended to download to the D drive.
Decompress the downloaded compressed package directly
After decompression is successful, double-click to run
Run successfully
3. WeChat developer tools (running environment)
WeChat Developer Tools are tools for WeChat to run mini programs and uniapps
Download address:
https://developers.weixin.qq. com/miniprogram/dev/devtools/download.html
Just choose the version you want to download:
Remember your installation address:
Remember this address:
D:\anzhuang\微信web开发者工具
Wait for the installation to be completed!
At this point, we have set up the running environment of uniapp!
4. Develop our first uniapp
File in Hbuildx => New => Project
You can choose to build our own vue2 or vue3 project. Here we take the vue2 version as an example and choose the simplest blank template.
The newly created project directory is as follows
The directory folder and power supply are as follows:
Click Tools => Settings => Run Configuration => WeChat Developer Tool Path
Select our WeChat developer tools so that we can automatically open the tool when running
Click Run to run our first project
After the installation is successful, we will be prompted:
Just run it again at this time!
After running, our WeChat developer tool will automatically open, prompting you to scan the QR code to log in:
Log in account
At this time we will be prompted to open the service port
Click Settings => Security => Open the service port, go to Huildx to restart the project
Trust the project and run
At this point, our project is complete! Go and develop your own project!
5. Further develop our projects
Put the picture first and develop the tab column at the bottom of the interface
Configure the startup page and four bottom tab switching columns
Switch the tab bar at the bottom to configure the corresponding interface.
{
"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": {
}
}
Get to know the common life cycle of uniapp
//页面初始化
onLoad() {
uni.switchTab({
url:'/pages/tabBar/API'
})
},
//页面初始化
onShow() {
},
//卸载
onUnload() {
},
Configure the interface after the jump is completed:
转的主页面
uni.switchTab({
url:'/pages/tabBar/API'
})
Enter the tabBar => component interface below, because the page we set is the page after the loading page:
Start writing a face detection button:
Extra note:
Uniapp’s css style is slightly different from our usual css pc style, and the unit is rpx
(roughly one-half of our px)
The full screen width of uniapp is 750rpx;
So the button style is
.btnface{
// 750 - 690 = 60
width: 690rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: cadetblue;
color: #fff;
margin:30rpx;
border-radius: 10rpx;
}
For convenience, we can directly write a fixed page: convenient for debugging
We can roughly guess the effect without thinking about it, jump to our face detection interface
(Face detection interface premise: we build a folder in the directory and above pages.json configured)
// 去人脸识别
uni.navigateTo({
url:'/pages/face/face',
})
6. Face detection
Put in our camera component and corresponding camera method
<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();
},
Configure WeChat applet ID
Let’s clarify our ideas
Ideas:
1. Detect authorization
2. Call the camera 4 End recording 3 Start recording
(Interspersed with face detection for liveness)
1 Test authorization
2 Call the camera
(interspersed with whether to detect faces if they are alive)
3Start recording
4End recording