微信小程式實作分享朋友圈功能

公司很多時候都會想要傳播自己的小程式，進而擷取更多的流量，進而分享朋友圈的功能就誕生了。

分享步驟：

　　一、通過canvas元件把要分享出去的東西畫出來

　　二、通過saveImageToPhotosAlbum方法把canvas生成的畫布轉成圖檔儲存到本地

　　三、通過發朋友圈的方式把之前儲存的圖檔發到朋友圈

下面上代碼：

　　一、通過canvas元件把要分享出去的東西畫出來

　　首先在wxml添加一個畫布(canvas)，畫布上會綁定一個bindtap事件(用來預覽圖檔的功能)

　　要實作分享，最重要的是擷取二維碼：為滿足不同需求和場景，這裡提供了三個接口，開發者可挑選适合自己的接口。

　　A接口，生成小程式碼，可接受path參數較長，生成個數受限。

　　B接口，生成小程式碼，可接受頁面參數較短，生成個數不受限。

　　C接口，生成二維碼，可接受path參數較長，生成個數受限。

　　第一步：

　　先通過AppId和AppSecret擷取AccessToken(注意:調用接口時，請登入“微信公衆平台-開發-基本配置”提前将伺服器IP位址添加到IP白名單中，點選檢視設定方法，否則将無法調用成功,token有效期為兩小時)

　　請求位址：https://api.weixin.qq.com/cgi-bin/token

　　請求方式：GET

第二步：

　　有了AccessToken，我們就可以擷取不同的小程式二維碼了。

　　小程式碼分兩種：前面一種為菊花式小程式碼(接口A和接口B)，另一種是狗皮膏藥式QR碼(接口C)

　　接口A: 适用于需要的碼數量較少的業務場景 接口位址：

　　https://api.weixin.qq.com/wxa/ge ... _token=ACCESS_TOKEN

　　注意：通過該接口生成的小程式碼，永久有效，數量限制見文末說明，請謹慎使用。使用者掃描該碼進入小程式後，将直接進入 path 對應的頁面。

　　接口B：适用于需要的碼數量極多的業務場景

　　接口位址：

　　https://api.weixin.qq.com/wxa/ge ... _token=ACCESS_TOKEN

　　注意：通過該接口生成的小程式碼，永久有效，數量暫無限制。使用者掃描該碼進入小程式後，開發者需在對應頁面擷取的碼中 scene 字段的值，再做處理邏輯。使用如下代碼可以擷取到二維碼中的 scene 字段的值。調試階段可以使用開發工具的條件編譯自定義參數 scene=xxxx 進行模拟。首頁onLoad的時候擷取參數需varscene = decodeURIComponent(options.scene)

　　接口C：适用于需要的碼數量較少的業務場景

　　接口位址：

　　https://api.weixin.qq.com/cgi-bi ... _token=ACCESS_TOKEN

　　注意：通過該接口生成的小程式二維碼，永久有效，數量限制見文末說明，請謹慎使用。使用者掃描該碼進入小程式後，将直接進入 path 對應的頁面。

// 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, // 這裡将圖檔擴大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

　　})

　　}

　　})

　　})
           

二、最後通過saveImageToPhotosAlbum方法把canvas生成的畫布轉成圖檔儲存到相冊

//儲存至相冊

　　saveImageToPhotosAlbum: function () {

　　var that = this

　　var value = that.data.tempFilePath;// 該圖檔為你上面畫出來的圖檔位址;

　　wx.saveImageToPhotosAlbum({

　　filePath: value,

　　success: (res) => {

　　// 儲存成功

　　},

　　fail: function (res) {

　　console.error("打開設定視窗");

　　wx.openSetting({

　　success(settingdata) {

　　console.error(settingdata)

　　if (settingdata.authSetting["scope.writePhotosAlbum"]) {

　　console.error("擷取權限成功，再次點選圖檔儲存到相冊")

　　} else {

　　console.error("擷取權限失敗")

　　}

　　}

　　})

　　}

　　})

　　}
           

　　三、通過發朋友圈的方式把之前儲存的圖檔發到朋友圈(相信這一步大家都懂，我就不介紹了)

　　小程式的一些限制

　　1.tip：通過該接口，僅能生成已釋出的小程式的二維碼。

　　2.tip：可以在開發者工具預覽時生成開發版的帶參二維碼。

　　3.tip：接口A加上接口C，總共生成的碼數量限制為100,000，請謹慎調用。

　　4.tip: POST 參數需要轉成 json 字元串，不支援 form 表單送出。

如果你也想開發一款屬于自己的微信小程式，可以通過第三方專業開發平台，來幫助你實作開發需求：廈門在乎科技-專注小程式、app、網站開發