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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

实现思路

那么既然小程序没有分享到朋友圈的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标签后如果不想让他在页面中出现，可以使用定位，让他不出现在视野范围内就好。

补充：忘记说一点了，上面代码绘制头像部分，其中绘制圆形头像也是一个小知识点哦！！！

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