微信小程序分享朋友圈的实现思路与解决办法

实现思路

那么既然小程序没有分享到朋友圈的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()
                        }, )
                    }
                })
            }
        })

先介绍一下上面的代码，为什么要先执行上面的代码呢，我们使用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, , , windowWidth, that.data.scale * windowWidth)

        //绘制头像
        ctx.save()
        ctx.beginPath()
        ctx.arc(windowWidth / , 0.32 * windowWidth, 0.15 * windowWidth, ,  * Math.PI)
        ctx.clip()
        ctx.drawImage(portraitPath, 0.7 * windowWidth / , 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 / , 0.52 * windowWidth)
        //绘制第二段文本
        ctx.setFillStyle('#ffffff')
        ctx.setFontSize(0.037 * windowWidth)
        ctx.setTextAlign('center')
        ctx.fillText('邀请你一起来领券抢红包啦~', windowWidth / , 0.57 * windowWidth)
        //绘制二维码
        ctx.drawImage(qrPath, 0.64 * windowWidth / , 0.75 * windowWidth, 0.36 * windowWidth, 0.36 * windowWidth)
        //绘制第三段文本
        ctx.setFillStyle('#ffffff')
        ctx.setFontSize(0.037 * windowWidth)
        ctx.setTextAlign('center')
        ctx.fillText('长按二维码领红包', windowWidth / , 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: %;
  position: fixed;
  left: ;
  top: 999999rpx;
}

绘制完图片后还要把它转化成图片

canvasToImage() {
        var that = this
        wx.canvasToTempFilePath({
            x: ,
            y: ,
            width: that.data.windowWidth,
            height: that.data.windowWidth * that.data.scale,
            destWidth: that.data.windowWidth * ,
            destHeight: that.data.windowWidth *  * 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都是可以的。