<!--pages/image/image.wxml-->
<text>这是一个image组件</text>
<!--
<image src='../../images/0.jpg'></image>
<image src='/images/0.jpg'></image> -->
<view class="section section_gap" wx:for="{{list}}" wx:for-item="item">
<view class="section__title">{{item.text}}</view>
<view class="section__ctn">
<image bindtap="preview" style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" data-src="{{src}}" src="{{src}}"></image>
</view>
</view>
// pages/image/image.js
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
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/0.jpg'
} ,
preview(e){
console.log(e.target.dataset.src);
var current = e.target.dataset.src;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: ['https://pic4.zhimg.com/80/v2-092ca55bea745e0af303e199fe9365a9_hd.jpg','https://pic2.zhimg.com/80/v2-41b41d2cec6dd5933760b42ee62e7d88_hd.jpg'] // 需要预览的图片http链接列表
})
}
})
<view class="page-body">
<view class="page-body-wrapper">
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<view class="btn-area">
<button type="primary" bindtap="takePhoto">拍照</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="startRecord">开始录像</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="stopRecord">结束录像</button>
</view>
<view class="preview-tips">预览</view>
<image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
<video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
</view>
</view>
Page({
onLoad() {
this.ctx = wx.createCameraContext()
},
takePhoto() {
this.ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
startRecord() {
this.ctx.startRecord({
success: (res) => {
console.log('startRecord')
}
})
},
stopRecord() {
this.ctx.stopRecord({
success: (res) => {
this.setData({
src: res.tempThumbPath,
videoSrc: res.tempVideoPath
})
}
})
},
error(e) {
console.log(e.detail)
}
})
<view class="page">
<view class="page__bd">
<view class="section section_gap">
<audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio>
</view>
</view>
<view class="section section_gap">
<view class="body-view">
<button bindtap="playAudio">播放</button>
</view>
</view>
<view class="section section_gap">
<view class="body-view">
<button bindtap="pauseAudio">暂停</button>
</view>
</view>
<view class="section section_gap">
<text class="section__title">进度</text>
<view class="body-view">
<slider bindchange="timeSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
</view>
</view>
<view class="section section_gap">
<text class="section__title">播放速率</text>
<view class="body-view">
<slider min="1" max="10" bindchange="playbackRateSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
</view>
</view>
</view>
Page({
data: {
current: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
audioAction: {
method: 'pause'
}
},
audioPlayed: function (e) {
console.log('audio is played')
},
//获取音频播放的总时间
audioTimeUpdated: function (e) {
this.duration = e.detail.duration; /*获取音频的播放时间 s*/
},
timeSliderChanged: function (e) {
if (!this.duration)
return;
var time = this.duration * e.detail.value / 100; //总时间诚意百分比
this.setData({ //改变音频的播放时间
audioAction: {
method: 'setCurrentTime',
data: time
}
});
},
playbackRateSliderChanged: function (e) { /*改变音频播放的速率*/
this.setData({
audioAction: {
method: 'setPlaybackRate',
data: e.detail.value
}
})
},
playAudio: function () {
this.setData({
audioAction: {
method: 'play'
}
});
},
pauseAudio: function () {
this.setData({
audioAction: {
method: 'pause'
}
});
}
})
