介绍
微信小程序是指基于微信平台开发的应用程序，其架构相对简单，可以很方便地开发出一些轻便的应用。在小程序中，开发者可以方便地使用页面、组件等元素来构建出功能完整的小程序。其中，选择预览图片是很常见的功能，而且为了用户体验，我们通常会加上长按删除图片的功能，本文主要介绍在小程序中实现选择预览图片和长按删除图片的代码。
选择预览图片
1. 实现图片选择
要实现图片选择功能，我们需要使用小程序提供的组件。其中，可以使用<button>和<input type="file">组合来实现选择图片的功能，代码如下：
<button bindtap="chooseImg">选择图片</button>
<input type="file" accept="image/*" style="display:none;" bindchange="uploadImg" name="uploadImg" id="uploadImg">
在<button>的点击事件中，我们需要让<input>点击事件触发，来选择图片。代码如下：
chooseImg:function(){
wx.chooseImage({
count:9,
success:(res)=>{
console.log(res.tempFilePaths)
}
})
}
其中，count属性表示最多可以选择几张图片，success表示选择成功后的回调函数，res中的tempFilePaths属性表示选择的图片的本地文件路径。这里我们只是在控制台输出一下选择的图片路径。
2.实现图片预览
在选择图片后，我们通常需要做的是预览图片。微信小程序提供了一个组件，<image>，可以用来显示图片。我们通过for循环遍历选择的图片路径，将其设置在<image>组件的src属性中，就可以很方便地实现图片预览了。代码如下：
// html代码
<view className="image-group">
<image wx:for="{{tempFilePaths}}" wx:key="{{index}}" src="{{item}}" bindlongpress="deleteImg"></image>
</view>
// js代码
data:{
tempFilePaths:[]
},
chooseImg:function(){
wx.chooseImage({
count:9,
success:(res)=>{
this.setData({
tempFilePaths:res.tempFilePaths
})
}
})
},
可以看到，我们将选择的图片路径存储在了data中的tempFilePaths数组中，然后通过wx:for指令，将数组中的每个元素都遍历出来，设置在<image>组件的src属性中。
此时，我们已经完成了图片选择和预览的功能。
长按删除图片
1. 删除图片
接下来，我们需要实现长按删除图片的功能。就像我们平时在手机上删除图片一样，长按图片出现删除按钮，点击后就可以删除图片。
首先，我们需要在<image>组件上监听长按事件，长按后可以触发删除图片的功能。代码如下：
deleteImg:function(e){
let index = e.currentTarget.dataset.index;
let tempFilePaths = this.data.tempFilePaths;
wx.showModal({
content:"确定删除该图片？",
success:(res)=>{
if(res.confirm){
tempFilePaths.splice(index,1);
this.setData({
tempFilePaths:tempFilePaths
})
}
}
})
},
在长按事件中，首先获取当前图片的索引index，然后使用wx.showModal方法显示删除确认框，当用户点击确认按钮时，通过JavaScript的数组方法splice()从tempFilePaths数组中删除对应的元素，最后更新data中tempFilePaths数组的值。
通过这段代码，我们就可以实现了长按删除图片的功能，但是用户每次都需要长按出现删除按钮，这并不是很友好。下一步我们来优化操作体验。
2. 添加删除按钮
为了优化用户体验，我们需要在<image>组件上添加删除按钮，这样用户可以直接点击删除按钮，而不需要长按。
为此，我们需要使用到微信小程序提供的组件，<movable-view>组件可以让子组件在父组件内随意拖动，也就是可以用来实现拖拽删除的效果。接下来我们来看一下具体实现的代码。
首先，我们需要在<image>组件上添加两个属性，分别为movable和direction，分别用来控制组件可移动和移动方向。代码如下：
<image wx:for="{{tempFilePaths}}" wx:key="{{index}}" src="{{item}}" mode="aspectFill" bindlongpress="deleteImg" data-index="{{index}}"
style="width:200rpx;height:200rpx;background:black;margin:10rpx;"
movable="{{true}}" direction="all"
bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd">
</image>
接下来，我们就需要在[js]中实现拖拽删除的功能。
我们可以通过监听<image>组件的touchstart、touchmove、touchend事件来实现拖拽删除功能。具体实现方法如下：
首先，在touchstart事件中记录下当前触摸事件的坐标，代码如下：
onTouchStart:function(e){
this.startX = e.touches[0].clientX;
this.startY = e.touches[0].clientY;
},
然后，在touchmove事件中计算出偏移量，通过setData方法将偏移量添加到<image>组件的style属性中，代码如下：
onTouchMove:function(e){
let index = e.currentTarget.dataset.index;
let touches = e.touches[0];
let moveX = touches.clientX - this.startX;
let moveY = touches.clientY - this.startY;
this.setData({
[`tempFilePaths[${index}].style`]:`transform: translate(${moveX}rpx,${moveY}rpx);`
})
},
最后，在touchend事件中判断是否拖动到删除区域，如果是，则删除该图片，代码如下：
onTouchEnd:function(e){
let index = e.currentTarget.dataset.index;
let x = e.changedTouches[0].clientX;
let y = e.changedTouches[0].clientY;
let deleteX = 300 / 750 * wx.getSystemInfoSync().windowWidth;
let deleteY = 1400 / 1334 * wx.getSystemInfoSync().windowHeight;
if(x > deleteX && y > deleteY){
wx.showModal({
content:"确定删除该图片？",
success:(res)=>{
if(res.confirm){
let tempFilePaths = this.data.tempFilePaths;
tempFilePaths.splice(index,1);
this.setData({
tempFilePaths:tempFilePaths
})
}
}
})
}else{
this.setData({
[`tempFilePaths[${index}].style`]:"transform:translate(0,0);transition:transform 0.3s ease-out;"
})
}
},
其中，x、y分别为移动结束点的X、Y坐标，deleteX、deleteY表示删除区域的宽高，通过判断坐标是否在删除区域内来确认是否删除该图片。如果是，则通过数组方法splice()删除对应的元素。如果不是，则将移动的图片恢复到原位置。
至此，我们已经完成了小程序中选择预览图片以及长按删除图片的功能，通过拖拽删除的方式优化了用户体验。
总结
通过本文的介绍，我们可以知道在小程序中实现选择预览图片及长按删除图片需要用到微信小程序提供的组件和方法。要实现长按删除的功能，需要在<image>组件上添加movable-view组件，并监听touchstart、touchmove、touchend事件，最后通过数组方法splice()删除对应元素。通过这些代码实现，可以让我们的小程序操作更加流畅、易用。