有过小程序基础的同学都应该知道,小程序是不能直接分享到朋友圈,起码是自从我写下这边文章起,小程序还没有提供分享朋友圈的api。
但是公司很多时候都会想要传播自己的小程序,从而获取更多的流量,从而分享朋友圈的功能就诞生了。
老规矩,先说说我的实现思路:
1、通过canvas组件把要分享出去的东西画出来
2、通过saveImageToPhotosAlbum方法把canvas生成的画布转成图片保存到本地
3、通过发朋友圈的方式把之前保存的图片发到朋友圈
实现过程中要注意的点:
1、如果是请求网络图片的话,绘制图片的方法一定要写在请求的回调方法里面。
2、获取相册的授权scope.writePhotosAlbum
3、如果发现绘制出来的图片很模糊,那一定是没有将deswidth和desheight乘2
4、找准每一个元素在画布上的坐标,切记文字的Y轴坐标是文字的最底下
好了,说了这么多,直接上干货。
分享前的图片
分享后的图片
实现代码:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
//获取用户设备信息,屏幕宽度
wx.getSystemInfo({
success: res => {
console.log(res);
that.setData({
screenWidth: res.screenWidth,
screenHeight: res.screenHeight,
});
}
});
var name = decodeURIComponent(options.queryString);
that.setData({
queryString:name
});
//请求后台数据
wx.request({
url: 'https://xxx.do',
data: {
'queryString': name,
},
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' },
success: function (res) {
var list = res.data.data;
if (list != null && list.length>0){
var obj1 = list[0];
var obj2 = list[1];
var obj3 = list[2];
if (obj1 != null) {
that.setData({
guanname: obj1.name,
guancount: obj1.displayPercent,
imgpath: obj1.imgUrl,
desc: obj1.description,
txtone: true
});
}
if (obj2 != null) {
that.setData({
yaname: obj2.name,
yacount: obj2.displayPercent,
txttwo: true
});
}
if (obj3 != null) {
that.setData({
jiname: obj3.name,
jicount: obj3.displayPercent,
txtthree: true
});
}
//制作要分享的图片
const ctx = wx.createCanvasContext('sharecan')
//主要就是计算好各个图文的位置
//绘制红色背景
ctx.setFillStyle('#FF5554')
ctx.fillRect(0, 0, that.data.screenWidth, 528)
//绘制文字
ctx.setFontSize(25)
ctx.setFillStyle("#ffffff")
ctx.fillText("品牌鉴定", 12, 64)
//绘制机器人
ctx.drawImage('/pages/images/jqr.png', 115, 42, 29, 24);
//绘制文字
ctx.setFontSize(14)
ctx.setFillStyle("#ffffff")
var dsj = '经过商标大数据分析,最符合 ' + name + '™ 品牌的商品是';
ctx.fillText(dsj, 12, 89)
ctx.setFillStyle('#ffffff')//设置矩形的背景颜色
ctx.fillRect(12, 96, 351, 244)
//请求的网络图片路径
wx.getImageInfo({
src: that.data.imgpath,
success: function (res) {
//请求成功后将会生成一个本地路径即res.path,
//然后将该路径缓存到storageKeyUrl关键字中
wx.setStorageSync("imgUrl", res.path);
var imgurl = wx.getStorageSync("imgUrl");
ctx.drawImage(imgurl, 12, 96, 351, 173);
ctx.setFillStyle('#E21917')//设置水印
ctx.fillText(name + '™', 293, 145)
var desc = name + '™牌' + that.data.guanname + ',' + that.data.desc;
var descone = "";
var desctwo = "";
if (desc.length > 18) {
descone = desc.substring(0, 18);
desctwo = desc.substring(18, desc.length);
console.log(descone);
console.log(desctwo)
ctx.setFillStyle("#222222")
ctx.setFontSize(18)
ctx.fillText(descone, 24, 302)
ctx.setFillStyle("#222222")
ctx.setFontSize(18)
ctx.fillText(desctwo, 24, 326)
} else {
ctx.setFillStyle("#222222")
ctx.setFontSize(18)
ctx.fillText(desc, 24, 302)
}
ctx.setFontSize(12)
ctx.setFillStyle('#FFAAA9')
ctx.fillText("* 图源网络,非商业用途,如有侵权请联系删除",12,360);
ctx.setFontSize(20)
ctx.setFillStyle('#FFFFFF')
var dds = '大多数注册 ' + name + '™ 相关商标品牌中'
ctx.fillText(dds, 12, 390)
if (that.data.txtone) {
ctx.drawImage('/pages/images/guanjun.png', 12, 404.5, 9.5, 15);
ctx.setFontSize(14)
ctx.setFillStyle('#FFBFBF')
var gn = that.data.guancount + ' 的人用做';
ctx.fillText(gn, 27.5, 419.5)
ctx.setFontSize(14)
ctx.setFillStyle('#ffffff')
ctx.fillText(that.data.guanname + ';', 120, 419.5);
}
if (that.data.txttwo) {
ctx.drawImage('/pages/images/yajun.png', 12, 430.5, 9.5, 15);
ctx.setFontSize(14)
ctx.setFillStyle('#FFBFBF')
var ya = that.data.yacount + ' 的人使用';
ctx.fillText(ya, 27.5, 444)
ctx.setFontSize(14)
ctx.setFillStyle('#ffffff')
ctx.fillText(that.data.yaname + ';', 120, 444);
}
if (that.data.txtthree) {
ctx.drawImage('/pages/images/jijun.png', 12, 456.5, 9.5, 15);
ctx.setFontSize(14)
ctx.setFillStyle('#FFBFBF')
var jn = that.data.jicount + ' 的人用来';
ctx.fillText(jn, 27.5, 471)
ctx.setFontSize(14)
ctx.setFillStyle('#ffffff')
ctx.fillText(that.data.jiname + ';', 120, 471);
}
//绘制底部的分享图片
ctx.drawImage('/pages/images/botshare.png', 0, 528, that.data.screenWidth, 139);
//绘制完成之后的回调方法
ctx.draw(false, function (e) {
that.data.isCompletedDraw = true
});
}
});
}else{
wx.navigateTo({
url: '/pages/ppblank/ppblank?name='+encodeURIComponent(that.data.queryString),
})
}
}
});
}
sharepyq:function(e){//点击分享朋友圈
var that=this;
if (!that.data.isCompletedDraw){
wx.showToast({
image: '/pages/images/tishi.png',
title: '图片正在生成中',
icon: 'none',
});
return ;
}
console.log("是否拒绝过授权:"+that.data.auth)
if(that.data.auth==false){
wx.showModal({
content: 'T _ T 请打开保存相册的权限',
showCancel: false,
confirmText: '去打开',
confirmColor: '#72B9C3',
success: function (res) {
//进入授权页面
wx.openSetting({
success: (res) => {
res.authSetting = {
"scope.writePhotosAlbum": true
}
that.setData({
modaltwo: false,
auth:true
});
}
});
}
});
return false;
}
var finwid = that.data.screenWidth*2;
var finhei = that.data.screenHeight*2;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.screenWidth,
height: that.data.screenHeight,
destWidth: finwid,
destHeight: finhei,
canvasId: 'sharecan',
success: function (res) {
that.setData({
preurl: res.tempFilePath,
canvasHidden: false
});
//生产环境时 记得这里要加入获取相册授权的代码
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {//未授权,则重新授权
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
// 用户已经同意小程序使用保存相册功能,
//后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问
wx.saveImageToPhotosAlbum({
filePath: that.data.preurl,
success(res) {
wx.showModal({
content: '图片已保存到相册,赶紧晒一下吧~',
showCancel: false,
confirmText: '好哒',
confirmColor: '#72B9C3',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
that.setData({
canvasHidden: true
});
}
that.setData({
modaltwo: false,
});
}
})
}
});
}, fail: function (res) {
console.log("拒绝授权");
console.log(res);
that.setData({
canvasHidden: true,
modaltwo: false,
auth: false
});
}
})
} else {//已经授权,则保存图片
wx.saveImageToPhotosAlbum({
filePath: that.data.preurl,
success(res) {
wx.showModal({
content: '图片已保存到相册,赶紧晒一下吧~',
showCancel: false,
confirmText: '好哒',
confirmColor: '#72B9C3',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
that.setData({
canvasHidden: true
});
}
that.setData({
modaltwo: false
});
}
})
}
});
}
}
});
},
fail: function (res) {
console.log("保存失败")
}
})
}
如果我的文章帮助到了大家,减少大家的弯路,愿意打赏的请扫下面的二维码,也可留言。