微信小程序使用相机组件如何实现

许多小程序都会用到相机，那么相机组件是如何实现的，下面为大家介绍这篇文章。

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">结束录像</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. }

小程序工具开发公司长沙，是一家有着十年技术前沿的公司，我们以先进技术提供并解决各行业小程序开发，操作简单，支持多种社群营销活动，以及可视化模板操作，大大减少人力物力成本。

小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店