「小程序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='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)的更多相关文章
- 「小程序JAVA实战」小程序首页视频(49)
转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- 「小程序JAVA实战」小程序的留言和评价功能(70)
转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...
- 「小程序JAVA实战」小程序的举报功能开发(68)
转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...
- 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...
- 「小程序JAVA实战」小程序的关注功能(65)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...
- 「小程序JAVA实战」小程序的视频点赞功能开发(62)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...
- 「小程序JAVA实战」小程序的springboot后台拦截器(61)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...
- 「小程序JAVA实战」小程序视频封面处理(48)
转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...
随机推荐
- 【剑指offer】输入一颗二叉树的根节点,求二叉树的深度,C++实现
原创博文,转载请注明出处! # 题目 # 举例 下图二叉树的深度为4,最长路径为1-2-5-7. # 思路(递归) 如果一个树只有一个节点,它的深度为1: 如果根节点只有左子 ...
- js获得分辨率
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- C#与sqlserver开发问题
最近不停的在考虑C#读取数据性能问题第一种使用ado拼接sql连接数据库第二种使用ado调用存储过程第三种使用entityframework加linq第四种使用反射IList<T> 1.从 ...
- WEB服务器都在做哪些工作?
作为WEB开发人员,我们肯定应该要知道WEB服务器都在做哪些工作,这里简单列举一下,有时间然后详细说明. (1)建立连接——接受一个客户端连接. (2)接收请求——从网络中读取一条 HTTP 请求报文 ...
- hiho1514 偶像的条件 lower_bound
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi的学校正面临着废校的大危机.面对学校的危机,小Hi同学们决定从ABC三个班中各挑出一名同学成为偶像. 成为偶像团体的 ...
- Filter学习(二)Filter使用Decorator设计模式
在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...
- BZOJ2090: [Poi2010]Monotonicity 2【线段树优化DP】
BZOJ2090: [Poi2010]Monotonicity 2[线段树优化DP] Description 给出N个正整数a[1..N],再给出K个关系符号(>.<或=)s[1..k]. ...
- BZOJ3609 Heoi2014 人人尽说江南好【推理+结论】
BZOJ3609 Heoi2014 人人尽说江南好 Description 小 Z 是一个不折不扣的 ZRP(Zealot Round-game Player,回合制游戏狂热玩家),最近他 想起了小时 ...
- 如何批处理多个MySQL文件
@echo off CHCP 65001 --设置cmd编码for %%i in (E:\sql\*.sql) do ( --多个MySQL SQL文件的存放目录echo excute %%i ...
- WinForm 窗体初始位置篇
1.在C#中,From本身有个StartPosition属性可以控制居中显示. StartPosition 默认值是WindowsDefaultLocation ,我们只需要改成CenterScree ...