微信小程序相機組件的使用
這一段時間微信小程序更新頻率越來越快,幾乎每週一更。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;
}
五、最後效果如圖