微信小程序相機組件的使用


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


五、最後效果如圖

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章