微信小程序相机组件的使用
这一段时间微信小程序更新频率越来越快，几乎每周一更。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;
}
五、最后效果如图