文章目录

博主绪论
准备过程
- GIT的安装
- NodeJS和npm的安装
- 腾讯云人脸识别API
正式开始
- 创建云开发小程序
- 开发前的思考准备，思维决定行动
- 服务器开发(写一个云函数端)
- - 分析
  - 调用人脸识别API
  - 云存储
  - 测试环节
  - 服务端代码完成
- 客户端开发(真正的小程序前端界面+后端调用)
- - 准备阶段
  - 客户端提交上传图片
  - 调用云函数处理fileID,返回脸部信息
  - 把得到的人脸数据显示到前端页面
  - 显示我们上传的图片
  - 布局优化

博主绪论

微信小程序云开发可以免费调用云开发控制台的云存储，云函数，云计算，当然只是一定程度上可以免费调用。不过这也比较有意思，逼格也高，而且云开发可以让我们轻易的在小程序当中和用户进行交互，接下来让我们紧跟时代潮流，利用图灵完备打造出鼠于我们的一个AI人脸识别神器吧。

准备过程

在此之前，我们需要安装几个东西。

GIT的安装

进入GIT官网,点击这,根据自己的电脑系统版本下载，下载完成以后，打开命令行(cmd)，输入命令git，如果成功显示出一大段我们看不懂的字符，那就对了。

NodeJS和npm的安装

进入NodeJS官网下载，点击，下载对应版本即可，下载完成以后，在自己的cmd上面输入node -v和npm -v即可，如果显示出版本，就证明安装成功了。

腾讯云人脸识别API

首先注册一个自己的腾讯云账号，点击进入官网，点击注册，注册完账号以后，还得实名认证才能够正常使用，这个过程很快的。
之后我们还得调用腾讯云的人脸识别API接口，我们就得先开通这个服务，点击产品->人工智能->人脸识别->立即使用即可。之后如果我们向调用腾讯云API的话，我们还得去控制台->访问管理创建API密匙，之后会出现APPID,SecretID，SecretKey,之后我们调用API需要使用。

正式开始

创建云开发小程序

创建的时候勾选小程序-云开发即可：

之后小程序会自动生成一个模板，我们看它不爽就全删了，自己重新创建。把所有文件删掉(处理project.config.json)，重新打开开发工具，然后新建两个目录，一个事服务器(命名为server)，一个是客户端(命名为client)，建立完目录以后，再到配置文件project.config.json里面改动一下：就改动这两行

