微信小程序?qū)崿F(xiàn)拍照打卡功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)拍照打卡的具體代碼,供大家參考,具體內(nèi)容如下
由于拍照組件是相當(dāng)于一個(gè)塊,用隱藏顯示的方法不太好,為了更好的用戶交互,選擇了在一個(gè)新的頁面調(diào)用相機(jī)組件,上傳圖片并保存打卡數(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: '當(dāng)前位置不允許打卡',
? ? })
? }
},
//跳轉(zhuǎn)到拍照頁面方法
toPhoto(data){
? let signData = JSON.stringify(data);
? wx.navigateTo({
? ? url: './takePhoto?signData='+signData,?? ?//跳轉(zhuǎn)到自定義的一個(gè)拍照頁面
? })
}
//自動(dòng)獲取時(shí)間,并實(shí)時(shí)顯示
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后臺(tái)
保存照片
@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())) {
? ? ? ? ? ? ? ? // 項(xiàng)目在容器中實(shí)際發(fā)布運(yùn)行的根路徑
// ? ? ? ? ? ? ? ? ? ?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("文件類型錯(cuò)誤");
? ? ? ? ? ? }
? ? ? ? }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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap柵格系統(tǒng)簡單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Boostrap柵格系統(tǒng)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
js實(shí)現(xiàn)單一html頁面兩套css切換代碼
研究了一下JS的用setAttribute方法實(shí)現(xiàn)一個(gè)頁面兩份樣式表的效果與大家分享下,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04
JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法
這篇文章主要介紹了JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法,實(shí)例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
微信小程序wx.request實(shí)現(xiàn)后臺(tái)數(shù)據(jù)交互功能分析
這篇文章主要介紹了微信小程序wx.request實(shí)現(xiàn)后臺(tái)數(shù)據(jù)交互功能,分析微信小程序wx.request在后臺(tái)數(shù)據(jù)交互過程中遇到的問題與相關(guān)的解決方法,需要的朋友可以參考下2017-11-11
微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果,手機(jī)登錄、填手機(jī)號(hào)獲取驗(yàn)證碼,倒計(jì)時(shí)后重新獲取效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
javascript正則表達(dá)式之分組概念與用法實(shí)例
這篇文章主要介紹了javascript正則表達(dá)式之分組概念與用法,結(jié)合實(shí)例形式分析了javascript正則表達(dá)式分組的功能、定義與使用方法,需要的朋友可以參考下2016-06-06

