微信小程序第四篇：生成图片并保存到手机相册

系列文章传送门：

微信小程序第一篇：自定义组件详解

微信小程序第二篇：七种主流通信方法详解

微信小程序第三篇：获取页面节点信息

目录

一、封装分享组件

二、定义用户授权方法

三、调用流程

---

首先我们看一下要完成的效果：

 

这种场景还是非常常见的，点击分享的时候我们可以转发给好友，或者生成当前页的海报图片保存到手机相册中。分享给好友这个功能可以通过  button 的 open-type 方式实现，那自动保存图片到本地该如何实现呢，让我们来看一看吧：

一、封装分享组件

首先我们要封装一个分享的组件，这样方便在其他的页面中复用。这样就大大减少了代码的冗余，

在 components 文件夹中新建一个组件，下面是完整代码

share.wxml：

 share.js：

Component({    properties: {  },    data: {    showShareSheet: false  },    methods: {    openShareSheet() {      this.setData({showShareSheet: true})    },    closeShareSheet() {      this.setData({showShareSheet: false});    },    genPlayBill() {      this.triggerEvent('genPlayBill')    },  }})

在点击生成海报的时候，我们向父组件发送了一个事件来调用 genPlayBill 方法，因为这个方法显然不应该在当前组件内定义，应该根据不同场景来定义我们只需要调用它就可以了。

share.wxss：

.flex-column {  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;}.flex-row {  display: flex;  flex-direction: row;  align-items: center;  justify-content: space-between;}.share-sheet-mask {  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: rgba(0, 0, 0, 0.60);  z-index: 101;  justify-content: flex-end;}.share-sheet-mask .share-sheet {  padding:0 24rpx;  background: #f1f1f1;  border-radius: 16rpx 16rpx 0px 0px;  width: 100%;  box-sizing: border-box;}.share-sheet-mask .share-sheet .items {  padding: 48rpx 0 31rpx 0;  justify-content: space-around;  border-bottom: 0.5px solid rgba(39,36,71,0.20);}.share-sheet-mask .share-sheet .items .item{  text-align: center;}.share-sheet-mask .share-sheet .items .item .ico {  width: 80rpx;  height: 80rpx;  background: #ffffff;  border-radius: 50%;  box-shadow: 0 0 12rpx 0 rgba(204,204,204,0.60);  padding: 0;  margin: 0;  padding: 0;}.share-sheet-mask .share-sheet .items .item .ico::after{  border: none;}.share-sheet-mask .share-sheet .items .item .ico .img {  margin: auto;}.share-sheet-mask .share-sheet .items .item .ico .wx-ico {  width: 52rpx;  height: 40rpx;}.share-sheet-mask .share-sheet .items .item .desc {  font-size: 24rpx;  font-family: PingFangSC, PingFangSC-Regular;  color: #6d6d6d;  margin-top: 14rpx;}.share-sheet-mask .share-sheet .items .item .ico .img-ico {  width: 44rpx;  height: 44rpx;}.share-sheet-mask .share-sheet .cancel-share-sheet {  margin: 31rpx auto 80rpx auto;  font-size: 32rpx;  font-family: PingFangSC, PingFangSC-Regular;  color: #272447;  text-align: center;}

二、定义用户授权方法

刚刚我们封装了顶部的分享组件，那现在就要去定义保存图片到相册的方法了，我们写代码的时候一定要考虑清楚这段代码是否是可复用的，是否应该剥离出去。显然保存图片到相册这个方法我们应该写在 utils 目录中，因为有很多其他的场景都可以用这个方法，那我们就封装一个公用方法，参数就是图片的地址，成功的回调函数和失败的回调函数。

最复杂的就是用户授权了，我们一起看一下代码结构：

const saveImgToPhotos = (imgPath, succCallback, failedCallback) => {      wx.getSetting ({ // 查询所有授权        success(res) {            if (res.authSetting['scope.writePhotosAlbum']) { // 用户已经授权                save() // 执行保存函数            }else { // 未授权                wx.authorize({ scope: 'scope.writePhotosAlbum',                   success() {  // 用户同意授权                    save()  // 执行保存函数                  },                  fail(err) {  // 用户拒绝授权                    if (err && err.errMsg.endsWith("auth deny")) {                       wx.showModal({                        title: '授权添加到相册',                        content: '需要获取您的添加相册权限，请确认授权，否则分享功能无法正常使用',                        success: function (resolve) {if (resolve.confirm) { // 用户同意设置授权wx.openSetting({  success(res) {    if (res && res.authSetting['scope.writePhotosAlbum']) {      save()  // 执行保存函数    }  },  fail(res) {   // 用户拒绝设置授权    console.log(res)    failedCallback('没有权限，保存失败')  }})                          } else {  // 用户拒绝设置failedCallback('没有权限，保存失败')                          }                        }                      })                    } else {                      failedCallback(err && err.errMsg || '保存失败')                    }                  }                })            }        },    })  }  

通过 wx.authorize() 来申请权限的方式是比较繁琐的。因为它的状态比较多，大致可分为：

1. 用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意 —— 可调用相应接口。
2. 用户未接受或拒绝过此权限，会弹窗询问用户，用户点击拒绝 —— 打开设置页面。
3. 如果用户已授权 —— 可调用相应接口。
4. 用户已拒绝授权 —— 打开设置页面。

上述情况的2/4是需要小伙伴们结合 wx.openSetting() 来帮助用户进行二次授权的。

搞定了用户授权这个麻烦事后，下面就是定义我们的 save 保存函数了，这个就很简单了：

let save = function () {      wx.saveImageToPhotosAlbum({        filePath: imgPath,        success() {          succCallback()        },        fail(res){          failedCallback(res)        }      })    }

把这段代码添加到 saveImgToPhotos 方法中就ok了，调用 wx.saveImageToPhotosAlbum 方法，参数就是我们传进来的图片地址，成功的话就执行成功的回调，失败就执行失败的回调。

下面是官方的文档说明：

 

三、调用流程

下面我们就把组件，方法这些东西引入到我们的页面中。在页面的 json 文件中引入组件路径。

把组件引入页面wxml中：

这里的方法就是点击生成海报的时候调用的父组件的方法。

当点击分享的时候展示分享组件：

openShareSheet(e) {        this.selectComponent("#share-sheet").openShareSheet()    },

在这里通过选择器可以直接调用子组件中的方法，来控制分享组件的显示与隐藏。

genTimelineImage(e) {        wx.showLoading({          title: "海报生成中",          icon: "loading",          mask: true,        })        const imgSrc = `路径`        wx.getImageInfo({          src: imgSrc,        })          .then((res) => {            wx.hideLoading()            this.imgTempPath = res.path            this.saveTimelineImg()          })          .catch((err) => console.log(err))      },          saveTimelineImg: function () {        saveImgToPhotos(this.imgTempPath, function(){          this.selectComponent("#share-sheet").closeShareSheet()        }.bind(this), function(errMsg) {          this.selectComponent("#share-sheet").closeShareSheet()        }.bind(this))      },

当我们点击生成海报调用 genTimelineImage 方法的时候，通过 wx.getImageInfo 方法读取想要保存图片的临时下载路径，把他保存到外部定义的一个变量中，这样方便我们在 utils 目录中定义的 saveImgToPhotos 方法调用。这样我们整个的流程就over啦！

来源地址：https://blog.csdn.net/qq_49900295/article/details/128252612