小編給大家分享一下微信小程序如何通過保存圖片分享到朋友圈的功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：自適應(yīng)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗，以及在手機等移動端的優(yōu)質(zhì)呈現(xiàn)。網(wǎng)站設(shè)計、做網(wǎng)站、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運營、VI設(shè)計、云產(chǎn)品.運維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務(wù)。

小程序內(nèi)是不能直接分享到朋友圈的。所以只能通過生成圖片，攜帶小程序二維碼，保存到手機相冊，讓用戶自己選擇發(fā)到朋友圈。然后可以通過在小程序中識別二維碼來進(jìn)入小程序的指定頁面。下面小編給大家分享實現(xiàn)代碼，需要的朋友參考下吧

說明

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

準(zhǔn)備階段

1.通過服務(wù)器獲取小程序碼

這里可以參考下微信的官方文檔，給后臺指定的參數(shù)和路徑等信息，讓后臺生成指定的小程序碼。然后調(diào)用wx.getImageInfo將后臺生成的小程序碼保存起來。

注意一定要仔細(xì)看下微信的文檔，如果生成小程序碼的路徑正式服務(wù)器不存在，將會生成失敗。這點也很蛋疼，很不方便調(diào)試。

wx.getImageInfo({            
  src:'https://xxx.jpg',//服務(wù)器返回的帶參數(shù)的小程序碼地址
  success: function (res) {
    //res.path是網(wǎng)絡(luò)圖片的本地地址
    qrCodePath = res.path;
  },
  fail: function (res) {
    //失敗回調(diào)
  }
});

1.通過canvas繪制所需信息

準(zhǔn)備好所有的圖片之后就可以通過canvas繪制了，然后再將canvas導(dǎo)出為圖片。關(guān)于繪制這塊，可以參考微信的canvas api，下面的基本都是查著api的方法走的。

其中需要注意的有幾點。

1.是不知道繪出來的文字長度，所以不知道文字到底什么時候該換行，所以針對商品標(biāo)題，可能多行的數(shù)據(jù)固定了一行18個字符。

2.是關(guān)于繪制圖片的導(dǎo)出，按照官方api的說法應(yīng)該在draw()完成的回調(diào)中執(zhí)行，但是通過

canvasCtx.draw(false,function(res){
});

這種方式，一直不回調(diào)完成。不知道哪里出問題了。所以最后只好加了一個延時去保存圖片。

/**
 * 繪制分享的圖片
 * @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 = [];
  //為了防止標(biāo)題過長，分割字符串,每行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);
  //繪制分享的標(biāo)題文字
  canvasCtx.setFontSize(24);
  canvasCtx.setFillStyle('#333333');
  canvasCtx.setTextAlign('center');
  canvasCtx.fillText(title1, 195, 40);
  //繪制分享的第二行標(biāo)題文字
  canvasCtx.fillText(title2, 195, 70);
  //繪制商品圖片
  canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);
  //繪制商品標(biāo)題
  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();
  //繪制之后加一個延時去生成圖片，如果直接生成可能沒有繪制完成，導(dǎo)出圖片會有問題。
  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);
},

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

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

以上是“微信小程序如何通過保存圖片分享到朋友圈的功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：微信小程序如何通過保存圖片分享到朋友圈的功能
鏈接地址：http://chinadenli.net/article14/ppgoge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、云服務(wù)器、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航、App開發(fā)、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)