微信小程序通过保存图片分享到朋友圈功能

微信小程序通过保存图片分享到朋友圈功能

说明

首先说明一点，小程序内是不能直接分享到朋友圈的。所以只能通过生成图片，携带小程序二维码，保存到手机相册，让用户自Lafhngl己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持分享的应用，基本都是这种实现方式。

准备阶段

1.通过服务器获取小程序码

这里可以参考下微信的官方文档，给后台指定的参数和路径等信息，让后台生成指定的小程序码。然后调用wx.getImageInfo将后台生成的小程序码保存起来。

注意一定要仔细看下微信的文档，如果生成小程序码的路径正式服务器不存在，将会生成失败。这点也很蛋疼，很不方便调试。

wx.getImageInfo({

src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址

success: function (res) {

//res.path是网络图片的本地地址

qrCodePath = res.path;

},

fail: function (res) {

//失败回调

}

});

1.通过canvas绘制所需信息

准备好所有的图片之后就可以通过canvas绘制了，然后再将canvas导出为图片。关于绘制这块，可以参考微信的canvas api，下面的基本都是查着api的方法走的。

其中需要注意的有几点。

1.是不知道绘出来的文字长度，所以不知道文字到底什么时候该换行，所以针对商品标题，可能多行的数据固定了一行18个字符。

2.是关于绘制图片的导出，按照官方api的说法应该在draw()完成的回调中执行，但是通过

canvasCtx.draw(false,function(res){

});

这种方式，一直不回调完成。不知道哪里出问题了。所以最后只好加了一个延时去保存图片。

/**

* 绘制分享的图片

* @param goodsPicPath 商品图片的本地链接

* @param qrCodePath 二维码的本地链接

*/

drawSharePic: function (goodsPicPath, qrCodePath) {

wx.showLoading({

title: '正在生成图片...',

mask: true,

});

//y方向的偏移量，因为是从上往下绘制的，所以y一直向下偏移，不断增大。

let yOffset = 20;

const goodsTitle = this.data.orderDetail.paltProduct.name1;

let goodsTitleArray = [];

//为了防止标题过长，分割字符串,每行18个

for (let i = 0; i < goodsTitle.length / 18; i++) {

if (i > 2) {

break;

}

goodsTitleArray.push(goodsTitle.substr(i * 18, 18));

}

const price = this.data.orderDetail.price;

const marketPrice = this.data.orderDetail.marketPrice;

const title1 = '您的好友邀请您一起分享精品好货';

const title2 = '立即打开看看吧';

const codeText = '长按识别小程序码查看详情';

const imgWidth = 780;

const imgHeight = 1600;

const canvasCtx = wx.createCanvasContext('shareCanvas');

//绘制背景

canvasCtx.setFillStyle('white');

canvasCtx.fillRect(0, 0, 390, 800);

//绘制分享的标题文字

canvasCtx.setFontSize(24);

canvasCtx.setFillStyle('#333333');

canvasCtx.setTextAlign('center');

canvasCtx.fillText(title1, 195, 40);

//绘制分享的第二行标题文字

canvasCtx.fillText(title2, 195, 70);

//绘制商品图片

canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);

//绘制商品标题

yOffset = 490;

goodsTitleArray.forEach(function (value) {

canvasCtx.setFontSize(20);

canvasCtx.setFillStyle('#333333');

canvasCtx.setTextAlign('left');

canvasCtx.fillText(value, 20, yOffset);

yOffset += 25;

});

//绘制价格

yOffset += 8;

canvasCtx.setFontSize(20);

canvasCtx.setFillStyle('#f9555c');

canvasCtx.setTextAlign('left');

canvasCtx.fillText('￥', 20, yOffset);

canvasCtx.setFontSize(30);

canvasCtx.setFillStyle('#f9555c');

canvasCtx.setTextAlign('left');

canvasCtx.fillText(price, 40, yOffset);

//绘制原价

const xOffset = (price.length / 2 + 1) * 24 + 50;

canvasCtx.setFontSize(20);

canvasCtx.setFillStyle('#999999');

canvasCtx.setTextAlign('left');

canvasCtx.fillText('原价:¥' + marketPrice, xOffset, yOffset);

//绘制原价的删除线

canvasCtx.setLineWidth(1);

canvasCtx.moveTo(xOffset, yOffset - 6);

canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);

canvasCtx.setStrokeStyle('#999999');

canvasCtx.stroke();

//绘制最底部文字

canvasCtx.setFontSize(18);

canvasCtx.setFillStyle('#333333');

canvasCtx.setTextAlign('center');

canvasCtx.fillText(codeText, 195, 780);

//绘制二维码

canvasCtx.drawImage(qrCodePath, 95, 550, 200, 200);

canvasCtx.draw();

//绘制之后加一个延时去生成图片，如果直接生成可能没有绘制完成，导出图片会有问题。

setTimeout(function () {

wx.canvasToTempFilePath({

x: 0,

yLafhngl: 0,

width: 390,

height: 800,

destWidth: 390,

destHeight: 800,

canvasId: 'shareCanvas',

success: function (res) {

that.setData({

shareImage: res.tempFilePath,

showSharePic: true

})

wx.hideLoading();

},

fail: function (res) {

console.log(res)

wx.hideLoading();

}

})

}, 2000);

},

最后看下绘制出来的效果图。

生成图片之后就可以提示用户去保存分享了。

总结

以上所述是给大家介绍的微信小程序通过保存图片分享到朋友圈，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。