{"miniprogramRoot": "client/",           //客户端"cloudfunctionRoot": "server/",       //服务器"setting": {"urlCheck": true,

改动完以后，保存，然后重新打开开发工具，我们可以看见服务器目录出现了一个云图标：

这个时候我们的环境就准备好了。但是或许有点人会出现环境未知，不要怕，博主也是，你就点击：

点击里面的云开发选项就可以看到提示，教你创建环境。

开发前的思考准备，思维决定行动

功能设想：

客户端选择或者拍照图片进行上传，然后在小程序当中调用云存储函数上传到我们个人的云存储当中，并且云存储会返回一个文件ID到客户端。
客户端获取文件ID，调用云函数，云函数就会读取这个文件ID，在云存储当中找到这个文件图片的位置，并且进行读取，获得其真实的URL地址
将获取到的URL发送到腾讯云的人脸识别API，之后人脸识别API会返回图片的相关信息
我们将这些信息一一进行处理，然后发给客户端，并且进行显示。
优化显示界面

服务器开发(写一个云函数端)

首先，我们右键选择server文件夹，然后选择建立NodeJS云函数，命名为FaceDetect(名字随意，只要容易辨认就好)，建立完成以后，目录下面会自动生成index.js和package.json文件，其中index.js文件里面有官方给出的模板,我们把多余的代码删掉

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {}

分析

这个我们暂时先放下，我们先去腾讯云，找到人脸识别的开发文档，点击这里
之后选择人脸检测与分析相关接口，即DetectFace。
在这个文档我们可以看到很多详细的信息，比如说面部属性和人脸质量信息的识别。当然这个部署最重要的，最重要的是我们该怎么用，用哪些。

首先我们看到输入参数：
里面的Action(接口名称)和Verxion(版本)是必填的，而我们需要识别的图片是云存储上传的图片，因此需要URL参数，而且我们获取的是人脸的属性信息，因此我们还需要参数NeedFaceAttributes.
再看到输出参数，里面有：

图片的宽高，人脸信息列表(最重要的)，因此我们点击FaceInfo
里面有：

其中我们会用到FaceAttributesInfo即人脸属性信息，然后点击FaceAttributesInfo查看详细信息，发现里面有很多人脸信息输出，比如说头发信息，咦，头发信息还有一个文档可以点击，有什么呢，我们看看：FaceHairAttributesInfo
里面有头发的颜色，程度，刘海，信息看来十分具体。
以上是人脸识别API的参数分析，我们了解参数分析以后，后面的执行步骤才不会那么的懵逼。

调用人脸识别API

进入这一页,我们可以看到相关的SDK，SDK用起来有些许麻烦，我们可以常常新鲜东西，API Explorer,即SDK版本的GUI界面，调用API十分方便：

点击API Explorer我们可以进入到以下页面：

里面有我们前面说到的SecretId和SecretKey，还有我们前面的输入参数URL和NeedFaceAttributes(人脸属性列表)，我们把这些内容给填写了，其他的不管，URL我们可以随便从网上找一张人脸图片的地址，填入，然后后面那个Need什么的参数就填写1就OK了，之后我们点击右侧的在线调用进行测试，看我们的接口调用成功没，然后选择发送请求，会出现以下结果：

如果你出现了以下类似的结构，人脸信息，那么就对了，如果出现错误，那么就是你的人脸检测服务没启用或者没有实名认证，去上面看看吧。
之后选择代码生成，选择NodeJS，此时我们就当一个搬运工，把这里的代码复制即可：

接下来我们把复制的代码加到我们云函数的index.js上面(稍微做点改动)：

const cloud = require('wx-server-sdk')// 云函数入口文件
const tencentcloud = require("tencentcloud-sdk-nodejs"); //腾讯云API 3.0 SDKcloud.init() // 云开发初始化var synDetectFace = function (url) { //调用人脸识别API函数const IaiClient = tencentcloud.iai.v20180301.Client; //API版本const models = tencentcloud.iai.v20180301.Models; //API版本const Credential = tencentcloud.common.Credential;const ClientProfile = tencentcloud.common.ClientProfile;const HttpProfile = tencentcloud.common.HttpProfile;let cred = new Credential("SecretId", "SecretKey"); //腾讯云的SecretId和SecretKeylet httpProfile = new HttpProfile();httpProfile.endpoint = "iai.tencentcloudapi.com"; //腾讯云人脸识别API接口let clientProfile = new ClientProfile();clientProfile.httpProfile = httpProfile;let client = new IaiClient(cred, "", clientProfile);let req = new models.DetectFaceRequest();let params = '{"Url":"输入你自己的样例图片的地址","NeedFaceAttributes":1}'req.from_json_string(params);client.DetectFace(req, function (errMsg, response) {if (errMsg) {console.log(errMsg);return;}console.log(response.to_json_string());});
}synDetectFace();
// 云函数入口函数
exports.main = async (event, context) => {}

记住，把第二行代码多余的那些点点杠杠给删了，因为我们将会使用npm install的方式安装这几个依赖包。
右键选择云函数FaceDetect,然后选择使用终端打开，输入下面两行命令：

npm install tencentcloud-sdk-nodejs --save
npm install wx-server-sdk --save

很诡异的是，在你输入第一个命令的时候，安装成功了，但是输入第二个命令的时候却见鬼了，不管输入几次，都会报错：

npm ERR! Unexpected end of JSON input while parsing near '...-/buffer-2.1.11.tgz"}'npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\23521\AppData\Roaming\npm-cache\_logs\2020-02-04T07_54_43_051Z-debug.log

遇到这个错误不要怕，因为博主也为例这个bug花了很长的时间才解决，后面才发现，我们需要首先清理缓存，输入以下命令：

npm cache clean --force

之后我们把下载改为镜像下载(不是淘宝镜像哦)，输入以下命令：

