微信小程序 拍照打卡功能实现

由于拍照组件是相当于一个块，用隐藏显示的方法不太好，为了更好的用户交互，选择了在一个新的页面调用相机组件，上传图片并保存打卡数据的方式。

小程序端

签到页面wxml

<view class="signBtn" bindtap="signSubmit">
  <view>{
   {
   signTime}}</view>
  <view>打卡签到</view>
</view>

签到页面js

onLoad: function (options) {
   
  setInterval(function(){
    showTime(_self); }, 1000);
},

//签到按钮方法
signSubmit(){
   
  let _self = this.data;
  let userInfo = this.data.ruleInfo;
  let data = {
   
    //签到需要保存的数据
  }
  if(this.data.signDisabled){
   //在打卡距离内
    if(this.data.photoDisabled){
   //需要拍照人员
      this.toPhoto(data);
      return true;
    }
    wx.request({
   
      url: getApp().globalData.requestPath + '/sign/saveSignRuleData',
      data: data,
      method:'POST',
      header: {
   'content-type': 'application/json'},
      success: function (res) {
   
        if(res.data.success){
   
          wx.showToast({
   
            title: '打卡成功',
          })
        }else{
   
          wx.showToast({
   
            icon:'none',
            title: res.data.msg,
          })
        }
      }
    })
  }else{
   
    wx.showToast({
   
      icon: 'none',
      title: '当前位置不允许打卡',
    })
  }
},

//跳转到拍照页面方法
toPhoto(data){
   
  let signData = JSON