小程序 - 实现【一键复制】、【一键保存】功能

需求：制作类似三里商学院小程序的【复制文案】、【一键保存】功能。

目的：使用户更便捷地提取想要的信息。

使用【一键复制】

思路：把需要的文字复制到手机剪贴板，使用小程序API wx.setClipboardData 方法。

• wxml文件：

<!-- 一键复制 -->
<view class='co_copy' bindtap='bindcopy' data-description='{{item.description}}'>一键复制</view>

data-description='{{item.description}}' 表示需要的复制文字。

• js文件：

  bindcopy: function(e) {
    var description = e.currentTarget.dataset.description;
    wx.setClipboardData({
      data: description,
      success: function(res) {
        wx.getClipboardData({
          success: function(res) {
            console.log(res.data)
          }
        })
      }
    })
  },

使用【一键保存】

思路：把需要的图片下载到本地 wx.downloadFile ,再在成功回调函数中使用 wx.saveImageToPhotosAlbum 方法，把照片保存到手机。

• wxml文件：

<!-- 一键保存 -->
<view class='co_save' bindtap='bindsave' data-thumbs='{{item.thumbs}}'>一键保存</view>

data-thumbs='{{item.thumbs}}' 表示需要的保存图片。

• js文件

  bindsave: function(e) {
    var thumbs = e.currentTarget.dataset.thumbs;
    //console.log(thumbs)
    for (var i = 0; i < thumbs.length; i++) {
      var thumb = "https://zdu.igdlrj.com/attachment/" + thumbs[i];
      //console.log(thumb)
      wx.showLoading({
        title: '保存中...',
        mask: true
      });
      wx.downloadFile({
        url: thumb,
        success: function(res) {
          if (res.statusCode == 200) {
            let img = res.tempFilePath;
            wx.saveImageToPhotosAlbum({
              filePath: img,
              success: function(res) {
                wx.showToast({
                  title: '保存成功',
                  icon: 'success',
                  duration: 2000
                });
              },
              fail(res) {
                wx.showToast({
                  title: '保存失败',
                  icon: 'success',
                  duration: 2000
                })
              }
            })
          }
        }
      })
    }
  },

欢迎关注我的博客： https://blog.csdn.net/weixin_42323607

github地址： https://github.com/Nurtuam

多多支持！本人会持续更新哒 ❤️