小程序项目-颜值检测——基础布局、选择图片操作、上传图片到AI接口进行检测、检测结果数据展示、小程序分享窗口定制

小程序项目-颜值检测——基础布局、选择图片操作、上传图片到AI接口进行检测、检测结果数据展示、小程序分享窗口定制

• 步骤

  • 获取图片的信息（上一步选择的图片）
  • 调用文件上传微信API把图片上传到AI接口
  • AI接口会在后台检测颜值信息，然后返回
  • 小程序接收到结果之后显示到页面

• wx.uploadFile()

  • url 图片上传地址
  • filePath 本地图片的路径
  • name 提供给服务器的图片的获取名称
    • success 上传成功的回调函数
      • result.data.face[0] 表示服务器返回数据

// 实现图片上传检测颜值功能
checkImage: function (path) {
  // 把选中的图片上传给AI接口进行颜值检测
  wx.uploadFile({
    // 上传的地址
    url: 'https://ai.qq.com/cgi-bin/appdemo_detectface',
    // 本地选中的图片路径
    filePath: path,
    // 用于服务器接收上传的图片
    name: 'image_file',
    success: (res) => {
      let obj = JSON.parse(res.data)
      this.setData({
        result: obj.data.face[0]
      })
    }
  })
}

success: (res) => {
  let obj = JSON.parse(res.data)
  if (obj.data.face.length === 0) {
    // 选中的图片不合理，请换一张再试
    wx.showToast({
      title: '选中的图片不合理，请换一张再试'
    })
    return
  }
  this.setData({
    result: obj.data.face[0]
  })
}

<!-- 检测结果 -->
<view class="ret" wx:if='{{result}}'>
  <view>性别：{{result && result.gender>50?'男': '女'}}</view>
  <view>是否戴眼镜：{{result && result.glass }}</view>
  <view>颜值：{{result && result.beauty}}</view>
  <view>年龄：{{result && result.age}}</view>
</view>

小程序分享

• onShareAppMessage() 分享功能

  onShareAppMessage: function () {
    // 定制分享的效果
    return {
      // 分享弹窗的标题
      title: '试试你的颜值',
      // 分享的默认页面路径
      path: '/pages/ai/index',
      // 弹窗缩略图的图片路径
      imageUrl: '/image/itcast.png'
    }
  }

源码

文件结构

案例结构-index.wxml

<!-- 页面背景 -->
<image src="{{bgImg}}" />
<!-- 上传图片按钮 -->
<button bindtap="selectImage">上传图片</button>
<!-- 检测结果 -->
<view class="ret" wx:if='{{result}}'>
  <view>性别：{{result && result.gender>50?'男': '女'}}</view>
  <view>是否戴眼镜：{{result && result.glass }}</view>
  <view>颜值：{{result && result.beauty}}</view>
  <view>年龄：{{result && result.age}}</view>
</view>

案例样式-inde.wxss

image {
  position: fixed;
  width: 100%;
  height: 100%;
}

button {
  position: fixed;
  bottom: 100rpx;
  width: 300rpx;
  left: 50%;
  margin-left: -150rpx;
}

.ret {
  position: fixed;
  left: 50%;
  margin-left: -200rpx;
  bottom: 200rpx;
  width: 400rpx;
  height: 200rpx;
  color: #fff;
  background: rgba(0, 0, 0, 0.5)
}

案例逻辑-index.js

// pages/ai/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bgImg: '/imgs/bg.jpg',
    result: null
  },

  checkImage: function (path) {
    // 把选中的图片上传给AI接口进行颜值检测
    wx.uploadFile({
      // 上传的地址
      url: 'https://ai.qq.com/cgi-bin/appdemo_detectface',
      // 本地选中的图片路径
      filePath: path,
      // 用于服务器接收上传的图片
      name: 'image_file',
      success: (res) => {
        let obj = JSON.parse(res.data)
        console.log(obj)
        if (obj.data.face.length === 0) {
          // 选中的图片不合理，请换一张再试
          wx.showToast({
            title: '选中的图片不合理，请换一张再试'
          })
          return
        }
        this.setData({
          result: obj.data.face[0]
        })
      }
    })
  },

  selectImage: function () {
    // 本地相册选择图片或者调用摄像头拍照
    wx.chooseImage({
      // 选中图片的类型
      sizeType: ['original', 'compressed'],
      // 选择图片的方式
      sourceType: ['album', 'camera'],
      success: (res) => {
        // 获取选中图片的路径
        let path = res.tempFilePaths[0]
        this.setData({
          bgImg: path
        })
        // 调用接口进行颜值检测
        this.checkImage(path)
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      // 分享弹窗的标题
      title: '试试你的颜值',
      // 分享的默认页面路径
      path: '/pages/ai/index',
      // 弹窗缩略图的图片路径
      imageUrl: '/imgs/pic.png'
    }
  }
})

配置文件index.json

{
  "usingComponents": {}
}

实例图-上传数据信息

实例效果图

实例代码

颜值检测

• wx.uploadFile()
  • url 图片上传地址
  • filePath 本地图片的路径
  • name 提供给服务器的图片的获取名称
    • success 上传成功的回调函数
      • result.data.face[0] 表示服务器返回数据

  // 把图片上传给AI接口做颜值检测
  detectImage (path) {
    // 缓存this
    let that = this;
    wx.uploadFile({
      // 文件上传到哪里：url地址
      url: 'https://ai.qq.com/cgi-bin/appdemo_detectface',
      // 要上传的图片的路径
      filePath: path,
      // 提供给服务器使用（服务器根据该名称值获取图片内容）
      name: 'image_file',
      // 获取服务器返回的结果
      success: function (res) {
        // console.log(res);
        // console.log(typeof res.data);
        // 把字符串转化为json对象
        let info = JSON.parse(res.data);
        let ret = info.data.face[0];

        if(!ret) {
          // 后台没有返回数据,终止后续代码的执行
          wx.showToast({
            title: '图片无效'
          });
          return;
        }

        // 更新页面数据
        that.setData({
          gender: ret? ret.gender: '',
          age: ret? ret.age: '',
          beauty: ret? ret.beauty: '',
          glass: ret? ret.glass: ''
        });
      }
    })
  }

测试结果分析

• onShareAppMessage() 分享功能

  onShareAppMessage: function () {
    return {
      title: '颜值测试',
      path: '/pages/ai/index',
      imageUrl: '/assets/icon.jpg'
    }
  }