npm set registry https://registry.npmjs.org/

输入完上面那行命令以后，系统还会继续让你输入，此时已经改为镜像下载，你可以输入你的第二行下载命令了：

npm install wx-server-sdk --save

好！现在总算下载完了，下载完以后，你可别着急，测试一下看看，我们下载的东西是不是真的有用，在当前终端中输入node index.js.
如果出现了一些人脸的信息，那么就是下载成功了。依赖包下载这部总算圆满完成了。

云存储

现在我们进入到云存储环节，打开之前开发工具的云开发按钮，我们就可以看到云开发控制台,之后进入存储管理界面：

之后我们随便上传一张图片(前提是我们小程序image目录里面的，如果没有，可以建一个专门存放图片)，上传以后，会出现一个文件的ID，复制一下。
接下来我们可以看到微信小程序开发的云存储文档,点击这里,我们在这里面可以看到一个函数，可以专门把云存储当中文件对应的ID转换成真实的URL地址，我们每个人都可以调用。我们可以看到这样的代码：

const cloud = require('wx-server-sdk')exports.main = async (event, context) => {const fileList = ['cloud://xxx', 'cloud://yyy']const result = await cloud.getTempFileURL({fileList: fileList,})return result.fileList
}

这个时候咱们应该毫不犹豫的把它复制粘贴搬砖搬过来给我们用。
但是呢我们需要把第三行代码当中的cloud://xxx改成我们上面的文件ID ，我们可以把这几行代码放入到我们云函数的index.js文件当中的主函数：

exports.main = async (event, context) => {const fileList = ['测试上传文件的ID']const result = await cloud.getTempFileURL({fileList,})return result.fileList
}

测试环节

我们干完上面的操作以后，可以缓一口气了，右键选择我们的云函数FaceDetect，然后选择上次并部署所有文件，等待上传成功以后，我们可以在云开发控制台那选择云函数，并且选择云端测试按钮，进行相应的测试，看看我们的云函数是不是可以正常调用，输出结果是不是对的：

之后点击运行测试，如果运行结果当中顺利的出现了fileID和其对应的tempFileURL，就说明云函数部署成功，测试成功。

服务端代码完成

经过上述测试成功以后，我们进行代码整合：

const cloud = require('wx-server-sdk') //小程序云开发SDK
const tencentcloud = require("tencentcloud-sdk-nodejs"); //腾讯云API 3.0 SDK
cloud.init() //云开发初始化
var synDetectFace = function(url) { //人脸识别APIconst IaiClient = tencentcloud.iai.v20180301.Client; //API版本const models = tencentcloud.iai.v20180301.Models; //API版本const Credential = tencentcloud.common.Credential;const ClientProfile = tencentcloud.common.ClientProfile;const HttpProfile = tencentcloud.common.HttpProfile;let cred = new Credential("你的SecretID", "SecretKey"); //腾讯云的SecretId和SecretKeylet httpProfile = new HttpProfile();httpProfile.endpoint = "iai.tencentcloudapi.com"; //腾讯云人脸识别API接口let clientProfile = new ClientProfile();clientProfile.httpProfile = httpProfile;let client = new IaiClient(cred, "", clientProfile); //调用就近地域let req = new models.DetectFaceRequest();let params = '{"Url":"' + url + '","NeedFaceAttributes":1}' //拼接参数，由于人脸识别图片的URL会变化，所有URL采用变量req.from_json_string(params);return new Promise(function(resolve, reject) { //构造异步函数，把人脸识别内容返回client.DetectFace(req, function(errMsg, response) {if (errMsg) {reject(errMsg)} else {resolve(response);}})})
}exports.main = async(event, context) => {const data = event            //在客户端调用云函数的时候返回的数据const fileList = [data.fileID] //读取来自客户端的fileIDconst result = await cloud.getTempFileURL({fileList, //向云存储发起读取文件临时地址请求})const url = result.fileList[0].tempFileURL //一次次调用，fileList里面只有一个data.fileID,因此只需要fileList[0]datas = await synDetectFace(url) //调用异步函数，向腾讯云API发起请求return datas
}

