最近學習了關於微信小程式中的人臉識別功能，收穫頗多。

首先我們看一下頁面：

這是前臺頁面的程式碼，都是些微信小程式中的控制元件，也用到了Weui的樣式。

<form bindsubmit='formSubmit'>
    <view class="weui-cells weui-cells_after-title" style='margin-top:30rpx;'>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">學號</view>
      </view>
      <view class="weui-cell__bd">
        <input name="no" class="weui-input" placeholder="請輸入學號"/>
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">姓名</view>
      </view>
      <view class="weui-cell__bd">
        <input name="name" class="weui-input" placeholder="請輸入姓名"/>
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__bd">性別</view>
      <input style='width:350rpx;' class="weui-input" name="sex" value='{{sex}}'/>
       <view class="weui-cell__ft">
          <switch checked bindchange="switch1Change"/>
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">年齡</view>
      </view>
      <view class="weui-cell__bd">
        <input name="age" class="weui-input" placeholder="請輸入年齡"/>
      </view>
    </view>
    
            <view class="weui-cells">
          <view class="weui-cell">
            <view class="weui-cell__bd">
              <view class="weui-uploader">
                <view class="weui-uploader__hd">
                  <view class="weui-uploader__title">個人照片</view>
                  <!-- <view class="weui-uploader__info">{{imageList.length}}/{{count[countIndex]}}</view> -->
                </view>
                <view class="weui-uploader__bd">
                  <view class="weui-uploader__files">
                    <block wx:for="{{imageList}}" wx:for-item="image">
                      <view class="weui-uploader__file">
                        <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
                      </view>
                    </block>
                  </view>
                  <view class="weui-uploader__input-box">
                    <view class="weui-uploader__input" bindtap="chooseImage"></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

  </view>

    <view class="page__bd page__bd_spacing" style='margin-top:30rpx;'>
        <button form-type='submit' class="weui-btn" type="primary">登入</button>
    </view>

</form>
 

當然，功能是通過JS程式碼實現的，接下來看一下JS程式碼：

//index.js
//獲取應用例項

Page({
  data: {
    // motto: 'Hello World',
    // userInfo: {},
    // hasUserInfo: false,
    // canIUse: wx.canIUse('button.open-type.getUserInfo')
    sex:'男',
    imageList:[]
  },
  switch1Change:function(e){
    console.log(e);
    if(e.detail.value){
      this.setData({sex:'男'})
    }else{
      this.setData({sex:'女'})
    }
  },
  // 選擇圖片或者拍照
  chooseImage: function () {
    var that=this
    wx.chooseImage({
      count: 1, // 預設9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
      success: function (res) {
        console.log(res);
        // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
        // var tempFilePaths = res.tempFilePaths
        that.setData({
          imageList: res.tempFilePaths
        }) 
      }
    })
  },
  // 預覽圖片
  previewImage:function(e){
    var current = e.target.dataset.src
    wx.previewImage({
      current: current, // 當前顯示圖片的http連結
      urls: this.data.imageList // 需要預覽的圖片http連結列表
    })
  },
  // 上傳圖片
  upload:function(){
    wx.uploadFile({
      url: 'http://yk363890296.hk01.bdysite.com/server/index.php/home/index/upload', //僅為示例，非真實的介面地址
      filePath: this.data.imageList[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function (res) {
        var data = res.data
        console.log(data);
        var json = JSON.parse(res.data);
        wx.showToast({
          title: json.msg,
          icon:'none',
          duration:3000
        })
        
      }
    })
  },
  // 提交資料
  formSubmit:function(e){
    console.log(e);
    wx.request({
      url: 'http://yk363890296.hk01.bdysite.com/server/index.php/home/index/index',
      data: e.detail.value,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success:(res)=>{
        console.log(res);
        if(res.error){
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 3000
          })
        }else{
          wx.showToast({
            title: '新增成功',
            icon: 'none',
            duration: 3000
          })

          this.upload();
        }
      }

    })
  },

  //事件處理函式
  // bindViewTap: function() {
  //   wx.navigateTo({
  //     url: '../logs/logs'
  //   })
  // },
  onLoad: function () {
    // if (app.globalData.userInfo) {
    //   this.setData({
    //     userInfo: app.globalData.userInfo,
    //     hasUserInfo: true
    //   })
    // } else if (this.data.canIUse){
    //   // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
    //   // 所以此處加入 callback 以防止這種情況
    //   app.userInfoReadyCallback = res => {
    //     this.setData({
    //       userInfo: res.userInfo,
    //       hasUserInfo: true
    //     })
    //   }
    // } else {
    //   // 在沒有 open-type=getUserInfo 版本的相容處理
    //   wx.getUserInfo({
    //     success: res => {
    //       app.globalData.userInfo = res.userInfo
    //       this.setData({
    //         userInfo: res.userInfo,
    //         hasUserInfo: true
    //       })
    //     }
    //   })
    // }
  },
  // getUserInfo: function(e) {
  //   console.log(e)
  //   app.globalData.userInfo = e.detail.userInfo
  //   this.setData({
  //     userInfo: e.detail.userInfo,
  //     hasUserInfo: true
  //   })
  // }
})
 

以上程式碼就是實現個人資訊提交到資料庫功能的程式碼以及上傳照片到伺服器的功能。

總之，難度還不是很大，只不過我們還沒有做到更深層次的功能，當然也感謝同學以及老師對於我的幫助。