0
点赞
收藏
分享

微信扫一扫

小程序 - 颜值大师


小程序 - 颜值大师_点击事件

小程序 - 颜值大师

  • ​​1 基础要求​​
  • ​​1.1 掌握 HTML + CSS + JS​​
  • ​​1.2 了解微信小程序的基本使用​​
  • ​​1.3 了解 ES6 常用语法​​
  • ​​2 动态设置 camera 组件的高度​​
  • ​​2.1渲染 camera 组件​​
  • ​​2.2 在 data 中定义 `wh`​​
  • ​​2.3 动态获取页面可用高度​​
  • ​​3 隐藏 navigation 导航条​​
  • ​​4 在 camera 组件之上渲染操作按钮​​
  • ​​4.1 定义如下的页面结构:​​
  • ​​4.2 美化样式​​
  • ​​5 动态切换摄像头朝向​​
  • ​​5.1 在 data 中定义数据:​​
  • ​​5.2 为切换摄像头按钮绑定点击事件处理函数:​​
  • ​​5.3 实现reverseCamera函数的功能:​​
  • ​​5.4为 camera 组件动态绑定 `device-position`​​
  • ​​6 实现拍照功能​​
  • ​​6.1 在 data 中定义数据:​​
  • ​​6.2 为拍照按钮绑定点击事件处理函数:​​
  • ​​6.3 实现 takePhoto 函数的功能:​​
  • ​​7 从相册选取照片​​
  • ​​7.1 为按钮绑定事件处理函数:​​
  • ​​7.2 实现 choosePhoto 函数:​​
  • ​​8 将选择的照片渲染到屏幕上​​
  • ​​8.1 定义 UI 结构:​​
  • ​​9 重选照片​​
  • ​​9.1 定义 UI 结构:​​
  • ​​9.2 实现 reChoose 函数:​​
  • ​​10 申请百度AI开放平台账号​​
  • ​​11 实现API鉴权​​
  • ​​12 将图片转码为 base64 字符串​​
  • ​​13 发起请求检测颜值数据​​
  • ​​14 把英文信息映射为中文信息​​
  • ​​14.1 定义映射关系​​
  • ​​14.2 修改UI结构:​​

1 基础要求

1.1 掌握 HTML + CSS + JS

1.2 了解微信小程序的基本使用

  • 会创建小程序项目和小程序页面
  • 知道小程序页面的组成部分及各自的作用
  • 会用 button,image,view 等小程序组件
  • 会使用 wx.request() 发起网络数据请求

1.3 了解 ES6 常用语法

  • 箭头函数
  • ​let,const ​​等

2 动态设置 camera 组件的高度

2.1渲染 camera 组件

<camera style="height: {{wh}}px; width: 100%;" flash="off"></camera>

2.2 在 data 中定义 wh

data: {
// 窗口可用的高度
wh: 0
}

2.3 动态获取页面可用高度

/**
* 生命周期函数--监听页面加载
*/
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 定义如下的页面结构:

<camera style="height: {{wh}}px; width: 100%;" flash="off">
<cover-view class='btn-box'>
<!-- 切换摄像头 -->
<cover-image src='/images/icon/reverse.png'></cover-image>
<!-- 拍照 -->
<cover-image src='/images/icon/camera.png'></cover-image>
<!-- 从相册选取照片 -->
<cover-image src='/images/icon/album.png'></cover-image>
</cover-view>
</camera>

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 为切换摄像头按钮绑定点击事件处理函数:

<!-- 切换摄像头 -->
<cover-image src='/images/icon/reverse.png' bindtap='reverseCamera'></cover-image>

5.3 实现reverseCamera函数的功能:

// 点击按钮,切换摄像头
reverseCamera() {
const newPosition = this.data.position === 'front' ? 'back' : 'front'
this.setData({
position: newPosition
})
}

5.4为 camera 组件动态绑定 device-position

<camera style="height: {{wh}}px; width: 100%;" flash="off" device-position='{{position}}'></camera>

6 实现拍照功能

6.1 在 data 中定义数据:

data: {
// 照片的路径
src: ''
}

6.2 为拍照按钮绑定点击事件处理函数:

<!-- 拍照 -->
<cover-image src='/images/icon/camera.png' bindtap='takePhoto'></cover-image>

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 为按钮绑定事件处理函数:

<!-- 从相册选取照片 -->
<cover-image src='/images/icon/album.png' bindtap='choosePhoto'></cover-image>

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 结构:

<view wx:else>
<image src='{{src}}' style='width: 100%; height: {{wh}}px; display: block;' mode='aspectFill'></image>
</view>

9 重选照片

9.1 定义 UI 结构:

<button type='warn' class='reChoose' bindtap='reChoose'>重选照片</button>

9.2 实现 reChoose 函数:

// 重新选择照片
reChoose() {
this.setData({
isShowPic: false,
src: ''
})
}

10 申请百度AI开放平台账号

  • 1 申请百度账号
  • 2 登录开放平台​​http://ai.baidu.com/​
  • 3 创建人脸识别的应用
  • 4 填写应用信息
  • 5 得到应用的​​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 把英文信息映射为中文信息

14.1 定义映射关系

data: {
// 映射关系
map: {
gender: {
male: '男', female: '女'
},
expression: {
none: '不笑', smile: '微笑', laugh: '大笑'
},
glasses: {
none: '无眼镜',common: '普通眼镜',sun: '墨镜'
},
emotion: {
angry: '愤怒', disgust: '厌恶', fear: '恐惧', happy: '高兴',
sad: '伤心', surprise: '惊讶', neutral: '无情绪'
}
}
}

14.2 修改UI结构:

<view class='faceinfo_box' wx:if="{{isShowBox}}">
<view class='face_row'>
<text>年龄:{{faceInfo.age}}岁</text>
<text>性别:{{map.gender[faceInfo.gender.type]}}</text>
</view>
<view class='face_row'>
<text>颜值:{{faceInfo.beauty}}分</text>
<text>表情:{{map.expression[faceInfo.expression.type]}}</text>
</view>
<view class='face_row'>
<text>眼镜:{{map.glasses[faceInfo.glasses.type]}}</text>
<text>情绪:{{map.emotion[faceInfo.emotion.type]}}</text>
</view>
</view>

小程序 - 颜值大师_ico_02


举报

相关推荐

0 条评论