微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

关于微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能的攻略，我可以给出以下具体步骤和示例说明。

步骤一：设置预览图片的样式

我们需要给图片设置一个样式，并绑定一个tap事件，来触发图片的预览操作。

示例一代码：

<view>
  <image class="img" src="{{imgUrl}}" mode="aspectFit" bind:tap="previewImage"></image>
</view>

...

.preview-image {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image .img-wrapper {
  width: 80%;
  height: 80%;
}

.preview-image .img {
  width: 100%;
  height: 100%;
}

示例一解析：

我们定义了一个图片img标签，通过bind:tap绑定了一个方法previewImage。在预览图片的时候，需要图片全屏显示，因此我们定义了一个背景颜色、display:flex、justify-content:center、align-items:center的父级元素，将图片容器设置为了80% * 80%的大小。

步骤二：实现图片的预览

接下来我们需要在previewImage方法中完成预览图片的操作，具体方法我们可以使用wx.previewImage进行实现。

示例二代码：

previewImage: function() {
    var that = this;
    var current = this.data.imgUrl;
    wx.previewImage({
        current: current,
        urls: [current],
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {},
    });
}

示例二解析：

我们首先获取当前图片的src地址，作为预览操作的当前图片。然后通过wx.previewImage进行预览。其中，current为当前预览的图片地址，urls为需要预览的图片地址数组。

步骤三：实现图片的保存

接下来我们需要在预览图片的同时，实现长按图片保存的操作，以便用户将图片保存到本地相册。

示例三代码：

previewImage: function() {
    var that = this;
    var current = this.data.imgUrl;
    wx.previewImage({
        current: current,
        urls: [current],
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {},
    });
},

// 长按保存图片
saveImage: function() {
    var that = this;
    wx.showActionSheet({
        itemList: ['保存图片'],
        success: function(res) {
            wx.getSetting({
                success: (res) => {
                    if (!res.authSetting['scope.writePhotosAlbum']) {
                        wx.authorize({
                            scope: 'scope.writePhotosAlbum',
                            success: () => {
                                that.savePhoto();
                            },
                            fail: () => {
                                wx.showToast({
                                    title: '授权失败',
                                    icon: 'none'
                                });
                            }
                        })
                    } else {
                        that.savePhoto();
                    }
                }
            })
        }
    })
},
// 保存图片到本地相册
savePhoto: function() {
    wx.downloadFile({
        url: this.data.imgUrl,
        success: (res) => {
            wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function(res) {
                    wx.showToast({
                        title: '保存成功'
                    })
                },
                fail: function(res) {
                    wx.showToast({
                        title: '保存失败',
                        icon: 'none'
                    })
                }
            })
        },
        fail: function(res) {
            wx.showToast({
                title: '下载失败',
                icon: 'none'
            })
        }
    })
}

示例三解析：

我们通过wx.showActionSheet，展示一个操作选项，其中只有一项，即保存图片。然后在用户点击保存图片的时候，需要判断用户是否已经授权写入相册的权限，如果没有则需要通过wx.authorize授权一次，授权成功后即可调用wx.saveImageToPhotosAlbum方法将图片保存到本地相册。

步骤四：识别带参数二维码

除了图片的预览和保存，我们还需要实现识别带参数二维码的功能，以便用户可以直接识别二维码，无需手动输入参数。

示例四代码：

// 识别带参数二维码
onLoad: function(options) {
    var that = this;
    wx.scanCode({
        success: (res) => {
            var result = res.result;
            that.setData({
                imgUrl: result,
            })
        }
    })
}

示例四解析：

我们在页面加载的时候，通过wx.scanCode方法进行扫描二维码的操作。当扫描成功后，将二维码结果作为图片地址，赋值给imgUrl。

这样我们就成功实现了微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能的攻略。需要注意，我们需要在小程序的app.json配置文件中进行相应的授权，否则会出现授权失败的情况。