​页面效果

插播一下，颜值71，还可以那么狂，哼。。。。。。。。

项目介绍

页面实现上传一张带有人像的图片，点击测试颜值之后返回照片中人像的年龄和颜值，此项目为颜值测试初级，access_token值为获取之后在页面中固定，注意有有效期30天，30天之后需要更换，未对生成数据进行处理和判断，适合刚开始接触的同学练习，之后会发布关于中级（对数据进行判断，动态获取access_token）和高级（生成颜值测试证书）的文章，有兴趣可以持续关注哦！

百度AI人像检测与属性分析

用户可以在线调用API，也可以离线采集SDK，还可以私有化部署，本例子是采用在线调用API，注册申请完就可以免费调用，每天有限额，只要不商用，仅本地测试和个人使用足够。

功能逻辑

wxml页面主要展示两部分内容，一部分用户上传图片的呈现，另一部分是测试结果的呈现，为了使得效果好看些，默认提供一张图片显示，在js的data中进行定义；测试结果呈现利用了progress进度条，具有一定的动态效果。用户上传图片功能的实现使用的是微信小程序自带的wx.chooseImage()方法，指定要上传图片的数量，大小和来源即可，上传成功后可以获得图片的临时路径进行赋值在wxml页面显示；百度人脸检测接口官方技术文档有比较详细的说明，要使用接口，须将图片进行base64格式编码，这里利用微信小程序的readFile()方法实现图片编码，通过request请求，传递image_type,image,access_token,face_field(由于人脸检测api默认是不返回年龄和颜值数据的，需要自行指定返回的数据)，请求成功之后就可以获取所需数据。如果请求错误，服务器会返回错误码和错误信息，可以进行判断输出，本程序未进行判断，用户可以查阅官方文档，进行判断输出即可。

实现步骤

一：访问百度ai平台，注册账号，创建应用，生成API key和Secret key

https://ai.baidu.com/

开放能力-》人脸与人体识别-》人脸识别-》人脸检测-》立即使用-》创建应用

二：access_token获取

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=你自己的API key &client_secret=你自己的secret key

完善上述路径，修改成自己的API key和Secret key，将路径粘贴在浏览器中，回车查看结果

https://www.bejson.com/?src=xiaof将返回的json字段格式化，获取到access_token的值并保存起来

三：页面完成

打开微信开发者工具新建beauty页面，撰写wxml和wxss页面，实现页面静态效果

四：完善js页面代码实现颜值检测功能

上图为人像检测返回数据，可以根据error_code的值进行判断上传的图片是否满足要求，否则给出提出，此文介绍为课上例子，已经跟学生介绍此功能，实践的同学可自行添加if语句进行判断。

如需源码，可关注以下公众号

后台回复“颜值测试小程序1”获取