微信小程序前端自定義分享

微信小程序前端自定義分享？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

背景

目前手上有一個(gè)小程序的項(xiàng)目，希望轉(zhuǎn)發(fā)時(shí)分享消息的界面能夠自定義,然而微信小程序只提供設(shè)置圖片的url和title。

 /**
  * 用戶點(diǎn)擊右上角分享
  */
 onShareAppMessage: function() {
  return {
   imageUrl:'',
   title:''
  };
 }

實(shí)現(xiàn)

我們要轉(zhuǎn)發(fā)的顯示內(nèi)容多了一點(diǎn)東西:頭像，用戶名和點(diǎn)贊數(shù)。好在這個(gè)排版不是很復(fù)雜，所以我們思考了一下通過(guò)canvas去生成一張圖片再return canvas所生成的圖片url。

代碼如下（其實(shí)還要作出一些顯示上的優(yōu)化，具體你們自己去調(diào)試）：

先在頁(yè)面里新建一個(gè)canvas 標(biāo)簽

<canvas canvas-id="canvasid"  wx:if="{{canvasShow}}"></canvas>

   let context = wx.createCanvasContext('canvasid')
   context.drawImage(back.path, 0, 60, backWidth, backHeight) //繪制下方背景圖
   //繪制圓形頭像，參考教程：https://www.jianshu.com/p/9a6ee2648d6f 第二種方法

   context.save();
   var d = 2 * 25;
   var cx = 0 + 25;
   var cy = 0 + 25;
   context.arc(cx, cy,25, 0, 2 * Math.PI);
   context.clip();
   context.drawImage(avatar.path, 0,0, d, d);
   context.restore();
   //繪制名字和點(diǎn)贊數(shù)
   context.setFontSize(14)
   context.fillText('userName', 70, 32)
   let zanLength = ('100' + '次贊').length
   context.fillText('100'+ '次贊', 375 - 14 * zanLength, 32)
   //執(zhí)行draw進(jìn)行渲染 并返回圖片url
   context.draw(true, () => {
    //此方法應(yīng)執(zhí)行在draw的回調(diào)中
    wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: 375,
     height: 400,
     destWidth: 375,
     destHeight: 400,
     canvasId: 'canvasid',
     success(res) {
    //設(shè)置onShareAppMessage所返回的數(shù)據(jù)格式
      let shareInfo = {
       title: 'customTitle',
       imageUrl
      }
      //隱藏畫(huà)布
      that.setData({
       canvasShow: false
      })
     }
    })
   });

然而！

在canvas中繪制的圖片要在真機(jī)上顯示出來(lái)是有問(wèn)題的（畫(huà)布污染），非同源的圖片在canvas不會(huì)顯示出來(lái)的。后來(lái)我們使用 wx.getImageInfo去獲取圖片信息，通過(guò)里面的地址去顯示圖片(相當(dāng)于是把圖片轉(zhuǎn)了一道)。

 wx.getImageInfo({
        src: imgUrl,
        success: function(res) {
           /**拿到返回值res[0].path,再把該值作為canvas繪制圖片的路徑 
            context.drawImage(res[0].path,x,x,x)**/
          let drawImgUrl = res[0].path
        }
      });

關(guān)于微信小程序前端自定義分享問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。