2小时搭建微信小程序------人脸颜值检测

一、在app.json文件中新增一个页面home

1. app.json中代码如下

 {
  "pages":[
    "pages/home/home"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

二、在home.wxml中增加三个组件样式

代码如下：

<camera style="width:100%; height:{{wh}}px;" device-position="{{position}}"
wx:if="{{src === ''}}"> 
  <cover-view class="btns-box">
    <cover-image src="/images/icon/xiangce.png" bindtap="chosePhoto"></cover-image>
    <cover-image src="/images/icon/paizhao.png" bindtap="takePhoto"></cover-image>
    <cover-image src="/images/icon/fanzhaun.png" bindtap="reverse"></cover-image>
  </cover-view>
</camera>

<view wx:else >
  <image src="{{src}}" style="height: {{wh}}px; width: 100%; display: block;" mode="aspectFill"></image>
  <button type="warn" class="reChoose" bindtap="reChoose">重选照片</button>

  <view class="faceinfo-box" wx:if="{{faceinfo.age !== undefined}}">
    <view class="row">
      <text>年龄：{{faceinfo.age}}岁</text>
      <text>性别: {{map.gender[faceinfo.gender.type]}}</text>
    </view>
    <view class="row">
      <text>颜值：{{faceinfo.beauty}}分</text>
      <text>表情：{{map.expression[faceinfo.expression.type]}}</text>
    </view>
    <view class="row">
      <text>眼镜：{{map.glasses[faceinfo.glasses.type]}}</text>
      <text>情绪：{{map.emotion[faceinfo.emotion.type]}}</text>
    </view>
  </view>
</view>

三、home.wxss中增加样式

代码如下：

/* pages/home/home.wxss */
.btns-box{
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 50px;
  width: 100%;
  z-index: 999;
}

.btns-box cover-image{
  width: 50px;
  height: 50px;
}

.reChoose{
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.faceinfo-box{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 350rpx;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  box-shadow: 0 3px 10px white;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.row{
  display: flex;
  justify-content: space-around;
}

四、在home.js中增加逻辑控制函数

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    wh:0,
    position: 'back',
    src: '',
    token: '',
    faceinfo: {},
    map: {
      gender:{
        male: '男',
        female: '女'
      },
      expression: {
        none: '无表情',
        smile: '微笑',
        laugh: '大笑' 
      },
      glasses:{
        none:'无眼镜',
        common: '普通眼镜',
        sun: '太阳镜'
      },
      emotion: {
        angry:'愤怒', 
        disgust: '厌恶' ,
        fear: '恐惧',
        happy: '高兴', 
        sad: '伤心', 
        surprise: '惊讶', 
        neutral: '无表情', 
        pouty: '撅嘴', 
        grimace: '鬼脸'
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取设备信息
    const sysinfo = wx.getSystemInfoSync()
    //console.log(sysinfo.screenHeight);
    this.setData({
      wh :sysinfo.screenHeight
    })
    //console.log(this.data.wh)
  },
  //切换摄像头
  reverse(){
    this.setData({
      position: this.data.position === 'back' ? 'front' : 'back' 
    })
  },
  //点击拍照
  takePhoto(){
    const ctx = wx.createCameraContext()

    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        //console.log(res.tempImagePath)
        this.setData({
          src: res.tempImagePath
        },() => {
          //获取颜值数据
          this.getFaceInfo()
        })
      }
    })
  },
  //选择照片
  chosePhoto(){
    wx.chooseImage({
      count: 1,
      sizeType: ['original'],
      sourceType: ['album'],
      success : (res) => {
        if(res.errMsg === 'chooseImage:ok' && res.tempFilePaths.length !== 0){
          this.setData({
            src: res.tempFilePaths[0]
          },() => {
            this.getFaceInfo()
          })
        }
      }
    })
  },

  //重置  回到拍照页面
  reChoose(){
    this.setData({
      src: '',
      faceinfo: '',
      token: '',
    })
  },

  //获取颜值数据
  getFaceInfo(){
    wx.request({
      method: 'POST',
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=svHGVAOjqsfOrDVBurfQZvLC&client_secret=4HqsLCiv78417iz1fML1V7nWEvG8IB0x',
      success: (res) => {
       // console.log(res)
        this.setData({
          token: res.data.access_token
        },() => {
          this.processParams()
        })
      }
    })
  },

  //处理参数
  processParams(){
    const params = {
      image: '',
      image_type: 'BASE64',
      face_field: 'age,gender,beauty,expression,glasses,emotion'
    }

    const fileMangaer = wx.getFileSystemManager()
    fileMangaer.readFile({
      filePath: this.data.src,
      encoding: 'base64',
      success: (res) => {
        //console.log(res)
        params.image = res.data
        
        this.testFace(params)
      }
    })
  },

  //发请求，检测颜值数据
  testFace(params){
    wx.showLoading({
      title: '颜值检测中....',
    })
    //console.log(params)
    wx.request({   
      method: 'POST',
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token='+this.data.token,
      header:{
        'Content-Type': 'application/json'
      },
      data: params,
      success: (res) => {
        console.log(res)
        if(res.errMsg === 'request:ok' && res.data.result !== null && res.data.result.face_num !==0){
          console.log("人脸识别的数据为：")
          console.log(res.data.result.face_list[0])
          this.setData({
            faceinfo: res.data.result.face_list[0]
          })
        }  
      },
      complete: () => {
        wx.hideLoading()
      }
    })
  }
  
})

五、别忘在微信开发者平台增加request合法域名