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

2020-03-21 16:18:58

字體：大中小

來源：轉載

供稿：網友

說明

首先說明一點，小程序內是不能直接分享到朋友圈的。所以只能通過生成圖片，攜帶小程序二維碼，保存到手機相冊，讓用戶自己選擇發到朋友圈。然后可以通過在小程序中識別二維碼來進入小程序的指定頁面。參考市面上支持分享的應用，基本都是這種實現方式。

準備階段

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,      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);},

最后看下繪制出來的效果圖。

小程序開發,朋友圈,微信小程序,保存圖片