小程序 - 颜值大师
[TOC]
1、基础要求
1.1掌握 HTML + CSS + JS
1.2了解微信小程序的基本使用
- 会创建小程序项目和小程序页面
-
知道小程序页面的组成部分及各自的作用
- 会用 button，image，view 等小程序组件
- 会使用 wx.request() 发起网络数据请求
1.3了解 ES6 常用语法
-
箭头函数
- let，const 等
2、动态设置 camera 组件的高度
2.1渲染 camera 组件
-
在 data 中定义
whdata: { // 窗口可用的高度 wh: 0 } -
动态获取页面可用高度
/** * 生命周期函数--监听页面加载 */ onLoad: function(options) { const sysInfo = wx.getSystemInfoSync() this.setData({ wh: sysInfo.windowHeight }) }
3、隐藏 navigation 导航条
在 app.json 的 window 节点中，新增如下配置：
{
"pages": [
"pages/home/home"
],
"window": {
// ... 省略其他配置
"navigationStyle": "custom"
},
"sitemapLocation": "sitemap.json"
}4、在 camera 组件之上渲染操作按钮
4.1定义如下的页面结构：
4.2美化样式：
.btn-box {
display: flex;
justify-content: space-around;
position: absolute;
bottom: 50px;
width: 100%;
}
.btn-box cover-image {
width: 50px;
height: 50px;
opacity: 0.7;
}5、动态切换摄像头朝向
5.1在 data 中定义数据：
data: {
// 摄像头的朝向 front back
position: 'front'
}5.2为切换摄像头按钮绑定点击事件处理函数：
5.3 实现reverseCamera函数的功能：
// 点击按钮，切换摄像头
reverseCamera() {
const newPosition = this.data.position === 'front' ? 'back' : 'front'
this.setData({
position: newPosition
})
}5.4为 camera 组件动态绑定 device-position
6、实现拍照功能
6.1在 data 中定义数据：
data: {
// 照片的路径
src: ''
}6.2为拍照按钮绑定点击事件处理函数：
6.3实现 takePhoto 函数的功能：
// 拍照
takePhoto() {
// 创建相机的实例对象
const ctx = wx.createCameraContext()
// ctx.takePhoto 实现拍照
ctx.takePhoto({
quality: 'high',
success: (res) => {
// console.log(res.tempImagePath)
this.setData({
src: res.tempImagePath,
isShowPic: true
}, () => {
this.getFaceInfo()
})
},
fail: () => {
console.log('拍照失败！')
this.setData({
src: ''
})
}
})
}7、从相册选取照片
7.1为按钮绑定事件处理函数：
7.2实现 choosePhoto 函数：
// 从相册选取照片
choosePhoto() {
wx.chooseImage({
count: 1,
sizeType: ['original'],
sourceType: ['album'],
success: (res) => {
// console.log(res)
if (res.tempFilePaths.length > 0) {
this.setData({
src: res.tempFilePaths[0],
isShowPic: true
}, () => {
this.getFaceInfo()
})
}
},
fail: () => {
console.log('选择照片失败！')
this.setData({
src: ''
})
}
})
}8、将选择的照片渲染到屏幕上
8.1定义 UI 结构：
9、重选照片
9.1定义 UI 结构：
9.2实现 reChoose 函数：
// 重新选择照片
reChoose() {
this.setData({
isShowPic: false,
src: ''
})
}10、申请百度AI开放平台账号
- 申请百度账号
- 登录开放平台
http://ai.baidu.com/ - 创建人脸识别的应用
- 填写应用信息
- 得到应用的
API Key和Secret Key
11、实现API鉴权
// this.globalData.access_token = 'aaa'
wx.request({
method: 'POST',
url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=自己的ID&client_secret=自己的KEY',
success: (res) => {
this.globalData.access_token = res.data.access_token
},
fail: () => {
wx.showToast({
title: '鉴权失败！',
})
}
})12、将图片转码为 base64 字符串
const fileManager = wx.getFileSystemManager()
const fileStr = fileManager.readFileSync(this.data.src, 'base64')13、发起请求检测颜值数据
wx.request({
method: 'POST',
url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=' + token,
header: {
'Content-Type': 'application/json'
},
data: {
image_type: 'BASE64',
image: fileStr,
// 年龄,颜值分数,表情,性别,是否戴眼镜,情绪
face_field: 'age,beauty,expression,gender,glasses,emotion'
},
success: (res) => {
console.log(res)
if (res.data.result.face_num <= 0) {
return wx.showToast({
title: '未检测到人脸！',
})
}
this.setData({
faceInfo: res.data.result.face_list[0],
isShowBox: true
})
},
fail: () => {
wx.showToast({
title: '颜值检测失败！',
})
},
complete: () => {
wx.hideLoading()
}
})14、把英文信息映射为中文信息
-
定义映射关系：
data: { // 映射关系 map: { gender: { male: '男', female: '女' }, expression: { none: '不笑', smile: '微笑', laugh: '大笑' }, glasses: { none: '无眼镜',common: '普通眼镜',sun: '墨镜' }, emotion: { angry: '愤怒', disgust: '厌恶', fear: '恐惧', happy: '高兴', sad: '伤心', surprise: '惊讶', neutral: '无情绪' } } } -
修改UI结构：
年龄：{{faceInfo.age}}岁 性别：{{map.gender[faceInfo.gender.type]}} 颜值：{{faceInfo.beauty}}分 表情：{{map.expression[faceInfo.expression.type]}} 眼镜：{{map.glasses[faceInfo.glasses.type]}} 情绪：{{map.emotion[faceInfo.emotion.type]}}