小程序模板網(wǎng)

微信小程序使用相機

發(fā)布時間：2018-07-27 11:56 所屬欄目：小程序開發(fā)教程

 

 
 
 

 

 

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

						

							 

						

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

						

							 

						

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

							
				

			
		

		

			 

	





            


            


            

            

                

                    易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
                    碼云倉庫:starfork
                

                

                    本文地址：http://22321a.com/wxmini/doc/course/24663.html 復(fù)制鏈接 
                    如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