微信小程序相机组件的使用

           这一段时间微信小程序更新频率越来越快，几乎每周一更。2017.10.13又更新了相机组件，可谓美翻了，下面让我们来看一下都更新了什么吧。

一、关于更新

  更新概述 2017.10.13

• 新增相机组件，支持自定义拍照及录像界面
• 录音功能优化，支持更多格式和操作方式，支持自定义录音时长、采样率码率，支持边录边传
• 小程序内音频播放功能升级，支持更多格式和操作方式
• video、map及canvas功能持续优化，cover-view支持简单的动画效果
• onLaunch 及 onShow 时部分跳转小程序场景增加返回 referrerInfo.appId

二、关于组件更新和API更新的情况

首先，先带大家看一下更新的camera组件。

ps:该组件微信开发者文档介绍的相当详细，camera 组件是由客户端创建的原生组件，它的层级是最高的。可使用 cover-view cover-image覆盖在上面。

  

三、关于api的更新

四、关于该组件的简单使用

话不多说，直接上代码

//index.jsPage({  /**   * 页面的初始数据   */  data: {      },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {      },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function (res){    if (wx.createCameraContext()) {      this.cameraContext = wx.createCameraContext('myCamera')    } else {      // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示      wx.showModal({        title: '提示',        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'      })    }      },startTakePhoto:function(){  this.cameraContext.takePhoto({  })},  /**   * 生命周期函数--监听页面显示   */  onShow: function () {      },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {      },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {      },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {      },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {      },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {      },  pause:function(){    wx.showModal({      title: '提示',      content: '这是一个模态弹窗',      success: function (res) {        if (res.confirm) {          console.log('用户点击确定')        } else if (res.cancel) {          console.log('用户点击取消')        }      }    })  }})          00:00.container { position: relative;  top: 50%;  height: 50px;  margin-top: -25px;  display: flex; }.camera{  height:1080rpx;  width:  750rpx;}.pause,.time {  flex: 1;  height: 100%;}.time {  text-align: center;  background-color: rgba(0, 0, 0, .5);  color: white;  line-height: 50px;}.img {  width: 40px;  height: 40px;  margin: 5px auto;}

五、最后效果如图