微信小程序?qū)崿F(xiàn)拍照打卡功能
本文實例為大家分享了微信小程序?qū)崿F(xiàn)拍照打卡的具體代碼,供大家參考,具體內(nèi)容如下
由于拍照組件是相當于一個塊,用隱藏顯示的方法不太好,為了更好的用戶交互,選擇了在一個新的頁面調(diào)用相機組件,上傳圖片并保存打卡數(shù)據(jù)的方式。
小程序端
簽到頁面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 = { ? ? //簽到需要保存的數(shù)據(jù) ? } ? if(this.data.signDisabled){//在打卡距離內(nèi) ? ? 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: '當前位置不允許打卡', ? ? }) ? } }, //跳轉(zhuǎn)到拍照頁面方法 toPhoto(data){ ? let signData = JSON.stringify(data); ? wx.navigateTo({ ? ? url: './takePhoto?signData='+signData,?? ?//跳轉(zhuǎn)到自定義的一個拍照頁面 ? }) } //自動獲取時間,并實時顯示 function showTime(obj){ ? var today,year,month,day,hour,second,minute; ? var strTime; ? var strDate; ? today=new Date(); ? var year=today.getFullYear(); ? var month=today.getMonth(); ? var day=today.getDate(); ? hour = today.getHours(); ? minute =today.getMinutes(); ? second = today.getSeconds(); ? strDate = year+"年"+check(month)+"月"+check(day)+"日"; ? strTime = check(hour)+":"+check(minute)+":"+check(second); ? obj.setData({ ? ? signTime : strTime ? }) }
拍照頁面wxml
<view> ? <camera class="camera" device-position='{{devicePosition}}'> ? ? <cover-view> ? ? ? <cover-image wx:if="{{havaPhoto}}" src="{{src}}"></cover-image> ? ? </cover-view> ? </camera> ? <view hidden="{{havaPhoto}}" style="background-color:black;height:15vh"> ? ? <button bindtap="takePhoto" class="takeButton" style="left:45vw">拍照</button> ? ? <button bindtap="changeCamera" class="takeButton" style="right:15vw">轉(zhuǎn)換</button> ? </view> ? <view hidden="{{!havaPhoto}}" style="background-color:black;height:15vh"> ? ? <button bindtap="retake" class="takeButton" style="left:15vw">重拍</button> ? ? <button bindtap="signPhoto" class="takeButton" style="left:45vw">打卡</button> ? </view> </view>
拍照頁面js
takePhoto(){//拍照按鈕 ? let ctx = wx.createCameraContext(); ? let _self = this; ? ctx.takePhoto({ ? ? quality: 'high',//high,normal,low ? ? success: (res) => { ? ? ? _self.setData({ ? ? ? ? src:res.tempImagePath, ? ? ? ? havaPhoto:true ? ? ? }) ? ? } ? }) }, retake(){//重新拍攝 ? this.setData({ ? ? havaPhoto:false, ? ? src:'' ? }) }, changeCamera(){//轉(zhuǎn)換攝像頭 ? if(this.data.devicePosition=='front'){ ? ? this.setData({ ? ? ? devicePosition:'back' ? ? }) ? }else{ ? ? this.setData({ ? ? ? devicePosition:'front' ? ? }) ? } }, signPhoto(){//上傳文件,并保存打卡數(shù)據(jù) ? let _self = this; ? wx.uploadFile({ ? ? url: getApp().globalData.requestPath + '/sign/saveSignPhoto', ? ? filePath: _self.data.src, ? ? name: 'filePath', ? ? formData: { ? ? ? 'user': _self.data.signData.userId ? ? }, ? ? success: function (res) { ? ? ? let resData = JSON.parse(res.data); ? ? ? let data = _self.data.signData; ? ? ? data.imagePath = resData.msg; ? ? ? if(res.statusCode==200 && resData.success){ ? ? ? ? wx.request({ ? ? ? ? ? url: getApp().globalData.requestPath + '/sign/saveSignRuleData', ? ? ? ? ? data: data, ? ? ? ? ? method:'POST', ? ? ? ? ? header: {'content-type': 'application/json'}, ? ? ? ? ? success: function (result) { ? ? ? ? ? ? if(result.data.success){ ? ? ? ? ? ? ? wx.showToast({ ? ? ? ? ? ? ? ? title: '打卡成功', ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? setTimeout(() => { ? ? ? ? ? ? ? ? wx.navigateBack(); ? ? ? ? ? ? ? }, 2000); ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? wx.showToast({ ? ? ? ? ? ? ? ? icon:'none', ? ? ? ? ? ? ? ? title: result.data.msg, ? ? ? ? ? ? ? }) ? ? ? ? ? ? } ? ? ? ? ? } ? ? ? ? }) ? ? ? }else{ ? ? ? ? wx.showToast({ ? ? ? ? ? title: resData.msg, ? ? ? ? }) ? ? ? ? setTimeout(() => { ? ? ? ? ? wx.navigateBack(); ? ? ? ? }, 2000); ? ? ? } ? ? } ? }) }
Java后臺
保存照片
@RequestMapping("/saveSignPhoto") @ResponseBody public AjaxResult saveSignPhoto(HttpServletRequest request, @RequestParam(value = "filePath", required = false) MultipartFile file) throws IOException { ? ? String fileName = file.getOriginalFilename(); ? ? String path; ? ? String type; ? ? String trueFileName; ? ? String basePath = "D:/file/"; ? ? String user = request.getParameter("user"); ? ? if(!file.isEmpty()) { ? ? ? ? type = fileName.contains(".") ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null; ? ? ? ? if (type != null) { ? ? ? ? ? ? if ("PNG".equals(type.toUpperCase())||"JPG".equals(type.toUpperCase())) { ? ? ? ? ? ? ? ? // 項目在容器中實際發(fā)布運行的根路徑 // ? ? ? ? ? ? ? ? ? ?String realPath = request.getSession().getServletContext().getRealPath("/"); ? ? ? ? ? ? ? ? // 自定義的文件名稱 ? ? ? ? ? ? ? ? trueFileName = System.currentTimeMillis() + "_" +user + "_" + sdf.format(new Date()) + "." +type; ? ? ? ? ? ? ? ? // 設(shè)置存放圖片文件的路徑 ? ? ? ? ? ? ? ? path = basePath + trueFileName; ? ? ? ? ? ? ? ? file.transferTo(new File(path)); ? ? ? ? ? ? }else { ? ? ? ? ? ? ? ? return AjaxResult.errorResult("文件類型錯誤"); ? ? ? ? ? ? } ? ? ? ? }else { ? ? ? ? ? ? return AjaxResult.errorResult("文件類型不存在"); ? ? ? ? } ? ? }else { ? ? ? ? return AjaxResult.errorResult("文件不存在"); ? ? } ? ? return AjaxResult.successResult(trueFileName); }
保存打卡數(shù)據(jù)
@RequestMapping("/saveSignRuleData") @ResponseBody public AjaxResult saveSignRuleData(@RequestBody BgCard bgCard){ ? ? boolean flag = signDataService.saveSignRuleData(bgCard); ? ? if(flag){ ? ? ? ? return AjaxResult.successResult(); ? ? }else { ? ? ? ? return AjaxResult.errorResult("保存失敗"); ? ? } }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap柵格系統(tǒng)簡單實現(xiàn)代碼
這篇文章主要為大家詳細介紹了Boostrap柵格系統(tǒng)的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法
這篇文章主要介紹了JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法,實例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03微信小程序wx.request實現(xiàn)后臺數(shù)據(jù)交互功能分析
這篇文章主要介紹了微信小程序wx.request實現(xiàn)后臺數(shù)據(jù)交互功能,分析微信小程序wx.request在后臺數(shù)據(jù)交互過程中遇到的問題與相關(guān)的解決方法,需要的朋友可以參考下2017-11-11