长沙小程序开发带来媒体组件相关内容的介绍！

　　这近我们学习小程序开发过程中都是组建方面的内容介绍，今天长沙小程序开发带来媒体组件的相关内容介绍，媒体组件是内容中的重要组件，它丰富了小程序的许多内容，因此这也是一个比较重要的相关内容，媒体组件主要是采用照片拍摄与图片展示为主，开发从来人员一定要好好学习才行。

　　媒体通常指的是视频播放、音频播放、照片拍摄、图片展示等等，这里举例照片拍摄和图片展示来做简单介绍。

　　1、照片拍摄

　　通常我们在使用app的时候会用到上传头像或者扫描二维码等功能，这些功能就可以通过媒体组件的camera来实现。如下代码所示，wxml中使用按钮来接收“takePhoto”事件(这里的事件是前端用户操作与后端逻辑判断的桥梁)，然后JS代码中执行takePhoto()方法完成相应的逻辑运算(这里的逻辑运算就是调用微信小程序的拍照API，进而来实现拍照功能)。

　　# 实现一个拍照功能# 使用的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参数;中的mode="{{item.mode}}用来调用JS中的mode参数，进而修饰图片的显示效果。

　　# 使用到的wxml代码 image 图片 {{item.text}} 

　　# 用到的JS代码Page({ data: { array: [{ mode: 'scaleToFill', text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应' }, { mode: 'aspectFit', text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来' }, { mode: 'aspectFill', text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来' }, { mode: 'top', text: 'top：不缩放图片，只显示图片的顶部区域' }, { mode: 'bottom', text: 'bottom：不缩放图片，只显示图片的底部区域' }, { mode: 'center', text: 'center：不缩放图片，只显示图片的中间区域' }, { mode: 'left', text: 'left：不缩放图片，只显示图片的左边区域' }, { mode: 'right', text: 'right：不缩放图片，只显示图片的右边边区域' }, { mode: 'top left', text: 'top left：不缩放图片，只显示图片的左上边区域' }, { mode: 'top right', text: 'top right：不缩放图片，只显示图片的右上边区域' }, { mode: 'bottom left', text: 'bottom left：不缩放图片，只显示图片的左下边区域' }, { mode: 'bottom right', text: 'bottom right：不缩放图片，只显示图片的右下边区域' }], src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg' }, imageError: function(e) { console.log('image3发生error事件，携带值为', e.detail.errMsg) }})

         以上就是长沙小程序开发公司智企云给我们带来的媒体组件中的照片拍摄跟图片展示的相关介绍，媒体组件是内容展示的重要组织部分， 也是提供给用户比较有价值的内容为主，目前短视频比较火，因此对于从业开发人员来讲，必须要好好深入学习才行。关于更多精彩的小程序开发内容我们会陆续为大家带来，敬请期待！