实现思路
那么既然小程序没有分享到朋友圈的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都是可以的。