uni-app closePreviewImage在3.2.15版本不能使用

uni-app closePreviewImage在3.2.15版本不能使用

开发环境 版本号 项目创建方式
Windows win 10 2004 HBuilderX

产品分类:uniapp/App
PC开发环境操作系统:Windows
HBuilderX类型:正式
HBuilderX版本号:3.2.15
手机系统:全部
手机厂商:苹果
页面类型:vue
vue版本:vue2
打包方式:云端
项目创建方式:HBuilderX

测试过的手机:

iphonese2

示例代码:

<template>
<view class="focusfans_box" :style="{marginTop:statusBarHeight+ 'rpx'}">
<view class="header" :style="{height:150 - statusBarHeight+'rpx',lineHeight:150 - statusBarHeight+'rpx'}">
<image @click='back' src="../../static/image/return.png" mode=""></image>
<view :class="{'header_list':true, 'focus_title':true,'title_active':switchs}" @click="handleSwitch(0)">
照片
</view>
<view :class="{'header_list':true,'title_active':!switchs}" @click="handleSwitch(1)">
视频
</view>  
</view>
<view class="blankArea" @click="hideDelete">  
    <!-- 照片 -->  
    <view class='scroll' v-show="switchs">  
        <view class="img" v-for="(item,index) in imagesUrl" :key="item.id" @click="preImages(index)">  
            <u-image :showLoading="true" :src="item.imgurl" width="220" height="220" mode="aspectFill" @longpress="logoTime" :lazyLoad="true"></u-image>  
        </view>  
        <image src="../../static/image/add.png" mode="widthFix" @click="chooseImage(0)"></image>  
    </view>  
    <!-- 视频 -->  
    <view class='scroll' v-show="!switchs">  
        <view class="img" v-if="videoUrl">  
            <video :src="videoUrl" id="video_play" :poster="videoImg" :show-center-play-btn="!controls" :controls="controls" @play="playVideo" @fullscreenchange="fullscreenchange"></video>  
        </view>  
        <image src="../../static/image/add.png" mode="widthFix" @click="chooseImage(1)"></image>  
    </view>  
