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

更新時(shí)間：2019年06月13日 10:03:27 作者：沒(méi)人懂還可以問(wèn)神

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

背景

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

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

實(shí)現(xiàn)

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

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

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

<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();
   //繪制名字和點(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
        }
      });

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

總結(jié)

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

您可能感興趣的文章: