微信小程序實現分享朋友圈功能
公司很多(duo)時候都會想(xiang)要(yao)傳播自己的小程(cheng)序，從(cong)而獲取更(geng)多(duo)的流量，從(cong)而分享(xiang)朋友圈(quan)的功能就誕生(sheng)了。
分享步驟：
一(yi)、通過canvas組件把要分享(xiang)出(chu)去的東(dong)西畫出(chu)來(lai)
二、通過saveImageToPhotosAlbum方法把(ba)canvas生成(cheng)的畫(hua)布轉成(cheng)圖片保(bao)存(cun)到(dao)本地
三(san)、通(tong)過(guo)發(fa)朋友圈的方式(shi)把之(zhi)前(qian)保存的圖片發(fa)到朋友圈
下面上代碼：
一、通過canvas組件把要分享出去的(de)東西畫出來
首先在wxml添加(jia)一個(ge)畫布(canvas)，畫布上會綁定一個(ge)bindtap事件(用來預(yu)覽圖片的(de)功能)
要實現(xian)分享(xiang)，最(zui)重要的(de)是獲取二維碼：為滿(man)足不同(tong)需求和(he)場(chang)景，這里提(ti)供了三個接口(kou)，開發(fa)者可挑選適合自己的(de)接口(kou)。
A接口，生(sheng)成小(xiao)程序碼，可接受path參數較長(chang)，生(sheng)成個(ge)數受限。
B接口，生(sheng)(sheng)成(cheng)小程序碼，可接受頁面參數(shu)較短(duan)，生(sheng)(sheng)成(cheng)個(ge)數(shu)不(bu)受限。
C接口，生(sheng)成(cheng)二維碼，可接受path參數(shu)較長，生(sheng)成(cheng)個數(shu)受限。
第一步：
先通過AppId和(he)AppSecret獲取AccessToken(注(zhu)意:調用接口時(shi)，請登錄(lu)“微(wei)信公眾平臺-開發-基(ji)本(ben)配(pei)置”提前將服(fu)務器IP地址添加到IP白名單中，點擊查看設置方法，否則(ze)將無法調用成(cheng)功(gong),token有效期為兩小時(shi))
請求地址：//api.weixin.qq.com/cgi-bin/token
請求方式：GET
請求參數：
返回參數(shu)：
第二步：
有了AccessToken，我們就可以獲取不同(tong)的小(xiao)程序二(er)維(wei)碼了。
小程序(xu)碼(ma)(ma)分兩種(zhong)：前面一種(zhong)為菊花式(shi)小程序(xu)碼(ma)(ma)(接(jie)口A和接(jie)口B)，另一種(zhong)是(shi)狗皮膏藥式(shi)QR碼(ma)(ma)(接(jie)口C)
接(jie)口(kou)A: 適(shi)用于需(xu)要(yao)的碼(ma)數量較(jiao)少的業(ye)務(wu)場(chang)景 接(jie)口(kou)地址：
//api.weixin.qq.com/wxa/ge ... _token=ACCESS_TOKEN
注(zhu)意(yi)：通過該接口生成的(de)小(xiao)程(cheng)序(xu)碼(ma)，永久有效(xiao)，數(shu)量(liang)限制見文末說明，請謹慎使用。用戶掃描該碼(ma)進(jin)入小(xiao)程(cheng)序(xu)后(hou)，將直接進(jin)入 path 對應的(de)頁(ye)面。
接口B：適用于(yu)需(xu)要的碼數(shu)量極多的業務場景(jing)
接口地(di)址(zhi)：
//api.weixin.qq.com/wxa/ge ... _token=ACCESS_TOKEN
注意(yi)：通(tong)過該接口(kou)生成的(de)(de)(de)(de)小程序碼(ma)，永久有效，數量(liang)暫無限制。用(yong)戶掃描該碼(ma)進入小程序后，開(kai)發者需(xu)在對應頁面(mian)獲取的(de)(de)(de)(de)碼(ma)中(zhong) scene 字(zi)段的(de)(de)(de)(de)值，再(zai)做處理邏(luo)輯(ji)。使用(yong)如下代碼(ma)可以獲取到二(er)維碼(ma)中(zhong)的(de)(de)(de)(de) scene 字(zi)段的(de)(de)(de)(de)值。調試階段可以使用(yong)開(kai)發工具的(de)(de)(de)(de)條件編譯(yi)自定義參(can)數 scene=xxxx 進行模擬。首頁onLoad的(de)(de)(de)(de)時候獲取參(can)數需(xu)varscene = decodeURIComponent(options.scene)
接口C：適用于需要的(de)碼數(shu)量(liang)較(jiao)少的(de)業(ye)務(wu)場景
接(jie)口地址：
//api.weixin.qq.com/cgi-bi ... _token=ACCESS_TOKEN
注(zhu)意：通過該接口生成的小程(cheng)序(xu)二(er)維碼，永(yong)久有效，數量限制見文末說(shuo)明，請謹慎(shen)使用。用戶掃描該碼進入小程(cheng)序(xu)后，將直接進入 path 對應(ying)的頁面。
// canvas生(sheng)成(cheng)圖片(pian)地址
return new Promise(function (resolve, reject) {
wx.getSystemInfo({
success: function (res) {
var arr = [res.windowWidth, res.windowHeight];
resolve(arr);
}
})
}).then(function (value) {
wx.canvasToTempFilePath({
destWidth: value[0] * 6, // 這里將(jiang)圖(tu)片擴大6倍，是為了(le)讓保存的圖(tu)片更清晰(xi)
destHeight: value[1] * 6,
fileType: "jpg",
canvasId: 'shareCanvas',// 該id就是canvas組件的 canvas_id
quality: 1,
success: function (obj) {
console.log(obj.tempFilePath);
that.setData({
tempFilePath: obj.tempFilePath
})
}
})
})
二(er)、最(zui)后(hou)通(tong)過saveImageToPhotosAlbum方法把canvas生(sheng)成(cheng)的畫布轉成(cheng)圖片保存到相冊(ce)
//保存至相冊
saveImageToPhotosAlbum: function () {
var that = this
var value = that.data.tempFilePath;// 該圖片為你(ni)上面畫出來(lai)的圖片地址;
wx.saveImageToPhotosAlbum({
filePath: value,
success: (res) => {
// 保存(cun)成功
},
fail: function (res) {
console.error("打開設置窗(chuang)口");
wx.openSetting({
success(settingdata) {
console.error(settingdata)
if (settingdata.authSetting["scope.writePhotosAlbum"]) {
console.error("獲取權限(xian)成功(gong)，再次點擊(ji)圖片(pian)保存到相冊")
} else {
console.error("獲取權限失(shi)敗")
}
}
})
}
})
},
復制代碼
三、通過發(fa)(fa)朋友(you)(you)圈(quan)的方(fang)式把(ba)之前(qian)保存(cun)的圖片發(fa)(fa)到(dao)朋友(you)(you)圈(quan)(相信這一步(bu)大(da)家都懂，我(wo)就不介紹了)
小程序的一些限制(zhi)
1.tip：通(tong)過該接(jie)口，僅能生成已發(fa)布的(de)小程(cheng)序的(de)二維(wei)碼。
2.tip：可以在開發(fa)者工具預覽(lan)時生成開發(fa)版(ban)的帶參二(er)維(wei)碼。
3.tip：接口(kou)A加上接口(kou)C，總共生成的碼(ma)數量(liang)限制為100,000，請謹慎(shen)調(diao)用(yong)。
4.tip: POST 參數需要轉成(cheng) json 字(zi)符串，不支持 form 表單提交。
