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

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

　　1、照片拍攝

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

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

       拍照預(yù)覽

　　# 使用到的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、圖片展示

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

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

　　# 用到的JS代碼Page({ data: { array: [{ mode: 'scaleToFill', text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片完全適應(yīng)' }, { 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ā)公司智企云給我們帶來的媒體組件中的照片拍攝跟圖片展示的相關(guān)介紹，媒體組件是內(nèi)容展示的重要組織部分， 也是提供給用戶比較有價(jià)值的內(nèi)容為主，目前短視頻比較火，因此對于從業(yè)開發(fā)人員來講，必須要好好深入學(xué)習(xí)才行。關(guān)于更多精彩的小程序開發(fā)內(nèi)容我們會(huì)陸續(xù)為大家?guī)恚凑埰诖?/span>