商城系统 注册

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

2018-07-27|HiShop
导读:许多小程序都会用到相机,那么相机组件是如何实现的,下面为大家介绍这篇文章。...

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

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

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

  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. }

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

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

电话咨询 预约演示 0元开店