E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

说明首先说明一点,小程序内是不能直接分享到朋友圈的。所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持分享的应用,基本都是这种实现方式。1. 准备阶段。通过服务器获取小程序码这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码。然后调用wx.getImageInfo将后台生成的小程序码保存起来。  注意一定要仔细看下微信的文档,如果生成小程序码的路径在线上的小程序中不存在,将会生成失败。这点也很蛋疼,很不方便调试。wx.getImageInfo({                           src:’https://xxx.jpg’,//服务器返回的带参数的小程序码地址    success: function (res) {        //res.path是网络图片的本地地址        qrCodePath = res.path;    },    fail: function (res) {        //失败回调    }});2. 通过canvas绘制所需信息准备好所有的图片之后就可以通过canvas绘制了,然后再将canvas导出为图片。关于绘制这块,可以参考微信的canvas api,下面的基本都是查着api的方法走的。其中需要注意的有几点。是不知道绘出来的文字长度,所以不知道文字到底什么时候该换行,所以针对商品标题,可能多行的数据固定了一行18个字符。是关于绘制图片的导出,按照官方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,            y: 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);},最后看下绘制出来的效果图。 生成图片之后就可以提示用户去保存分享了。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序通过保存图片分享到朋友圈
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