微信小程序在基础库2.11.3之前没有分享到朋友圈的功能,分享的思路是用 canvas画布生成一张分享图片,保存到相册,用户将带有分享二维码的图片发到朋友圈,其他人可以识别图中二维码的方式进入小程序的指定分享页面。可参考智行火车票的助力抢票功能。
1、wxml文件
<view class='share'>
<canvas canvas-id="shareCanvas" style="width:300px;height:380px"></canvas>
</view>
<view class='btn-box'>
<button bindtap='downloadImg'>分享到朋友圈</button>
</view>
2、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格式转换成本地图片
基础库2.11.3版本以后,小程序支持安卓手机分享到朋友圈。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html