微信小程序前端自定義分享的實現(xiàn)方法

更新時間：2019年06月13日 10:03:27 作者：沒人懂還可以問神

這篇文章主要給大家介紹了關于微信小程序前端自定義分享的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

背景

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

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

實現(xiàn)

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

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

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

<canvas canvas-id="canvasid" style="width: 375px; height: 500px;" 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();
   //繪制名字和點贊數(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, () => {
    //此方法應執(zhí)行在draw的回調(diào)中
    wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: 375,
     height: 400,
     destWidth: 375,
     destHeight: 400,
     canvasId: 'canvasid',
     success(res) {
    //設置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
        }
      });

emmmm....文章很短暫，這里只是提供一下解決的思路，希望能幫助到大家~

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: