本文實(shí)例講述了微信小程序?qū)崿F(xiàn)分享朋友圈的圖片功能。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn)，為客戶提供超值的營銷型網(wǎng)站建設(shè)服務(wù)，我們始終認(rèn)為：好的營銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶提供了成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù)，以良好的商業(yè)信譽(yù)，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

由于微信小程序只支持分享給朋友或者群，不支持分享到朋友圈，又有分享到朋友圈這個(gè)需求，那就要想辦法實(shí)現(xiàn)這個(gè)需求。查閱各種資料，發(fā)現(xiàn)基本思路有兩種，一種是后端實(shí)現(xiàn)，另一種是前端實(shí)現(xiàn)，后端實(shí)現(xiàn)的方式這里就不討論了，因?yàn)槲沂遣欢蠖说?，只?huì)前端的東西，所以這里就記錄一下前端的實(shí)現(xiàn)方法。

前端要實(shí)現(xiàn)分享到朋友群，都是通過canvas做一張圖片，然后用戶手動(dòng)分享朋友圈。前端具體要做的就是把要分享的頁面用canvas重做一遍，生成一個(gè)圖片，保存這個(gè)圖片到用戶本地相冊(cè)。

要想用canvas，需要在頁面上使用canvas標(biāo)簽，把它定位到頁面之外，以免影響頁面，在繪制圖片時(shí)，圖片的地址必須是通過微信下載圖片后返回的虛擬地址，要不canvas無法繪制出來，接下來最主要的就是canvas的使用了，小程序的canvas和h6的canvas一樣，并沒有多大的區(qū)別。

下面是一個(gè)例子：

首先是在頁面上創(chuàng)建canvas

index.wxml

<view class="canvas-box">
    <canvas canvas-id="myCanvas" ></canvas>
</view>
<button bindtap='startDraw'>分享朋友圈</button>

寫一個(gè)樣式把canvas定位到頁面之外，以免影響頁面的效果

.canvas-box{
  width: 100%;
  position: fixed;
  left: 0;
  top: 999999rpx;
}

接下來就是繪圖了，具體可以參考繪圖文檔

startDraw:function(){
 const ctx = wx.createCanvasContext('myCanvas');
  let windowWidth = wx.getSystemInfoSync().windowWidth;
  let windowHeight = wx.getSystemInfoSync().windowHeight;
  let _this=this;
  this.setData({
   scale: 1.6
  });
  ctx.setFillStyle('#333');
  ctx.fillRect(0, 0, windowWidth, 100);
  ctx.setFontSize(20);
  ctx.setFillStyle('#fff');
  ctx.fillText('開始繪制圖片', 30, 50);
  ctx.setFillStyle('#FFF');
  ctx.fillRect(0, 70, windowWidth, 600);
  ctx.setFillStyle('#666');
  ctx.setFontSize(19);
  ctx.fillText('我是標(biāo)題',100, 140);
  ctx.setFontSize(20);
  ctx.fillText('微信小程序文本部分',20 , 170);
  ctx.draw()
}

到這為止，canvas繪圖是做完了，現(xiàn)在要把canvas繪制的圖形轉(zhuǎn)化為圖片，調(diào)用微信小程序已有的接口，接上面方法內(nèi)：

wx.canvasToTempFilePath({
   x: 0,
   y: 0,
   width: windowWidth,
   height: windowHeight,
   destWidth: windowWidth,
   destHeight: windowHeight,
   canvasId: 'myCanvas',
   success: function (res1) {
    console.log('朋友圈分享圖生成成功:' + res1.tempFilePath);
   }
});

這樣就完成了分享圖片的制作。

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

本文標(biāo)題：微信小程序?qū)崿F(xiàn)分享朋友圈的圖片功能示例
網(wǎng)址分享：http://aaarwkj.com/article22/ipdhjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、企業(yè)網(wǎng)站制作、做網(wǎng)站、標(biāo)簽優(yōu)化、、面包屑導(dǎo)航

廣告

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