微信小程式實現點選拍照長按錄影功能

2022-05-01 16:06:11 字數 1440 閱讀 5695

**裡面注釋寫的都很詳細,直接上**。官方的元件屬性中有觸控開始和觸控結束屬性。本功能依靠這些屬性實現。

.wxml**:

點選/長按

.wxss**:
/* pages/camera/camera.wxss */

cover-image,video

#btn-photo-video

.js**:
// pages/camera/camera.js

page(,

/*** 生命週期函式--監聽頁面載入

*/onload: function(options) ,

/*** 生命週期函式--監聽頁面初次渲染完成

*/onready: function() ,

/*** 生命週期函式--監聽頁面顯示

*/onshow: function() ,

/*** 生命週期函式--監聽頁面隱藏

*/onhide: function() ,

/*** 生命週期函式--監聽頁面解除安裝

*/onunload: function() ,

/*** 頁面相關事件處理函式--監聽使用者下拉動作

*/onpulldownrefresh: function() ,

/*** 頁面上拉觸底事件的處理函式

*/onreachbottom: function() ,

/*** 使用者點選右上角分享

*/},

/*** 獲取系統資訊 設定相機的大小適應螢幕

*/setcamerasize() )

console.log(res)

},/**

*拍照的方法

*/takephoto() )

},fail()

})},

/*** 開始錄影的方法

*/startshootvideo() )

},fail()

})},

/*** 結束錄影

*/stopshootvideo() )

},fail()

})},

//touch start 手指觸控開始

handletouchstart: function(e) ,

//touch end 手指觸控結束

handletouchend: function(e)

},/**

* 點選按鈕 - 拍照

*/handleclick: function(e)

},/**

* 長按按鈕 - 錄影

*/handlelongpress: function(e) ,

})

----------------------------- end -----------------------------

微信小程式區分點選,長按事件

touchstart 手指觸控 longtap 手指觸控後後,超過350ms離開 touchend 手指觸控動作結束 tap 手指觸控後離開 事件觸發順序 單擊touchstart touchend tap 長按touchstart longtap touchend tap 通過上 可以發現,單擊事...

微信小程式中點選收藏類似功能

data click else view catchtap ok icon wx if type success color red icon wx else type success color green view 在這個ok方法中,犯了乙個低階的錯誤,this.islove 當成 this.d...

微信小程式 元件間獲取點選事件

子元件component 父元件 設定id才能獲取到元件元素 quit quit 生命週期函式 監聽頁面載入 onload function options 子元件 使用triggerevent方法,第乙個引數為自定義事件名稱 this triggerevent quitevent 父元件 在父頁面...