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

在成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營銷成為有效果、有回報的無錫營銷推廣。成都創(chuàng)新互聯(lián)公司專業(yè)成都網(wǎng)站建設(shè)10年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

背景

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

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

實現(xiàn)

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

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

先在頁面里新建一個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();
   //繪制名字和點贊數(shù)
   context.setFontSize(14)
   context.fillText('userName', 70, 32)
   let zanLength = ('100' + '次贊').length
   context.fillText('100'+ '次贊', 375 - 14 * zanLength, 32)
   //執(zhí)行draw進行渲染 并返回圖片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
      }
      //隱藏畫布
      that.setData({
       canvasShow: false
      })
     }
    })
   });

然而！

在canvas中繪制的圖片要在真機上顯示出來是有問題的（畫布污染），非同源的圖片在canvas不會顯示出來的。后來我們使用 wx.getImageInfo去獲取圖片信息，通過里面的地址去顯示圖片(相當于是把圖片轉(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)于微信小程序前端自定義分享問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。