微信小程序是当前最为火热的前端技术之一，而其中的图片预览组件也是小程序中较为常见的功能，在小程序的开发过程中，我们通常需要使用图片预览来优化用户体验，而 npm 包 wxpreview 就是一个非常不错的选择。
1. 安装
可以通过 npm 来安装 wxpreview，我们只需要在命令行中执行以下语句即可：
npm install wxpreview --save
2. 使用
在使用 wxpreview 之前，我们需要先引入该包，可以在需要使用的页面或组件中通过以下方式进行引入：
import wxpreview from 'wxpreview'
接下来，我们来看看如何使用 wxpreview 来实现图片预览的功能。
2.1 基本用法
在需要实现图片预览的地方，我们可以使用 wxpreview 的 previewImage 方法来进行调用。
该方法的使用非常简单，我们只需要在点击图片时，调用该方法即可，如下所示：
wxpreview.previewImage({
current: 'image/preview.png', // 当前显示图片的链接，不填则默认为 urls 数组的第一张
urls: ['image/preview.png', 'image/preview1.png'] // 需要预览的图片链接列表
})其中，current 表示当前显示的图片链接，不填则默认显示 urls 数组的第一张图片，而 urls 则是需要预览的图片链接列表。
我们可以将该方法绑定到图片组件的 bindtap 事件上，使得在点击图片时可以触发预览操作，例如：
<image src="image/preview.png" bindtap="previewImage"></image>
Page({
previewImage() {
wxpreview.previewImage({
current: 'image/preview.png',
urls: ['image/preview.png', 'image/preview1.png']
})
}
})2.2 高级用法
除了基本的图片预览外，wxpreview 还支持一些高级功能，我们可以通过传递不同的参数来实现不同的效果，这里简单介绍两个常用的高级功能。
2.2.1 长按保存图片
在图片预览中，我们通常也需要提供保存图片的功能，用户可以通过长按图片来触发保存操作。
wxpreview 也提供了相应的功能，我们只需要在调用 previewImage 方法时，传递 save 参数为 true 即可实现长按保存图片的功能，例如：
wxpreview.previewImage({
current: 'image/preview.png',
urls: ['image/preview.png', 'image/preview1.png'],
save: true
})2.2.2 自定义样式
wxpreview 的默认样式可能并不满足我们的需求，但我们可以通过传递样式相关的参数来自定义预览界面的样式，例如：
-- -------------------- ---- -------
------------------------
-------- --------------------
----- --------------------- ----------------------
------ -
--- ------------------ -- -----
---------- ------------------------ -- -----
---------------- ------- -- ---------
------ ------- -- ------
----- ------ -- ------
-
--3. 总结
通过本文的介绍，我们了解了如何通过 wxpreview 包来实现小程序中的图片预览功能，并同时介绍了其基本用法和高级用法，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642581e8991b448e152f