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

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

主要属性：

wxml

1. <!--监听button点击事件-->
2. <button bindtap="listenerButton">点击显示视频组件</button>
3.  
4. <!--视频组件src资源地址，binderror为监听错误信息-->
5. <video
6. src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
7. style="width: 100%; height: 100%"
8. hidden="{{hiddenVideo}}"
9. binderror="listenerVideo" />

js

1. Page({
2. data:{
3. // text:"这是一个常州网站开发建设页面"
4. hiddenVideo: true
5. },
6. /**
7. * 监听视频加载错误状态
8. */
9. listenerVideo:function(e) {
10. console.log(e.detail.errMsg);
11. },
12. /**
13. * 监听button点击事件
14. */
15. listenerButton:function() {
16. this.setData({
17. hiddenVideo: !this.data.hiddenVideo
18. })
19. }
20.  
21. })

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

重点属性：

三种缩放模式

九种剪切方式

wxml

1. <!--3中是缩放模式
2. scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
3. aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
4. aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来
5.  
6. -->
7. <view>aspectFit 保持纵横比缩放图片，只保证图片的短边能完全显示出来</view>
8. <image style="width: 100%; height:100%" mode="aspectFit" src="../../image/image.jpg"/>
9.  
10. <!--9种是裁剪模式
11. top 不缩放图片，只显示图片的顶部区域
12. bottom,同上
13. left
14. right
15. top right
16. top left
17. bottom right
18. bottom left
19. -->
20. <view>bottom 不缩放图片，只显示常州平台运营图片的底部区域</view>
21. <image style="width: 100%; height: 100%" mode="bottom" src="../../image/image.jpg"/>
22.  
23. <view>left 不缩放图片，只显示图片的左边区域</view>
24. <image style="width: 100%; height: 100%" mode="left" src="../../image/image.jpg"/>
25.  
26. <view>top right 不缩放图片，只显示图片的右上边区域</view>
27. <image style="width: 100%; height: 100%" mode="top right" src="../../image/image.jpg"/>

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

重要属性：

wxml

1. <!--监听button点击事件-->
2. <button bindtap="listenerButton">点击显示常州软件技术培训视频组件</button>
3.  
4. <!--视频组件src资源地址，binderror为监听错误信息-->
5. <video
6. src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
7. style="width: 100%; height: 100%"
8. hidden="{{hiddenVideo}}"
9. binderror="listenerVideo" />

js

1. Page({
2. data:{
3. // text:"这是一个企业培训页面"
4. hiddenVideo: true
5. },
6. /**
7. * 监听视频加载错误状态
8. */
9. listenerVideo:function(e) {
10. console.log(e.detail.errMsg);
11. },
12. /**
13. * 监听button点击事件
14. */
15. listenerButton:function() {
16. this.setData({
17. hiddenVideo: !this.data.hiddenVideo
18. })
19. }
20.  
21. })