「小程序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/ 截图这块,在微信小程序工 ...
随机推荐
- 原生js实现div拖拽+按下鼠标计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...
- AngularX 指令(ngForof)(转载)
该指令用于基于可迭代对象中的每一项创建相应的模板.每个实例化模板的上下文对象继承于外部的上下文对象,其值与可迭代对象对应项的值相关联. NgForOf 指令语法 * 语法糖 <li *ngFor ...
- BZOJ2330 SCOI2011 糖果 【差分约束】
BZOJ2330 SCOI2011 糖果 Description 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一 ...
- python pandas 对各种文件的读写 IO tools
The pandas I/O API is a set of top level reader functions accessed like pd.read_csv() that generally ...
- MTK-shot mode
enum EShotMode{ eShotMode_NormalShot, /*!< Normal Shot */ eShotMo ...
- ballerina 学习十五 控制流
ballerina 的控制流没有什么特殊,只是相比一般语言多了一个模式匹配的操作match ,实际上其他语言(erlang elixir rust 中的模式匹配是很强大的) 简单例子 if/else ...
- 随着tomcat一起启动一个线程
package test; import javax.servlet.*; public class MyCode implements ServletContextListener { //当Tom ...
- Linux环境下安装zookeeper
1. 下载安装文件zookeeper-3.4.6.tar.gz 镜像地址1: http://apache.fayea.com/zookeeper/ 镜像地址2: http://mirrors.hust ...
- oracle表空间维护常用命令
---查看表空间的名字及文件所在位置: select tablespace_name, file_id, file_name,round(bytes/(1024*1024),0) total_spac ...
- bzoj 3996 [TJOI2015]线性代数——最小割
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3996 b[ i ][ j ] 要计入贡献,当且仅当 a[ i ] = 1 , a[ j ] ...