系列文章传送门：
微信小程序第一篇：自定义组件详解
微信小程序第二篇：七种主流通信方法详解
微信小程序第三篇：获取页面节点信息
目录
一、封装分享组件
二、定义用户授权方法
三、调用流程
首先我们看一下要完成的效果：
这种场景还是非常常见的，点击分享的时候我们可以转发给好友，或者生成当前页的海报图片保存到手机相册中。分享给好友这个功能可以通过 button 的 open-type 方式实现，那自动保存图片到本地该如何实现呢，让我们来看一看吧：
一、封装分享组件
首先我们要封装一个分享的组件，这样方便在其他的页面中复用。这样就大大减少了代码的冗余，
在 components 文件夹中新建一个组件，下面是完整代码
share.wxml：
<!-- 底部自定义分享菜单栏 -->
<view class="share-sheet-mask flex-column" hidden="{{!showShareSheet}}" catchtap="closeShareSheet"><view class="share-sheet"><view class="items flex-row"><view class="item flex-column"><button class="ico flex-row" open-type="share"><image class="img wx-ico" src="../../images/ico_wx.svg"></image></button><view class="desc">微信好友</view></view><view class="item flex-column"><button class="ico flex-row" catchtap="genPlayBill"><image class="img img-ico" src="../../images/ico_img.svg"></image></button><view class="desc">生成海报</view></view></view><view class="cancel-share-sheet">取消</view></view>
</view>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;
}
/*去除button的默认黑边框*/
.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() 来申请权限的方式是比较繁琐的。因为它的状态比较多，大致可分为：
- 用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意 —— 可调用相应接口。
- 用户未接受或拒绝过此权限，会弹窗询问用户，用户点击拒绝 —— 打开设置页面。
- 如果用户已授权 —— 可调用相应接口。
- 用户已拒绝授权 —— 打开设置页面。
上述情况的2/4是需要小伙伴们结合 wx.openSetting() 来帮助用户进行二次授权的。
搞定了用户授权这个麻烦事后，下面就是定义我们的 save 保存函数了，这个就很简单了：
let save = function () {wx.saveImageToPhotosAlbum({filePath: imgPath,success() {succCallback()},fail(res){failedCallback(res)}})}把这段代码添加到 saveImgToPhotos 方法中就ok了，调用 wx.saveImageToPhotosAlbum 方法，参数就是我们传进来的图片地址，成功的话就执行成功的回调，失败就执行失败的回调。
下面是官方的文档说明：
三、调用流程
下面我们就把组件，方法这些东西引入到我们的页面中。在页面的 json 文件中引入组件路径。
把组件引入页面wxml中：
<share-sheet id="share-sheet" catch:genPlayBill="genTimelineImage" />这里的方法就是点击生成海报的时候调用的父组件的方法。
当点击分享的时候展示分享组件：
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.paththis.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啦！
