转自: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='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 () { }
})

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

「小程序JAVA实战」小程序多媒体组件(27)的更多相关文章

  1. 「小程序JAVA实战」小程序首页视频(49)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...

  2. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  3. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  4. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  5. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  6. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

  7. 「小程序JAVA实战」小程序的视频点赞功能开发(62)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...

  8. 「小程序JAVA实战」小程序的springboot后台拦截器(61)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...

  9. 「小程序JAVA实战」小程序视频封面处理(48)

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...

随机推荐

  1. 【剑指offer】输入一颗二叉树的根节点,求二叉树的深度,C++实现

    原创博文,转载请注明出处! # 题目 # 举例        下图二叉树的深度为4,最长路径为1-2-5-7. # 思路(递归)       如果一个树只有一个节点,它的深度为1: 如果根节点只有左子 ...

  2. js获得分辨率

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. C#与sqlserver开发问题

    最近不停的在考虑C#读取数据性能问题第一种使用ado拼接sql连接数据库第二种使用ado调用存储过程第三种使用entityframework加linq第四种使用反射IList<T> 1.从 ...

  4. WEB服务器都在做哪些工作?

    作为WEB开发人员,我们肯定应该要知道WEB服务器都在做哪些工作,这里简单列举一下,有时间然后详细说明. (1)建立连接——接受一个客户端连接. (2)接收请求——从网络中读取一条 HTTP 请求报文 ...

  5. hiho1514 偶像的条件 lower_bound

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi的学校正面临着废校的大危机.面对学校的危机,小Hi同学们决定从ABC三个班中各挑出一名同学成为偶像. 成为偶像团体的 ...

  6. Filter学习(二)Filter使用Decorator设计模式

    在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...

  7. BZOJ2090: [Poi2010]Monotonicity 2【线段树优化DP】

    BZOJ2090: [Poi2010]Monotonicity 2[线段树优化DP] Description 给出N个正整数a[1..N],再给出K个关系符号(>.<或=)s[1..k]. ...

  8. BZOJ3609 Heoi2014 人人尽说江南好【推理+结论】

    BZOJ3609 Heoi2014 人人尽说江南好 Description 小 Z 是一个不折不扣的 ZRP(Zealot Round-game Player,回合制游戏狂热玩家),最近他 想起了小时 ...

  9. 如何批处理多个MySQL文件

    @echo off CHCP 65001 --设置cmd编码for %%i in (E:\sql\*.sql) do (   --多个MySQL  SQL文件的存放目录echo excute %%i ...

  10. WinForm 窗体初始位置篇

    1.在C#中,From本身有个StartPosition属性可以控制居中显示. StartPosition 默认值是WindowsDefaultLocation ,我们只需要改成CenterScree ...