一.image
image 即 图片。
1.属性
mode 有效值
mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
注1:image组件默认宽度300px、高度225px。
注2:image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。
2.代码
2.1.WXSS代码
.section__ctn{
text-align: center;
}
2.2.WXML代码
<view class="page">
<view class="page__hd">
<text class="page__title">image</text>
<text class="page__desc">图片</text>
</view>
<view class="page__bd">
<view class="section section_gap" wx:for-items="{{array}}" wx:for-item="item">
<view class="section__title">{{item.text}}</view>
<view class="section__ctn">
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
</view>
</view>
</view>
</view>
2.3.JS代码
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top:不缩放图片,只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom:不缩放图片,只显示图片的底部区域'
}, {
mode: 'center',
text: 'center:不缩放图片,只显示图片的中间区域'
}, {
mode: 'left',
text: 'left:不缩放图片,只显示图片的左边区域'
}, {
mode: 'right',
text: 'right:不缩放图片,只显示图片的右边边区域'
}, {
mode: 'top left',
text: 'top left:不缩放图片,只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right:不缩放图片,只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left:不缩放图片,只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right:不缩放图片,只显示图片的右下边区域'
}],
src: '../../images/cat.jpg'
},
imageError: function(e) {
console.log('image3发生error事件,携带值为', e.detail.errMsg)
}
})
3.效果
二.video
video 即 视频。
1.属性
<video />默认宽度300px、高度225px,可通过wxss设置宽高。
2.代码
2.1.WXSS代码
@import "/lib/weui.wxss";
.weui-cells{
margin-top: 80rpx;
text-align: left;
}
.weui-label{
width: 5em;
}
.page-body-button {
margin-bottom: 30rpx;
}
page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;
}
.page-body {
padding: 20rpx 0;
}
.btn-area{
margin-top: 60rpx;
box-sizing: border-box;
width: 100%;
padding: 0 30rpx;
}
.tc{
text-align: center;
}
2.2.WXML代码
<view class="page-body">
<view class="page-section tc">
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<view class="weui-cells">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">弹幕内容</view>
</view>
<view class="weui-cell__bd">
<input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
</view>
<view class="btn-area">
<button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
<button bindtap="bindPlay" class="page-body-button" type="primary">播放</button>
<button bindtap="bindPause" class="page-body-button" type="primary">暂停</button>
</view>
</view>
</view>
2.3.JS代码
function getRandomColor() {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
data: {
src: '',
danmuList:
[{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
bindInputBlur: function (e) {
this.inputValue = e.detail.value
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
},
bindPlay: function () {
this.videoContext.play()
},
bindPause: function () {
this.videoContext.pause()
},
videoErrorCallback: function (e) {
console.log('视频错误信息:')
console.log(e.detail.errMsg)
}
})
3.效果