服务端代码完成以后，我们上传到云函数，右键选择云函数，选择上次并部署所有文件，更新云函数。

客户端开发(真正的小程序前端界面+后端调用)

准备阶段

右键选择client文件目录(存放各种页面的目录)，然后新建一个app.json文件，app.js文件(这些是页面目录必须的文件)，选择app.json文件，在里面加入代码：

{"pages": ["pages/index/index"],"window": {"navigationBarBackgroundColor": "#333366","navigationBarTextStyle": "black","navigationBarTitleText": "容颜下的密码","backgroundColor": "#eeeeee","backgroundTextStyle": "light","enablePullDownRefresh": false},"cloud": true,"sitemapLocation": "sitemap0.json"
}

保存文件，就会自动生成相关目录和文件，当然，如果没有生成，也别着急，你可以尝试把pages/index/index重新自己写一遍，然后保存，就可以出来了。

客户端提交上传图片

对于这个功能实现，我们需要在client下面生成的index.js文件里面写入一个相关的功能函数，并且于相关的上传按钮绑定起来即可。对于上传图片功能，开发文档里面讲的比较清楚，博主就负责整合这个资源给大家使用，点击这里进入，我们可以看到里面有各种参数，其中属性我们可以相应的选择好，当选择完图片以后，会把相应的输出结果放入到res当中，我们从res当中得到tempFilePaths，即当前上传图片的图片的本地临时文件路径列表 (本地路径)，代码如下：

 UploadImage(){wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {const tempFilePaths = res.tempFilePathsconsole.log(tempFilePaths)}})},

当我们得到这个当前需要上传的文件临时存储路径以后，我们可以把它上传到云存储上面，得到对应的fileID,然后我们通过对应的函数得到URL，再调用云函数得到脸部信息即可，具体上传云存储的函数可以参考这里,根据这个文档提供的函数我们可以修改代码，在上传文件成功以后，获得相应的临时路径，然后调用这个路径，上传到云存储当中,加入随机数，生成随机的云路径，以便于更多的用户上传：

