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

簡介

截止我寫這篇文章的時候，小程序應該是尚未可以直接分享到朋友圈的api,轉發給朋友和羣是能夠實現的，這篇文章主要是講如何實現分享到朋友圈。

實現思路

那麼既然小程序沒有分享到朋友圈的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都是能夠的。

  讀取小程序碼攜帶參數信息

https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html

上面的路徑是小程序關於小程序碼的官方文檔說明，具體配置生成小程序二維碼須要後端配合。

我下面主要講怎麼讀取小程序碼攜帶的信息。

在小程序生命週期onload函數中能夠攜帶option參數，option.scene就是小程序碼中攜帶的信息，簡單信息能夠直接放到scene中，若是是複雜信息，能夠把獲取到的scene做爲參數，經過ajax請求獲取到你須要的信息。下面是部分代碼，實現思路是這樣的。

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) {}

 

 小結

上面講了小程序分享到朋友圈的主題流程和一些可能會遇到的難點問題，這篇文章主要是提供了一個思路，代碼能夠做爲參考，畢竟每一個人的項目需求老是有差異的，我上面所寫的內容是我實現這個功能的流程和方式，我不知道還有沒有更好的方式，若是有更好的實現方式，歡迎評論留下您的建議，或者分享一些更好的連接也是能夠的，謝謝。