一:audio組件
音頻播放已經(jīng)封裝的很好!只需配合屬性設(shè)置即可! (method和data配合使用)
主要屬性:
wxml
<!--監(jiān)聽button點(diǎn)擊事件-->
<button bindtap="listenerButton">點(diǎn)擊顯示視頻組件</button>
<!--視頻組件src資源地址,binderror為監(jiān)聽錯(cuò)誤信息-->
<video
src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
style="width: 100%; height: 100%"
hidden="{{hiddenVideo}}"
binderror="listenerVideo" />
js
Page({
data:{
// text:"這是一個(gè)頁面"
hiddenVideo: true
},
/**
* 監(jiān)聽視頻加載錯(cuò)誤狀態(tài)
*/
listenerVideo:function(e) {
console.log(e.detail.errMsg);
},
/**
* 監(jiān)聽button點(diǎn)擊事件
*/
listenerButton:function() {
this.setData({
hiddenVideo: !this.data.hiddenVideo
})
}
})
image組件也是一個(gè)程序不可缺少的,可以這樣說一個(gè)app中image組件隨處可以看到,一般 image有兩種加載方式第一種是網(wǎng)絡(luò)圖片第二種是本地圖片資源,都用src屬性去指定。
重點(diǎn)屬性:
三種縮放模式
九種剪切方式
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,同上
left
right
top right
top left
bottom right
bottom 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點(diǎn)擊事件-->
<button bindtap="listenerButton">點(diǎn)擊顯示視頻組件</button>
<!--視頻組件src資源地址,binderror為監(jiān)聽錯(cuò)誤信息-->
<video
src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
style="width: 100%; height: 100%"
hidden="{{hiddenVideo}}"
binderror="listenerVideo" />
js
Page({
data:{
// text:"這是一個(gè)頁面"
hiddenVideo: true
},
/**
* 監(jiān)聽視頻加載錯(cuò)誤狀態(tài)
*/
listenerVideo:function(e) {
console.log(e.detail.errMsg);
},
/**
* 監(jiān)聽button點(diǎn)擊事件
*/
listenerButton:function() {
this.setData({
hiddenVideo: !this.data.hiddenVideo
})
}
})