微信小程序使用相機組件如何實現(xiàn)

許多小程序都會用到相機，那么相機組件是如何實現(xiàn)的，下面為大家介紹這篇文章。

1. <view class="page-body">
2. <view class="page-body-wrapper">
3. <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
4. <view class="btn-area">
5. <button type="primary" bindtap="takePhoto">拍照</button>
6. </view>
7. <view class="btn-area">
8. <button type="primary" bindtap="startRecord">開始錄像</button>
9. </view>
10. <view class="btn-area">
11. <button type="primary" bindtap="stopRecord">結(jié)束錄像</button>
12. </view>
13. <view class="preview-tips">預覽</view>
14. <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
15. <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
16. </view>
17. </view>

1. onLoad() {
2. this.ctx = wx.createCameraContext()
3. },
4. takePhoto() {
5. this.ctx.takePhoto({
6. quality: 'high',
7. success: (res) => {
8. this.setData({
9. src: res.tempImagePath
10. })
11. }
12. })
13. },
14. startRecord() {
15. this.ctx.startRecord({
16. success: (res) => {
17. console.log('startRecord')
18. }
19. })
20. },
21. stopRecord() {
22. this.ctx.stopRecord({
23. success: (res) => {
24. this.setData({
25. src: res.tempThumbPath,
26. videoSrc: res.tempVideoPath
27. })
28. }
29. })
30. },
31. error(e) {
32. console.log(e.detail)
33. }

1. /* pages/one/one.wxss */
2. .preview-tips {
3. margin: 20rpx 0;
4. }
5.  
6. .video {
7. margin: 50px auto;
8. width: 100%;
9. height: 300px;
10. }

Hishop小程序工具開發(fā)公司長沙海商，是一家有著十年技術前沿的公司，我們以先進技術提供并解決各行業(yè)小程序開發(fā)，操作簡單，支持多種社群營銷活動，以及可視化模板操作，大大減少人力物力成本。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店