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


微信小程序相机组件的使用
           这一段时间微信小程序更新频率越来越快,几乎每周一更。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.js
Page({

  /**
   * 页面的初始数据
   */
  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;
}


五、最后效果如图

发布了32 篇原创文章 · 获赞 32 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/Evan_love/article/details/78262602