系列文章傳送門：

微信小程序第一篇：自定義組件詳解

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

微信小程序第三篇：獲取頁面節點信息

目錄

一、封裝分享組件

二、定義用戶授權方法

三、調用流程

---

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

?

這種場景還是非常常見的，點擊分享的時候我們可以轉發給好友，或者生成當前頁的海報圖片保存到手機相冊中。分享給好友這個功能可以通過? 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啦！

總結

以上是生活随笔為你收集整理的微信小程序第四篇：生成图片并保存到手机相册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。