推荐下载
-
2020-05-12 浏览：738
-
2020-05-06 浏览：520
-
2020-05-08 浏览：509
-
2020-04-04 浏览：502
-
2020-05-12 浏览：497
微信小程序分享朋友圈的实现思路与解决办法
发布时间:2020-10-31简介
截止我写这篇文章的时候，小程序应该是还没有能够直接分享到朋友圈的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) } }) } })
上面代码中有执行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(); },
- 上一篇：vue与微信小程序的一些区别
- 下一篇：细数小程序的坑