UploadImage:function(){var random = Date.parse(new Date())+Math.ceil(Math.random()*1000)   //设置云存储路径的随机数，以便于多个用户使用时生成多个路径 wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {const tempFilePaths = res.tempFilePaths[0]   //保存当前生成的临时路径console.log(tempFilePaths)wx.cloud.uploadFile({cloudPath: random+'.jpg',  //云存储路径filePath: tempFilePaths, // 文件路径success: res => {         //成功则回调console.log(res.fileID)      //生成对应的fileID},})}})},

当然，在进入小程序调用云函数之前，我们必须得有一个初始化的环节，即在加载页面的时候，对云环境进行初始化：

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.cloud.init({env: 'test-ws9kn'            //初始化的环境ID，之前建立云环境的时候的ID})},

接下来我们可以进行一个小小的测试，运行小程序，选择图片，如果上传成功以后，控制台打印出了文件的fileID,那么就证明测试成功。

调用云函数处理fileID,返回脸部信息

具体可以参考微信开发者文档当中云函数,我们需要的参数有:name(调用的云函数的名字)，data(云函数需要的参数，即fileID)，因此在上传云存储成功以后，我们再调用云函数处理对应的fileID,得到我们需要的脸部信息,加入相应的代码，其它不变：

wx.cloud.uploadFile({cloudPath: random+'.jpg',filePath: tempFilePaths, // 文件路径success: res => {console.log(res.fileID)wx.cloud.callFunction({name: 'Face_Detection',data: {fileID:res.fileID},success: res => {console.log(res.result)},})},

我们继续进行小小的测试，运行小程序，上传我们需要进行人脸识别的图片，然后观察控制台，如果打印出了对应的人脸信息，那么测试成功。

把得到的人脸数据显示到前端页面

根据上面输出的人脸信息，我们可以看到很多类型的人脸信息，我们具体可以看看腾讯云文档的内容
假设我们需要去看的参数有年龄，是否戴眼镜，是否戴帽子，是否戴口罩，性别，头发长度，是否有刘海，头发颜色等等。此时可以在WXML文件当中加入相应的组件：

<view class="button_view">
<button class="button_size" type="primary" bindtap="UploadImage">上传图片</button>
</view>
<view class="info_view">
<text class="info">颜值：{{Beauty}}</text>
<text class="info">年龄：{{age}}</text>
<text class="info">是否带眼镜：{{glasses}}</text>
<text class="info">是否戴口罩：{{mask}}</text>
<text class="info">是否戴帽子：{{hat}}</text>
<text class="info">性别：{{gender}}</text>
<text class="info">头发长度：{{hair_length}}</text>
<text class="info">有无刘海：{{hair_bang}}</text>
<text class="info">头发颜色：{{hair_color}}</text>
</view>

当然此时前端界面能够看到的参数只有一些具体的数字或者true,false等等，为了更加人性化的设计，我们可以进行相应的改进，比如说gender小于50 的时候,性别为女，再比如说hair_length结果输出为0的时候我们可以把输出改为光头显示在界面上等等，具体改法，可以参考文档，可以利用if语句，switch语句进行改写：

//。。。。。上面代码不变，就在云函数调用成功以后，把信息显示在界面上，当然为了能够把信息显示在界面上就得调用setData函数，但是this不能使用，首先得在UploadImage函数开始的时候写入代码：var that = this    把this给that。
wx.cloud.callFunction({name: 'Face_Detection',data: {fileID:res.fileID},success: res => {that.setData({age: res.result.FaceInfos[0].FaceAttributesInfo.Age,glasses: res.result.FaceInfos[0].FaceAttributesInfo.Glass,beauty: res.result.FaceInfos[0].FaceAttributesInfo.Beauty,mask: res.result.FaceInfos[0].FaceAttributesInfo.Mask,hat: res.result.FaceInfos[0].FaceAttributesInfo.Hat,})if (res.result.FaceInfos[0].FaceAttributesInfo.Gender < 50) {myThis.setData({gender: "女"});} else {myThis.setData({gender: "男"});}switch (res.result.FaceInfos[0].FaceAttributesInfo.Hair.Length) {case 0:myThis.setData({hair_length: "光头"});break;case 1:myThis.setData({hair_length: "短发"});break;case 2:myThis.setData({hair_length: "中发"});break;case 3:myThis.setData({hair_length: "长发"});break;case 4:myThis.setData({hair_length: "绑发"});break;}switch (res.result.FaceInfos[0].FaceAttributesInfo.Hair.Bang) {case 0:myThis.setData({hair_bang: "有刘海"});break;case 1:myThis.setData({hair_bang: "无刘海"});break;}switch (res.result.FaceInfos[0].FaceAttributesInfo.Hair.Color) {case 0:myThis.setData({hair_color: "黑色"});break;case 1:myThis.setData({hair_color: "金色"});break;case 3:myThis.setData({hair_color: "棕色"});break;case 4:myThis.setData({hair_color: "灰白色"});break;}},})},})}})},

