系列文章傳送門(mén)：

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

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

微信小程序第三篇：獲取頁(yè)面節(jié)點(diǎn)信息

目錄

一、封裝分享組件

二、定義用戶授權(quán)方法

三、調(diào)用流程

---

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

?

這種場(chǎng)景還是非常常見(jiàn)的，點(diǎn)擊分享的時(shí)候我們可以轉(zhuǎn)發(fā)給好友，或者生成當(dāng)前頁(yè)的海報(bào)圖片保存到手機(jī)相冊(cè)中。分享給好友這個(gè)功能可以通過(guò)? button 的 open-type 方式實(shí)現(xiàn)，那自動(dòng)保存圖片到本地該如何實(shí)現(xiàn)呢，讓我們來(lái)看一看吧：

一、封裝分享組件

首先我們要封裝一個(gè)分享的組件，這樣方便在其他的頁(yè)面中復(fù)用。這樣就大大減少了代碼的冗余，

在 components 文件夾中新建一個(gè)組件，下面是完整代碼

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">生成海報(bào)</view></view></view><view class="cancel-share-sheet">取消</view></view> </view>

?share.js：

Component({/*** 組件的屬性列表*/properties: {},/*** 組件的初始數(shù)據(jù)*/data: {showShareSheet: false},/*** 組件的方法列表*/methods: {openShareSheet() {this.setData({showShareSheet: true})},closeShareSheet() {this.setData({showShareSheet: false});},genPlayBill() {this.triggerEvent('genPlayBill')},} })

在點(diǎn)擊生成海報(bào)的時(shí)候，我們向父組件發(fā)送了一個(gè)事件來(lái)調(diào)用 genPlayBill 方法，因?yàn)檫@個(gè)方法顯然不應(yīng)該在當(dāng)前組件內(nèi)定義，應(yīng)該根據(jù)不同場(chǎng)景來(lái)定義我們只需要調(diào)用它就可以了。

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的默認(rèn)黑邊框*/ .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; }

二、定義用戶授權(quán)方法

剛剛我們封裝了頂部的分享組件，那現(xiàn)在就要去定義保存圖片到相冊(cè)的方法了，我們寫(xiě)代碼的時(shí)候一定要考慮清楚這段代碼是否是可復(fù)用的，是否應(yīng)該剝離出去。顯然保存圖片到相冊(cè)這個(gè)方法我們應(yīng)該寫(xiě)在 utils 目錄中，因?yàn)橛泻芏嗥渌膱?chǎng)景都可以用這個(gè)方法，那我們就封裝一個(gè)公用方法，參數(shù)就是圖片的地址，成功的回調(diào)函數(shù)和失敗的回調(diào)函數(shù)。

最復(fù)雜的就是用戶授權(quán)了，我們一起看一下代碼結(jié)構(gòu)：

const saveImgToPhotos = (imgPath, succCallback, failedCallback) => {wx.getSetting ({ // 查詢所有授權(quán)success(res) {if (res.authSetting['scope.writePhotosAlbum']) { // 用戶已經(jīng)授權(quán)save() // 執(zhí)行保存函數(shù)}else { // 未授權(quán)wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 用戶同意授權(quán)save() // 執(zhí)行保存函數(shù)},fail(err) { // 用戶拒絕授權(quán)if (err && err.errMsg.endsWith("auth deny")) { wx.showModal({title: '授權(quán)添加到相冊(cè)',content: '需要獲取您的添加相冊(cè)權(quán)限，請(qǐng)確認(rèn)授權(quán)，否則分享功能無(wú)法正常使用',success: function (resolve) { if (resolve.confirm) { // 用戶同意設(shè)置授權(quán)wx.openSetting({success(res) {if (res && res.authSetting['scope.writePhotosAlbum']) {save() // 執(zhí)行保存函數(shù)}},fail(res) { // 用戶拒絕設(shè)置授權(quán)console.log(res)failedCallback('沒(méi)有權(quán)限，保存失敗')}})} else { // 用戶拒絕設(shè)置failedCallback('沒(méi)有權(quán)限，保存失敗')}}})} else {failedCallback(err && err.errMsg || '保存失敗')}}})}},})}

通過(guò)?wx.authorize()?來(lái)申請(qǐng)權(quán)限的方式是比較繁瑣的。因?yàn)樗臓顟B(tài)比較多，大致可分為：

用戶未接受或拒絕過(guò)此權(quán)限，會(huì)彈窗詢問(wèn)用戶，用戶點(diǎn)擊同意 —— 可調(diào)用相應(yīng)接口。

用戶未接受或拒絕過(guò)此權(quán)限，會(huì)彈窗詢問(wèn)用戶，用戶點(diǎn)擊拒絕 —— 打開(kāi)設(shè)置頁(yè)面。

如果用戶已授權(quán) —— 可調(diào)用相應(yīng)接口。

用戶已拒絕授權(quán) —— 打開(kāi)設(shè)置頁(yè)面。

上述情況的2/4是需要小伙伴們結(jié)合 wx.openSetting() 來(lái)幫助用戶進(jìn)行二次授權(quán)的。

搞定了用戶授權(quán)這個(gè)麻煩事后，下面就是定義我們的 save 保存函數(shù)了，這個(gè)就很簡(jiǎn)單了：

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

把這段代碼添加到 saveImgToPhotos 方法中就ok了，調(diào)用?wx.saveImageToPhotosAlbum 方法，參數(shù)就是我們傳進(jìn)來(lái)的圖片地址，成功的話就執(zhí)行成功的回調(diào)，失敗就執(zhí)行失敗的回調(diào)。

下面是官方的文檔說(shuō)明：

?

三、調(diào)用流程

下面我們就把組件，方法這些東西引入到我們的頁(yè)面中。在頁(yè)面的 json 文件中引入組件路徑。

把組件引入頁(yè)面wxml中：

<share-sheet id="share-sheet" catch:genPlayBill="genTimelineImage" />

這里的方法就是點(diǎn)擊生成海報(bào)的時(shí)候調(diào)用的父組件的方法。

當(dāng)點(diǎn)擊分享的時(shí)候展示分享組件：

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

在這里通過(guò)選擇器可以直接調(diào)用子組件中的方法，來(lái)控制分享組件的顯示與隱藏。

genTimelineImage(e) {wx.showLoading({title: "海報(bào)生成中",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))},

當(dāng)我們點(diǎn)擊生成海報(bào)調(diào)用 genTimelineImage 方法的時(shí)候，通過(guò) wx.getImageInfo 方法讀取想要保存圖片的臨時(shí)下載路徑，把他保存到外部定義的一個(gè)變量中，這樣方便我們?cè)?utils 目錄中定義的 saveImgToPhotos 方法調(diào)用。這樣我們整個(gè)的流程就over啦！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。