微信小程序暂时没有分享到朋友圈的功能,分享的思路是用 canvas画布生成一张分享图片,保存到相册,用户将带有分享二维码的图片发到朋友圈,其他人可以识别图中二维码的方式进入小程序的指定分享页面。可参考智行火车票的助力抢票功能。

1、wxml文件
view class='share' canvas canvas-id="shareCanvas" style="width:300px;height:380px"/canvas/viewview class='btn-box' button bindtap='downloadImg'分享到朋友圈/button/view2、wxss样式文件(如果不想显示canvas,可以将canvas定位到可视区域外部)
page{ background: #eee;}.share{ width: 300px; height: 380px; position: fixed; left: 0; right: 0; top: 0; bottom: 100rpx; margin: auto;}.btn-box{ padding: 1060rpx 60rpx 0 60rpx;}button{ background: darkturquoise;}3、js文件
Page({ data: { sharebg: 'http://qiniu.jnwtv.com/H520181206092255188568494.png', // 分享底部背景图 shareTitle: '哈哈哈男孩从小就没有地位,看来一万个心酸哈哈哈男孩从小就没有地位,看来一万个心酸', // 分享标题 shareCoverImg: 'http://qiniu.jnwtv.com/H520181210164154569520223.jpeg', // 分享封面图 shareQrImg: 'http://qiniu.jnwtv.com/H520181210164146322557972.jpg', // 分享小程序二维码 userInfo: { headImg: 'http://qiniu.jnwtv.com/H520181210164138180428653.jpg', //用户头像 nickName: '打豆豆', // 昵称 }, seeDate: '2018-12-04', //看视频日期 }, onLoad: function (options) { }, downloadImg:function(){ let that = this; // 创建画布 const ctx = wx.createCanvasContext('shareCanvas') // 白色背景 ctx.setFillStyle('#fff') ctx.fillRect(0, 0, 300, 380) ctx.draw() // 下载底部背景图 wx.getImageInfo({ src: that.data.sharebg, success: (res1) = { ctx.drawImage(res1.path, 0, 250, 300, 130) // 下载视频封面图 wx.getImageInfo({ src: that.data.shareCoverImg, success: (res2) = { ctx.drawImage(res2.path, 0, 0, 300, 168) // 分享标题 // ctx.setTextAlign('center') // 文字居中 ctx.setFillStyle('#000') // 文字颜色:黑色 ctx.setFontSize(20) // 文字字号:20px if (that.data.shareTitle.length = 14) { // 不用换行 ctx.fillText(that.data.shareTitle, 10, 200, 280) } else if (that.data.shareTitle.length = 28) { // 两行 let firstLine = that.data.shareTitle.substring(0, 14); let secondLine = that.data.shareTitle.substring(14, 27); ctx.fillText(firstLine, 10, 200, 280) ctx.fillText(secondLine, 10, 224, 280) } else { // 超过两行 let firstLine = that.data.shareTitle.substring(0, 14); let secondLine = that.data.shareTitle.substring(14, 27) + '...'; ctx.fillText(firstLine, 10, 200, 280) ctx.fillText(secondLine, 10, 224, 280) } // 下载二维码 wx.getImageInfo({ src: that.data.shareQrImg, success: (res3) = { let qrImgSize = 70 ctx.drawImage(res3.path, 212, 256, qrImgSize, qrImgSize) ctx.stroke() ctx.draw(true) // 用户昵称 ctx.setFillStyle('#000') // 文字颜色:黑色 ctx.setFontSize(14) // 文字字号:16px ctx.fillText(that.data.userInfo.nickName, 38, 284) // 观看日期 ctx.setFillStyle('#999') // 文字颜色:黑色 ctx.setFontSize(10) // 文字字号:16px ctx.fillText('在' + that.data.seeDate + '观看这个视频', 38, 298) // 下载用户头像 wx.getImageInfo({ src: that.data.userInfo.headImg, success: (res4) = { // 先画圆形,制作圆形头像(圆心x,圆心y,半径r) ctx.arc(22, 284, 12, 0, Math.PI * 2, false) ctx.clip() // 绘制头像图片 let headImgSize = 24 ctx.drawImage(res4.path, 10, 272, headImgSize, headImgSize) // ctx.stroke() // 圆形边框 ctx.draw(true) // 保存到相册 wx.canvasToTempFilePath({ canvasId: 'shareCanvas', success: function (res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function (res) { wx.showToast({ title: '分享图片已保存到相册' }) } }) } }, this) } }) } }) } }) } }) }})4、生成canvas的图片资源需要缓存到本地,所以需要在微信公众平台,将需要用到的分享图片,包括二维码的图片域名添加到微信安全域名范围内,否则会报下载图片失败的错误。刚开始也可以将微信开发者工具的校验安全域名关掉,进行测试。开发者工具对canvas图片的生成可能会有问题,请尽量使用真机测试。
5、通过api获取的小程序二维码是二进制格式,后台返回的图片应该是base64形式的图片,前端需要把二维码base64格式转换成本地图片,方法见我的另一篇博客 https://blog.csdn.net/bocongbo/article/details/84954567













