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

简介

截止我写这篇文章的时候，小程序应该是还没有能够直接分享到朋友圈的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) {}

 

 小结

上面讲了小程序分享到朋友圈的主题流程和一些可能会遇到的难点问题，这篇文章主要是提供了一个思路，代码可以作为参考，毕竟每个人的项目需求总是有差别的，我上面所写的内容是我实现这个功能的流程和方式，我不知道还有没有更好的方式，如果有更好的实现方式，欢迎评论留下您的建议，或者分享一些更好的链接也是可以的，谢谢。