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

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

　　1、照片拍攝

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

　　# 實現(xiàn)一個拍照功能# 使用的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}}的這一層級視圖中包含兩個次級的，其中{{item.text}}用來調(diào)用JS代碼中的text參數(shù);中的mode="{{item.mode}}用來調(diào)用JS中的mode參數(shù),，進而修飾圖片的顯示效果,。

　　# 使用到的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)容展示的重要組織部分,， 也是提供給用戶比較有價值的內(nèi)容為主,，目前短視頻比較火，因此對于從業(yè)開發(fā)人員來講,，必須要好好深入學(xué)習(xí)才行,。關(guān)于更多精彩的小程序開發(fā)內(nèi)容我們會陸續(xù)為大家?guī)?，敬請期待?/span>