对应的如果前端页面的各种值需要随着函数而改变，就必须定义变量，需要在data当中声明这些变量：

 /*** 页面的初始数据*/data: {Beauty: '请上传照片',age: '请上传照片',glasses: '请上传照片',mask: '请上传照片',hat: '请上传照片',gender: '请上传照片',hair_length: '请上传照片',hair_bang: '请上传照片',hair_color: '请上传照片',

显示我们上传的图片

首先得在前端加上图片组件，而图片会随着上传的图片而改变，因此图片地址src也需要变量处理：

<view class="image_view">
<image src="{{image_src}}" style="width:200px;height:200px;"></image>
</view>

并且把这个变量加入到data当中。
我们可以在上传函数执行成功，即上传图片，生成临时路径成功的时候，把临时路径赋值给这个地址变量：

//上面和下面的代码不变
const tempFilePaths = res.tempFilePaths[0]     //上传文件的图片的本地临时文件路径列表 (本地路径)console.log(tempFilePaths)that.setData({image_src: res.tempFilePaths[0]})wx.cloud.uploadFile({                      //将图片上传到云存储

之后就可以显示出我们上传的图片了。

布局优化

打开我们WXSS文件，根据我们的设计需要，设计相关的布局：

.info_view{padding-left: 20px;padding-top: 10px;padding-right: 20px;padding-bottom: 20px;
}
.info{display: flex;flex-direction: column;color: blue;
}
.image_view{display: flex;justify-content: center;background: blanchedalmond
}
.button_view{display: flex;padding-top: 20px;padding-bottom: 20px;
}
.button_size{width: 200px;height: 50px;}

博主还加了一个进度条(根据上传进度，时间，加入到上传进度当中具体参考API,并且这里的代码中，我们将wx.cloud.uploadFile存为名为uploadTask的变量，然后在最后调用onProgressUpdate(res)方法，并通过setData方法，将数据展示在前端
，识别状态栏(信息读取成功会在界面上显示加载成功，识别过程中会显示消息栏：加载中，具体参考这里)
整个AI人脸识别的小程序样例大概就出来了，界面可以进行相关的优化,这个大家可以根据自己的需要把界面优化，变得更加漂亮，博主写了这么久，也写不下去了，接下来就看大家自己去优化了，有想法就去做。我上面讲的也差不多了。这是我上传图片后的样例：

最后，看博主写了一天的博客了，博主不求什么打赏啥的，博主觉得转发这篇博客就是对博主最大的馈赠了，最后，祝大家新的一年里，越来越好！！！也欢迎大家关注我的个人博客，在下所有的文章都是从个人博客导入进来的，文章会首先更新在个人博客里。希望我的博客能够给大家带来收获！

与这篇文章一个系列的还有：
微信小程序从入门到入坑
天气之子

云开发：让你拥有自己的第一个AI人脸识别小程序相关推荐

微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
小程序云开发搜索功能的实现正则_几行代码实现小程序云开发提现功能
先看效果: 纯云开发实现,下面说使用步骤:一:开通商户的企业付款到领取功能说明地址: https://pay.weixin.qq.com/wiki/doc/api/tools/mch_pay.php? ...
小程序云开发搜索功能的实现正则_码code | 如何借助小程序云开发实现小程序支付功能...
转载来源:编程小石头我们在做小程序支付相关的开发时,总会遇到这些难题.小程序调用微信支付时,必须要有自己的服务器,有自己的备案域名,有自己的后台开发.这就导致我们做小程序支付时的成本很大. 本节就来 ...
用java开发一个人脸识别小程序demo
转载自: https://shimo.im/docs/qDyGddWVhRXVpv8r/read https://shimo.im/docs/GHcvW3WyVQRXckdG/read https:/ ...
PHP人脸识别小程序接口(阿里云OpenAPI)
这两天接的小程序用了阿里云的openapi--人脸识别接口,讲下大体流程和代码先进入人脸识别文档,开通该服务然后建立RAM子账号,并设置accessKey,并记下两个参数使用阿里云新版php-s ...
python3+opencv+tkinter开发简单的人脸识别小程序
学校里有门图像处理的课程最终需要提交一个图像处理系统, 正好之前对于opencv有些了解,就简单的写一个人脸识别小程序吧效果图如下笔者IDE使用Pycharm,GUI编程直接使用内置的tkinte ...
实战丨用云开发快速构建最美AI毕业照小程序
项目背景为什么要做这个小程序疫情原因,2020年的毕业季也不同了.很多毕业生没有举办正式的毕业典礼,也没有照毕业照,觉得这是人生的一大遗憾.为了弥补这一遗憾,我尝试用云开发快速实现一个云毕业照小程 ...
微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别——基于腾讯云开发者实验项目
微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别--基于腾讯云开发者实验项目开通腾讯云相关权限(AI人脸识别,文字识别-身份证识别) 查看API密钥部署微信小程序成功演示代码包开通腾 ...
名片识别 php,小程序云开发实战：实现 AI 智能名片识别小程序
本次分享是针对对小程序·云开发感兴趣的朋友推出的入门课程,内容以基础+实战的方式呈现,通过实战"名片小程序"开发,讲解云开发的功能与开发优势,为开发者提供提高开发效率的方法与灵感. ...

云开发：让你拥有自己的第一个AI人脸识别小程序