這近我們學習小程序開發(fā)過程中都是組建方面的內(nèi)容介紹，今天長沙小程序開發(fā)帶來媒體組件的相關內(nèi)容介紹，媒體組件是內(nèi)容中的重要組件，它豐富了小程序的許多內(nèi)容，因此這也是一個比較重要的相關內(nèi)容，媒體組件主要是采用照片拍攝與圖片展示為主，開發(fā)從來人員一定要好好學習才行。

　　媒體通常指的是視頻播放、音頻播放、照片拍攝、圖片展示等等，這里舉例照片拍攝和圖片展示來做簡單介紹。

　　1、照片拍攝

　　通常我們在使用app的時候會用到上傳頭像或者掃描二維碼等功能，這些功能就可以通過媒體組件的camera來實現(xiàn)。如下代碼所示，wxml中使用按鈕來接收“takePhoto”事件(這里的事件是前端用戶操作與后端邏輯判斷的橋梁)，然后JS代碼中執(zhí)行takePhoto()方法完成相應的邏輯運算(這里的邏輯運算就是調用微信小程序的拍照API，進而來實現(xiàn)拍照功能)。

　　# 實現(xiàn)一個拍照功能# 使用的wxml代碼

       拍照預覽

　　# 使用到的JS代碼Page({ takePhoto() { const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) => { this.setData({ src: res.tempImagePath }) } }) }, error(e) { console.log(e.detail) }})

　　2、圖片展示

　　如下代碼所示，在調用{{array}}的這一層級視圖中包含兩個次級的，其中{{item.text}}用來調用JS代碼中的text參數(shù);中的mode="{{item.mode}}用來調用JS中的mode參數(shù)，進而修飾圖片的顯示效果。

　　# 使用到的wxml代碼 image 圖片 {{item.text}} 

　　# 用到的JS代碼Page({ data: { array: [{ mode: 'scaleToFill', text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片完全適應' }, { mode: 'aspectFit', text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來' }, { mode: 'aspectFill', text: 'aspectFill：保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來' }, { mode: 'top', text: 'top：不縮放圖片，只顯示圖片的頂部區(qū)域' }, { mode: 'bottom', text: 'bottom：不縮放圖片，只顯示圖片的底部區(qū)域' }, { mode: 'center', text: 'center：不縮放圖片，只顯示圖片的中間區(qū)域' }, { mode: 'left', text: 'left：不縮放圖片，只顯示圖片的左邊區(qū)域' }, { mode: 'right', text: 'right：不縮放圖片，只顯示圖片的右邊邊區(qū)域' }, { mode: 'top left', text: 'top left：不縮放圖片，只顯示圖片的左上邊區(qū)域' }, { mode: 'top right', text: 'top right：不縮放圖片，只顯示圖片的右上邊區(qū)域' }, { mode: 'bottom left', text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區(qū)域' }, { mode: 'bottom right', text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區(qū)域' }], src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg' }, imageError: function(e) { console.log('image3發(fā)生error事件，攜帶值為', e.detail.errMsg) }})

         以上就是長沙小程序開發(fā)公司智企云給我們帶來的媒體組件中的照片拍攝跟圖片展示的相關介紹，媒體組件是內(nèi)容展示的重要組織部分， 也是提供給用戶比較有價值的內(nèi)容為主，目前短視頻比較火，因此對于從業(yè)開發(fā)人員來講，必須要好好深入學習才行。關于更多精彩的小程序開發(fā)內(nèi)容我們會陸續(xù)為大家?guī)?，敬請期待?/span>