原文：http://www.wxapp-union.com/portal.php?mod=view&aid=3708

簡介截止我寫這篇文章的時候，小程式應該是還沒有能夠直接分享到朋友圈的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都是可以的。

if (options.scene) {
            //小程式碼掃碼進入
            console.log('小程式碼掃碼進入')
            that.setData({
                scene: decodeURIComponent(options.scene),
                entryType: 'scan'
            })
            wx.request({
                url: app.globalData.subDomain + '/GetSceneCode',
                data: {
                    scene: decodeURIComponent(options.scene)
                },
                method: 'POST',
                success: function (res) {}

小結

上面講了小程式分享到朋友圈的主題流程和一些可能會遇到的難點問題，這篇文章主要是提供了一個思路，程式碼可以作為參考，畢竟每個人的專案需求總是有差別的，我上面所寫的內容是我實現這個功能的流程和方式，我不知道還有沒有更好的方式，如果有更好的實現方式，歡迎評論留下您的建議，或者分享一些更好的連結也是可以的，謝謝。