
一:audio組件

音頻播放已經(jīng)封裝的很好!只需配合屬性設(shè)置即可! (method和data配合使用)
主要屬性:




wxml
<!--監(jiān)聽button點擊事件--><button bindtap="listenerButton">點擊顯示視頻組件</button><!--視頻組件src資源地址,binderror為監(jiān)聽錯誤信息--><videosrc="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"style="width: 100%; height: 100%"hidden="{{hiddenVideo}}"binderror="listenerVideo" />
js
Page({data:{// text:"這是一個頁面"hiddenVideo: true},/*** 監(jiān)聽視頻加載錯誤狀態(tài)*/listenerVideo:function(e) {console.log(e.detail.errMsg);},/*** 監(jiān)聽button點擊事件*/listenerButton:function() {this.setData({hiddenVideo: !this.data.hiddenVideo})}})

image組件也是一個程序不可缺少的,可以這樣說一個app中image組件隨處可以看到,一般 image有兩種加載方式第一種是網(wǎng)絡(luò)圖片第二種是本地圖片資源,都用src屬性去指定。
重點屬性:

三種縮放模式

九種剪切方式

wxml
<!--3中是縮放模式scaleToFill 不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿image元素aspectFit 保持縱橫比縮放圖片,使圖片的長邊能完全顯示出來。也就是說,可以完整地將圖片顯示出來。aspectFill 保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來--><view>aspectFit 保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來</view><image style="width: 100%; height:100%" mode="aspectFit" src="../../image/image.jpg"/><!--9種是裁剪模式top 不縮放圖片,只顯示圖片的頂部區(qū)域bottom,同上leftrighttop righttop leftbottom rightbottom left--><view>bottom 不縮放圖片,只顯示圖片的底部區(qū)域</view><image style="width: 100%; height: 100%" mode="bottom" src="../../image/image.jpg"/><view>left 不縮放圖片,只顯示圖片的左邊區(qū)域</view><image style="width: 100%; height: 100%" mode="left" src="../../image/image.jpg"/><view>top right 不縮放圖片,只顯示圖片的右上邊區(qū)域</view><image style="width: 100%; height: 100%" mode="top right" src="../../image/image.jpg"/>

視頻播放組件與圖片加載組件也沒啥差別,使用起來也沒啥注意的
重要屬性:

wxml
<!--監(jiān)聽button點擊事件--><button bindtap="listenerButton">點擊顯示視頻組件</button><!--視頻組件src資源地址,binderror為監(jiān)聽錯誤信息--><videosrc="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"style="width: 100%; height: 100%"hidden="{{hiddenVideo}}"binderror="listenerVideo" />
js
Page({data:{// text:"這是一個頁面"hiddenVideo: true},/*** 監(jiān)聽視頻加載錯誤狀態(tài)*/listenerVideo:function(e) {console.log(e.detail.errMsg);},/*** 監(jiān)聽button點擊事件*/listenerButton:function() {this.setData({hiddenVideo: !this.data.hiddenVideo})}})