本文共 1855 字，大约阅读时间需要 6 分钟。

来说下 ，小程序的多媒体组件。源码：https://github.com/limingios/wxProgram.git 中的No.14

媒体组件

• audio

  可以在小程序嵌入一些音乐，歌曲，mp3什么的

• image

  任何小程序中必然会使用图片组件

视频组件，主要视频播放类的

• camera

  摄像头组件，新版才提供的

• live-player

  直播相关的，跟自媒体有关系，在线直播什么的。

• live-pusher

  直播相关的，跟自媒体有关系，在线直播什么的。

重点说说image组件，其他大家看下官网就行

懒加载比较常用。

// pages/image/image.jsPage({  /**   * 页面的初始数据   */  data: {    imageSrc:'../img/cat.jpg',    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：不缩放图片，只显示图片的右下边区域'    }]  },  load: function(e){    console.log(e.detail);  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {  }})

PS：image在后续的使用会越来越多，一起学习进步吧。

>>原创文章，欢迎转载。转载请注明：转载自，谢谢！