微信小程序把玩《九》：audio组件，image组件，video组件

这是一款来自小程序免费开发制作网的小程序demo源码，希望大家喜欢。一：audio组件

(此图片来源于网络，如有侵权，请联系删除! )

音频播放已经封装的很好！只需配合属性设置即可！（method和data配合使用）

主要属性：

(此图片来源于网络，如有侵权，请联系删除! )

wxml

<!--监听button点击事件-->
<button bindtap="listenerButton">点击显示视频组件</button>

<!--视频组件src资源地址，binderror为监听错误信息-->
<video
src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
style="width: 100%; height: 100%"
hidden="{{hiddenVideo}}"
binderror="listenerVideo" />

Page({
data:{
// text:"这是一个页面"
hiddenVideo: true
},
/**
* 监听视频加载错误状态
*/
listenerVideo:function(e) {
console.log(e.detail.errMsg);
},
/**
* 监听button点击事件
*/
listenerButton:function() {
this.setData({
hiddenVideo: !this.data.hiddenVideo
})
}

})

二：image组件

(此图片来源于网络，如有侵权，请联系删除! )

image组件也是一个程序不可缺少的，可以这样说一个app中image组件随处可以看到，一般 image有两种加载方式第一种是网络图片第二种是本地图片资源，都用src属性去指定。

重点属性：

(此图片来源于网络，如有侵权，请联系删除! )

三种缩放模式

(此图片来源于网络，如有侵权，请联系删除! )

九种剪切方式

(此图片来源于网络，如有侵权，请联系删除! )

wxml

<!--3中是缩放模式
scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来

-->
<view>aspectFit 保持纵横比缩放图片，只保证图片的短边能完全显示出来</view>
<image style="width: 100%; height:100%" mode="aspectFit" src="../../image/image.jpg"/>

<!--9种是裁剪模式
top 不缩放图片，只显示图片的顶部区域
bottom,同上
left
right
top right
top left
bottom right
bottom left
-->
<view>bottom 不缩放图片，只显示图片的底部区域</view>
<image style="width: 100%; height: 100%" mode="bottom" src="../../image/image.jpg"/>

<view>left 不缩放图片，只显示图片的左边区域</view>
<image style="width: 100%; height: 100%" mode="left" src="../../image/image.jpg"/>

<view>top right 不缩放图片，只显示图片的右上边区域</view>
<image style="width: 100%; height: 100%" mode="top right" src="../../image/image.jpg"/>

三：video组件

(此图片来源于网络，如有侵权，请联系删除! )

视频播放组件与图片加载组件也没啥差别，使用起来也没啥注意的

重要属性：

(此图片来源于网络，如有侵权，请联系删除! )

wxml

<!--监听button点击事件-->
<button bindtap="listenerButton">点击显示视频组件</button>

<!--视频组件src资源地址，binderror为监听错误信息-->
<video
src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
style="width: 100%; height: 100%"
hidden="{{hiddenVideo}}"
binderror="listenerVideo" />

Page({
data:{
// text:"这是一个页面"
hiddenVideo: true
},
/**
* 监听视频加载错误状态
*/
listenerVideo:function(e) {
console.log(e.detail.errMsg);
},
/**
* 监听button点击事件
*/
listenerButton:function() {
this.setData({
hiddenVideo: !this.data.hiddenVideo
})
}

})

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

本资源来自易用通，如有侵权，请联系站长。

标签聚合

【小程序源码网资源版权风险说明】：
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » 微信小程序把玩《九》：audio组件，image组件，video组件