微信小程序预览相册图片

一、使用介绍

wx.previewImage(Object object) 是用来在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

示例代码

wx.previewImage({
  current: '../uploads/a01.jpg', // 当前显示图片的http链接
  urls: [
    '../uploads/a01.jpg',
    '../uploads/a02.jpg',
    '../uploads/a03.jpg',
    '../uploads/foods.jpg'
  ] // 需要预览的图片http链接列表
})

二、实现相册预览

这里使用了 wx.chooseImage(Object object) 用来从本地相册选择图片或使用相机拍照。

<block wx:for="{{imageList}}" wx:for-item="image">
    <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image> 
</block>

<view bindtap="chooseImage">选择图片</view>

Page({
    data: {
        imageList: []
    },
    // 选择图片
    chooseImage: function() {
        var _this = this;
        wx.chooseImage({
            count: 9,
            sizeType: ['original', 'compressed'],
            soureType: ['album', 'camera'],
            success: function(res) {
                _this.setData({
                    imageList: res.tempFilePaths
                });
            }
        });
    },
    // 预览图片
    previewImage: function(e) {
        var current = e.target.dataset.src;
        wx.previewImage({
            current: current,
            urls: this.data.imageList
        });
    }
})

参考链接：

• https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html
• https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html