转载

「小程序JAVA实战」小程序多媒体组件(27)

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

媒体组件

  • audio

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

  • image

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

* video

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

  • camera

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

  • live-player

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

  • live-pusher

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

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

懒加载比较常用。

<!--pages/image/image.wxml-->
<image src='https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18081622'></image>


<image src='{{imageSrc}}'></image>

<image src='{{imageSrc}}' style='width:200px;height:200pxx'></image>

<block wx:for="{{array}}">
  <image src='{{imageSrc}}' mode='{{item.mode}}' style='width:250px;height:250x' lazy-load='{{true}}' bindload='load'></image>
</block>
// pages/image/image.js
Page({

  /**
   * 页面的初始数据
   */
  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 () {

  }
})

「小程序JAVA实战」小程序多媒体组件(27)

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

百度未收录

>>原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!

>>原文链接地址:

原文  http://idig8.com/2018/08/19/xiaochengxujavashizhanxiaochengxuduomeitizujian27/
正文到此结束
Loading...