</view>  
</view>  
</template>
<script>
export default {
components: {},
data() {
return {
images: [], //待更新的图片本地路径
statusBarHeight: '', //导航栏高度
switchs: true, //切换视频和图片
imagesUrl: [], //获取到的图片地址
videoUrl: '', //获取到的视频地址
videoImg: '', //待上传的视频封面
upImages: [], //待上传的图片列表
upVideo: {}, //待上传的视频列表
isUpload: false, //监听是否已经上传完成
showDelete: false, //是否显示删除按钮
controls: false //控制是否显示控制按钮
}
},
onLoad() {
// 顶部导航渲染
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2
this.getList()
// 获取 video 上下文 videoContext 对象
this.videoContext = uni.createVideoContext('video_play');
},
methods: {
hideDelete(){
this.showDelete = false
},
// 进入和退出全屏触发
fullscreenchange(e) {
console.log(e);
if (e.detail.fullScreen) {
this.controls = true
} else {
this.controls = false
this.videoContext.stop()
}
},
// 播放时自动进入全屏
playVideo() {
// 进入全屏状态
this.videoContext.requestFullScreen(0);
},
logoTime() {
this.showDelete = true
},
// 预览图片
preImages(index) {
let preImgs = []
for (let image of this.imagesUrl) {
preImgs.push(image.imgurl)
}
uni.previewImage({
current: index,
urls: preImgs,
longPressActions:{
itemList:['删除图片','保存图片'],
success:res=>{  
if(res.tapIndex==0){
this.$HTTP('/api/technician_index/my_photo', {
type:4,
photo: this.imagesUrl[index].id
}, 'POST', true).then(res => {
console.log(res);
if (res.data.code == 1000) {
this.imagesUrl.splice(index, 1)
uni.showToast({
title:'删除成功',
icon:'none'
})
uni.closePreviewImage({
complete:ret=>{
console.log(ret);
}
})
}
})
return
}
if(res.tapIndex==1){
uni.downloadFile({
url:preImgs[res.index],
timeout:800,
success:res=>{
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success:res=>{
uni.showToast({
title:'保存成功',
icon:'none'
})
console.log(res);
}
})
}
})
}
}
})
},
// 选择图片或视频
chooseImage(i) {
if (i == 0) {
this.images = []
this.upImages = []
uni.chooseImage({
count: 9,
sizeType: ['compressed'],
success: res => {
this.images.push(...res.tempFilePaths)
let num = 0
for (var i = 0; i < this.images.length; i++) {
uni.uploadFile({
url: this.$baseUrl + '/api/common/file_upload',
filePath: this.images[i],
name: 'image',
header: {
'content-type': 'multipart/form-data'
},
success: res => {
res.data = JSON.parse(res.data)
this.upImages.push(res.data.data)
num++
if (num >= this.images.length) {
this.isUpload == true ? this.isUpload = false : this
.isUpload = true
}
},
fail(rej) {
console.log(rej);
}
})
}
}
})
} else if (i == 1) {
this.upVideo = {}
uni.chooseVideo({
maxDuration:15,
// compressed:false,
success: res => {
uni.showLoading({
title:'上传中,请稍后...',
mask:true
})
// console.log(res);
uni.uploadFile({
url: this.$baseUrl + '/api/common/video_upload',
filePath: res.tempFilePath,
name: 'videourl',
header: {
'content-type': 'multipart/form-data'
},
success: res => {
res.data = JSON.parse(res.data)
if (res.data.code != 1000) {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
} else {
this.upVideo = res.data.data
// console.log(this.upVideo);
this.isUpload == true ? this.isUpload = false : this
.isUpload =
true
}
},
complete:rep=>{
uni.hideLoading()
},
fail(rej) {
console.log(rej);
}
})
}
})
}
// 删除图片
deleteImage(index) {
this.$HTTP('/api/technician_index/my_photo', {
photo: id
}, 'POST', true).then(res => {
if (res.data.code == 1000) {
this.images.splice(index, 1)
}
})
},
back() {
uni.navigateBack({
delta: 1
})
},
handleSwitch(index) {
index == 0 ? this.switchs = true : this.switchs = false
},
getList() {
this.$HTTP('/api/technician_index/my_photo', {
type: 3
}, 'POST', true).then(res => {
// console.log(res.data);
res.data.data.user_photo.length ? this.imagesUrl = res.data.data.user_photo : true
res.data.data.video_url ? this.videoUrl = res.data.data.video_url : this.videoUrl
res.data.data.video_img ? this.videoImg = res.data.data.video_img : this.videoImg
})
},
watch: {
isUpload() {
let obj = {}
console.log(this.upVideo);
if (JSON.stringify(this.upVideo)!='{}') {
obj = {
type: 1,
video_url: this.upVideo.video_url,
video_img: this.upVideo.img_url
}
} else {
obj = {
type: 2,
photo: this.upImages.join(';')
}
}
console.log(obj);
this.$HTTP('/api/technician_index/my_photo', obj, 'POST', true).then(res => {
if (res.data.code == 1000) {
this.videoUrl = this.upVideo.video
this.videoImg = this.upVideo.video_img
this.imagesUrl.push(...this.upImages)
this.getList()
this.$setData()
}
uni.showToast({
title: res.data.msg,
icon: 'none'
})
console.log(res);
this.upImages = []
this.upVideo = {}

}
)
}
}
}
</script>
.focusfans_box {
width: 100%;
height: 100%;
box-sizing: border-box;

.blankArea {
min-height: 100%;
.scroll {
left: 0;
right: 0;
padding: 30rpx 0;
width: 100%;

.img {
float: left;
width: 220rpx;
height: 220rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
overflow: hidden;
position: relative;

.delete {
position: absolute;
right: 0;
width: 40rpx;
height: 40rpx;
}

>video {
width: 100%;
height: 100%;
}
}

>image {
margin-left: 20rpx;
width: 220rpx;
}

}
}

.header {
height: 100%;
width: 100%;
text-align: center;
position: relative;
background: #FFFFFF;
box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.04);

image {
position: absolute;
left: 24rpx;
bottom: 33rpx;
width: 18.18rpx;
height: 32.12rpx;
}

.header_list {
display: inline-block;
margin: 0 auto;
font-size: 36rpx;
font-weight: 400;
color: #000000;
}

.focus_title {
margin-right: 126rpx;
}

.title_active {
color: #6FECE4;
}
}
}

操作步骤:

直接运行即可

预期结果:

关闭预览

实际结果:

没有触发3

bug描述:

closePreview不进入回调,也不触发

更多关于uni-app closePreviewImage在3.2.15版本不能使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

文档不是写着(3.2.15+)版本吗,注意+ 当前只能用plus.nativeUI.closePreviewImage();

更多关于uni-app closePreviewImage在3.2.15版本不能使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


啊这,这种不应该是包含吗

而且现在最新版本就是3.2.15,预览版也是,都没版本为什么要写上

回复 陈大雷Q: 写文档的人可能以为写个+号就能清楚的表达是15版本之后的版本吧.我也不是很清楚这个脑回路

回复 DCMarvel: 就是bug,3.2.15版本已经有了这个功能,我看了看更新文档

回复 DCMarvel: 现在我已经更新到3.2.16了,还是有bug

在 uni-app 3.2.15 版本中,uni.closePreviewImage 确实存在已知问题。根据官方文档和社区反馈,这个 API 在部分版本中存在兼容性问题。

从你的代码来看,在 preImages 方法的删除操作中调用了 uni.closePreviewImage,但回调函数没有执行。这是该版本的一个常见问题。

临时解决方案:

  1. 使用异步延迟关闭(推荐):
// 删除成功后
if (res.data.code == 1000) {
    this.imagesUrl.splice(index, 1)
    uni.showToast({
        title: '删除成功',
        icon: 'none'
    })
    
    // 延迟关闭预览
    setTimeout(() => {
        uni.closePreviewImage()
    }, 300)
}
  1. 使用 uni.hideLoading 替代(在某些场景下有效):
uni.hideLoading()
  1. 降级处理
// 尝试捕获异常
try {
    uni.closePreviewImage({
        complete: ret => {
            console.log('关闭预览结果:', ret)
        }
    })
} catch (error) {
    console.warn('closePreviewImage 调用失败:', error)
    // 可以在这里添加降级逻辑
}
回到顶部