微信小程序把玩九audio组件image组件video组件.pdf

微信小程序把玩《九》：audio 组件，image 组件，video 组件 一 ：audio 组件 音频播放已经封装的很好！只需配合属性设置即可！ （method 和 data 配合使用） 主要属性： wxml audio action={{action}} src=/2016/1/09/26/202261732256.mp3 poster= / E/3/9/ 1_u014360817.jpg controls=true name=钢琴曲 author=不详/ button type=primary bindtap=audioPlay播放/ button button type=primary bindtap=audioPause暂停/ button !--正常速度-- button type=primary bindtap=audioPlaybackRateNormal调为 1 倍速/ button !--慢放-- button type=primary bindtap=audioPlaybackRateSlowDown调为 0.5 倍速/button js Page({ data:{ // text:这是一个页面 action: { method: } }, audioPlay:function() { this.setData({ action: { method: play } }) }, audioPause:function(){ this.setData({ action: { method: pause } }) }, audioPlaybackRateNormal:function() { this.setData({ action:{ method: setPlaybackRate, data: 1 } }) }, audioPlaybackRateSlowDown:function() { this.setData({ action: { method: setPlaybackRate, data: 0.5 } }) } }) 二：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