微信小程序分享朋友圈的實現思路與解決辦法

實現思路

那么既然小程序沒有分享到朋友圈的api,我們怎么實現分享到朋友圈呢，下面我介紹一下實現思路。

既然沒有捷徑，那就走復雜一點的路線，那就是需要用戶手動分享到朋友圈，問題又來了，用戶手動分享的話，分享什么呢？我們其實在朋友圈應該已經看到不少帶有小程序碼的圖片，特別是年前與年后，應該看到不少智行火車票，攜程火車票分享到朋友圈的圖片，幫助好友加速，用來搶火車票，還有像今日頭條，分享新聞到朋友圈的方式。

他們共同的策略是生成一張帶有小程序碼的圖片，小程序碼包含了分享者的用戶信息，我們把圖片生成以后，用戶自行保存圖片到本地，然后分享到朋友圈，朋友圈好友長按圖片識別圖中二維碼，進入小程序后解析小程序碼攜帶的信息，生成相應的頁面。這樣就實現了分享到朋友圈這樣一個流程。

在這個流程中有兩個難點。

　　第一個難點是怎么生成帶有小程序碼的圖片，因為生成的圖片通常都不是孤零零的只有小程序碼，而且注意我們是要“生成一張圖片保存到本地“。

　　第二個難點是生成圖片了，分享到朋友圈了，好友通過我們分享的小程序碼進入小程序了，那么我們怎么提取小程序碼攜帶的用戶信息，獲取其中攜帶的參數？

 生成圖片

目前我所知道的有兩種方式生成小程序分享圖片，第一種是前端生成，第二種是后端生成。

前端生成圖片的話，就不可避免的需要借助canvas實現。微信小程序有自己的一套canvas的api,雖然名義上是他自己的繪圖功能，但是用法上與canvas並沒有太大區別，所以如果之前使用過canvas繪圖的話，使用起來應該不難。

后端生成的話流程我就不太清楚了，與我配合的是.net,他們有自己生成圖片的辦法，我問了java，他們說java也是有的。

下面我主要講前端使用canvas生成分享圖片的辦法。

wx.downloadFile({
            url: app.globalData.userInfo.avatarUrl,
            success: function (res1) {

                //緩存頭像圖片
                that.setData({
                    portrait_temp: res1.tempFilePath
                })
                //緩存canvas繪制小程序二維碼
                wx.downloadFile({
                    url: that.data.qrcode,
                    success: function (res2) {
                        console.log('二維碼：' + res2.tempFilePath)
                        //緩存二維碼
                        that.setData({
                            qrcode_temp: res2.tempFilePath
                        })
                        console.log('開始繪制圖片')
                        that.drawImage();
                        wx.hideLoading();
                        setTimeout(function () {
                            that.canvasToImage()
                        }, 200)
                    }
                })
            }
        })

先介紹一下上面的代碼，為什么要先執行上面的代碼呢，我們使用canvas繪制圖片，要使用小程序碼的圖片路徑，如果直接使用的話使用canvas是畫不上去的，必須要通過wx.downloadFile這個api先把圖片下載到本地，拿到臨時路徑，才能給下面的canvas繪制流程使用，所以要先執行上面的代碼。

上面代碼中有執行that.drawImage()這個函數，下面放出這個函數內的代碼。

drawImage() {
        //繪制canvas圖片
        var that = this
        const ctx = wx.createCanvasContext('myCanvas')
        var bgPath = '../../../images/share_bg.png'
        var portraitPath = that.data.portrait_temp
        var hostNickname = app.globalData.userInfo.nickName

        var qrPath = that.data.qrcode_temp
        var windowWidth = that.data.windowWidth
        that.setData({
            scale: 1.6
        })
        //繪制背景圖片
        ctx.drawImage(bgPath, 0, 0, windowWidth, that.data.scale * windowWidth)

        //繪制頭像
        ctx.save()
        ctx.beginPath()
        ctx.arc(windowWidth / 2, 0.32 * windowWidth, 0.15 * windowWidth, 0, 2 * Math.PI)
        ctx.clip()
        ctx.drawImage(portraitPath, 0.7 * windowWidth / 2, 0.17 * windowWidth, 0.3 * windowWidth, 0.3 * windowWidth)
        ctx.restore()
        //繪制第一段文本
        ctx.setFillStyle('#ffffff')
        ctx.setFontSize(0.037 * windowWidth)
        ctx.setTextAlign('center')
        ctx.fillText(hostNickname + ' 正在參加瘋狂紅包活動', windowWidth / 2, 0.52 * windowWidth)
        //繪制第二段文本
        ctx.setFillStyle('#ffffff')
        ctx.setFontSize(0.037 * windowWidth)
        ctx.setTextAlign('center')
        ctx.fillText('邀請你一起來領券搶紅包啦~', windowWidth / 2, 0.57 * windowWidth)
        //繪制二維碼
        ctx.drawImage(qrPath, 0.64 * windowWidth / 2, 0.75 * windowWidth, 0.36 * windowWidth, 0.36 * windowWidth)
        //繪制第三段文本
        ctx.setFillStyle('#ffffff')
        ctx.setFontSize(0.037 * windowWidth)
        ctx.setTextAlign('center')
        ctx.fillText('長按二維碼領紅包', windowWidth / 2, 1.36 * windowWidth)
        ctx.draw();
    },

寫到這里忽然覺得要講清楚這里的每個要點有點困難，大家盡量借鑒其中的思路，具體的代碼我不太可能都詳細解釋。上面的代碼是js部分，wxml部分需要注意的點是使用canvas標簽后如果不想讓他在頁面中出現，可以使用定位，讓他不出現在視野范圍內就好。

補充：忘記說一點了，上面代碼繪制頭像部分，其中繪制圓形頭像也是一個小知識點哦！！！

<!-- canvas繪制分享圖 -->
    <view class="canvas-box">
      <canvas canvas-id="myCanvas" style="width:100%;height:{{windowHeight}}px;"></canvas>
    </view>


.canvas-box{
  width: 100%;
  position: fixed;
  left: 0;
  top: 999999rpx;
}

繪制完圖片后還要把它轉化成圖片

canvasToImage() {
        var that = this
        wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: that.data.windowWidth,
            height: that.data.windowWidth * that.data.scale,
            destWidth: that.data.windowWidth * 4,
            destHeight: that.data.windowWidth * 4 * that.data.scale,
            canvasId: 'myCanvas',
            success: function (res) {
                console.log('朋友圈分享圖生成成功:' + res.tempFilePath)
                wx.previewImage({
                    current: res.tempFilePath, // 當前顯示圖片的http鏈接
                    urls: [res.tempFilePath] // 需要預覽的圖片http鏈接列表
                })
            },
            fail: function (err) {
                console.log('失敗')
                console.log(err)
            }
        })
    },

生成圖片后基本上就大功告成了，使用小程序提供的wx.previewImage或者wx.saveFile都是可以的。