zoukankan      html  css  js  c++  java
  • 「小程序JAVA实战」小程序多媒体组件(27)

    转自:https://idig8.com/2018/08/19/xiaochengxujavashizhanxiaochengxuduomeitizujian27/

    来说下 ,小程序的多媒体组件。源码: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='200px;height:200pxx'></image>
    
    <block wx:for="{{array}}">
      <image src='{{imageSrc}}' mode='{{item.mode}}' style='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 () {
    
      }
    })
    

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

  • 相关阅读:
    P2257 YY的GCD(莫比乌斯反演)
    P2522 [HAOI2011]Problem b(莫比乌斯反演)
    HAProxy 配置文件
    Android5.1 默认主launcher、强制主launcher
    【Spring 从0开始】IOC容器的Bean管理
    【Spring 从0开始】IOC容器的Bean管理
    【Spring 从0开始】IOC容器的Bean管理
    Linux 命令里两个连续的减号(--)是表示什么?
    从k8s集群中删除节点后重新加入的方法
    下载外网docker镜像的方法
  • 原文地址:https://www.cnblogs.com/sharpest/p/10286983.html
Copyright © 2011-2022 走看看