微信小程序?qū)崿F(xiàn)分享朋友圈功能
公司很多時(shí)候都會(huì)想要傳播自己的小程序，從而獲取更多的流量，從而分享朋友圈的功能就誕生了。
分享步驟：
一、通過(guò)canvas組件把要分享出去的東西畫(huà)出來(lái)
二、通過(guò)saveImageToPhotosAlbum方法把canvas生成的畫(huà)布轉(zhuǎn)成圖片保存到本地
三、通過(guò)發(fā)朋友圈的方式把之前保存的圖片發(fā)到朋友圈
下面上代碼：
一、通過(guò)canvas組件把要分享出去的東西畫(huà)出來(lái)
首先在wxml添加一個(gè)畫(huà)布(canvas)，畫(huà)布上會(huì)綁定一個(gè)bindtap事件(用來(lái)預(yù)覽圖片的功能)
要實(shí)現(xiàn)分享，最重要的是獲取二維碼：為滿足不同需求和場(chǎng)景，這里提供了三個(gè)接口，開(kāi)發(fā)者可挑選適合自己的接口。
A接口，生成小程序碼，可接受path參數(shù)較長(zhǎng)，生成個(gè)數(shù)受限。
B接口，生成小程序碼，可接受頁(yè)面參數(shù)較短，生成個(gè)數(shù)不受限。
C接口，生成二維碼，可接受path參數(shù)較長(zhǎng)，生成個(gè)數(shù)受限。
第一步：
先通過(guò)AppId和AppSecret獲取AccessToken(注意:調(diào)用接口時(shí)，請(qǐng)登錄“微信公眾平臺(tái)-開(kāi)發(fā)-基本配置”提前將服務(wù)器IP地址添加到IP白名單中，點(diǎn)擊查看設(shè)置方法，否則將無(wú)法調(diào)用成功,token有效期為兩小時(shí))
請(qǐng)求地址：https://api.weixin.qq.com/cgi-bin/token
請(qǐng)求方式：GET
請(qǐng)求參數(shù)：
返回參數(shù)：
第二步：
有了AccessToken，我們就可以獲取不同的小程序二維碼了。
小程序碼分兩種：前面一種為菊花式小程序碼(接口A和接口B)，另一種是狗皮膏藥式QR碼(接口C)
接口A: 適用于需要的碼數(shù)量較少的業(yè)務(wù)場(chǎng)景 接口地址：
https://api.weixin.qq.com/wxa/ge ... _token=ACCESS_TOKEN
注意：通過(guò)該接口生成的小程序碼，永久有效，數(shù)量限制見(jiàn)文末說(shuō)明，請(qǐng)謹(jǐn)慎使用。用戶掃描該碼進(jìn)入小程序后，將直接進(jìn)入 path 對(duì)應(yīng)的頁(yè)面。
接口B：適用于需要的碼數(shù)量極多的業(yè)務(wù)場(chǎng)景
接口地址：
https://api.weixin.qq.com/wxa/ge ... _token=ACCESS_TOKEN
注意：通過(guò)該接口生成的小程序碼，永久有效，數(shù)量暫無(wú)限制。用戶掃描該碼進(jìn)入小程序后，開(kāi)發(fā)者需在對(duì)應(yīng)頁(yè)面獲取的碼中 scene 字段的值，再做處理邏輯。使用如下代碼可以獲取到二維碼中的 scene 字段的值。調(diào)試階段可以使用開(kāi)發(fā)工具的條件編譯自定義參數(shù) scene=xxxx 進(jìn)行模擬。首頁(yè)onLoad的時(shí)候獲取參數(shù)需varscene = decodeURIComponent(options.scene)
接口C：適用于需要的碼數(shù)量較少的業(yè)務(wù)場(chǎng)景
接口地址：
https://api.weixin.qq.com/cgi-bi ... _token=ACCESS_TOKEN
注意：通過(guò)該接口生成的小程序二維碼，永久有效，數(shù)量限制見(jiàn)文末說(shuō)明，請(qǐng)謹(jǐn)慎使用。用戶掃描該碼進(jìn)入小程序后，將直接進(jìn)入 path 對(duì)應(yīng)的頁(yè)面。
// canvas生成圖片地址
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, // 這里將圖片擴(kuò)大6倍，是為了讓保存的圖片更清晰
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
})
}
})
})
二、最后通過(guò)saveImageToPhotosAlbum方法把canvas生成的畫(huà)布轉(zhuǎn)成圖片保存到相冊(cè)
//保存至相冊(cè)
saveImageToPhotosAlbum: function () {
var that = this
var value = that.data.tempFilePath;// 該圖片為你上面畫(huà)出來(lái)的圖片地址;
wx.saveImageToPhotosAlbum({
filePath: value,
success: (res) => {
// 保存成功
},
fail: function (res) {
console.error("打開(kāi)設(shè)置窗口");
wx.openSetting({
success(settingdata) {
console.error(settingdata)
if (settingdata.authSetting["scope.writePhotosAlbum"]) {
console.error("獲取權(quán)限成功，再次點(diǎn)擊圖片保存到相冊(cè)")
} else {
console.error("獲取權(quán)限失敗")
}
}
})
}
})
},
復(fù)制代碼
三、通過(guò)發(fā)朋友圈的方式把之前保存的圖片發(fā)到朋友圈(相信這一步大家都懂，我就不介紹了)
小程序的一些限制
1.tip：通過(guò)該接口，僅能生成已發(fā)布的小程序的二維碼。
2.tip：可以在開(kāi)發(fā)者工具預(yù)覽時(shí)生成開(kāi)發(fā)版的帶參二維碼。
3.tip：接口A加上接口C，總共生成的碼數(shù)量限制為100,000，請(qǐng)謹(jǐn)慎調(diào)用。
4.tip: POST 參數(shù)需要轉(zhuǎn)成 json 字符串，不支持 form 表單提交。
