【微信小程序】底部操作菜单与拍照录像

这篇文章要解决三个问题：

1. 底部操作菜单
2. 自定义按钮“点按拍照，长按拍摄”
3. 调用朋友圈的API实现“点按拍照，长按拍摄”

第一部分

当点击“上传资料”按钮的时候，要从底部弹出操作菜单栏。

<button type="primary" bindtap="openActionsheet">上传资料</button>

Page({
   
	data: {
   },
	onLoad: function (options) {
   },
 
  	openActionsheet: function () {
   
    	wx.showActionSheet({
   
      		itemList: ['上传图片', '上传视频'],
      		itemColor: '#007aff',
      		success: (res) => {
   
        		switch (res.tapIndex) {
   
          			case 0:
            			console.log('上传图片');
            			// 上传接口支持最大20M
            			this.chooseAndUploadPicture();
            			break;
          			case 1:
            			console.log('上传视频');
            			// 拍摄视频 支持最长60s 默认720p分辨率 视频大小12M左右
            			// 选择视频 微信支持最大200M 但我们公司上传接口支持最大20M
            			this.chooseAndUploadVideo();
            			break;
          			default:
            			break;
        		}
      		},
      		fail: (err) => {
   
        		console.log('失败：', err);
      		}
    	})
  	},

	chooseAndUploadPicture: function() {
   },

	chooseAndUploadVideo: function() {
   }

})

第二部分

虽然在我们的项目中，要求是上传图片与上传视频分成两个菜单选项操作。

但是我想着是否我也可以实现朋友圈那种📷“点按拍照，长按摄像”的效果。

原理很简单，点按调用拍照的API，长按调用摄像的API。直接上代码 ~

<camera wx:if="{
    {!videoSrc}}" device-position="back" flash="off" binderror="error" style="width: {
      {
      cameraWidth