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

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

背景

目前手上有一個小程序的項目，希望轉發時分享消息的界面能夠自定義,然而微信小程序只提供設置圖片的url和title。

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

實現

我們要轉發的顯示內容多了一點東西:頭像，用戶名和點贊數。好在這個排版不是很復雜，所以我們思考了一下通過canvas去生成一張圖片再return canvas所生成的圖片url。

代碼如下（其實還要作出一些顯示上的優化，具體你們自己去調試）：

先在頁面里新建一個canvas 標簽

<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();
   //繪制名字和點贊數
   context.setFontSize(14)
   context.fillText('userName', 70, 32)
   let zanLength = ('100' + '次贊').length
   context.fillText('100'+ '次贊', 375 - 14 * zanLength, 32)
   //執行draw進行渲染 并返回圖片url
   context.draw(true, () => {
    //此方法應執行在draw的回調中
    wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: 375,
     height: 400,
     destWidth: 375,
     destHeight: 400,
     canvasId: 'canvasid',
     success(res) {
    //設置onShareAppMessage所返回的數據格式
      let shareInfo = {
       title: 'customTitle',
       imageUrl
      }
      //隱藏畫布
      that.setData({
       canvasShow: false
      })
     }
    })
   });

然而！

在canvas中繪制的圖片要在真機上顯示出來是有問題的（畫布污染），非同源的圖片在canvas不會顯示出來的。后來我們使用 wx.getImageInfo去獲取圖片信息，通過里面的地址去顯示圖片(相當于是把圖片轉了一道)。

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

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