歡迎您訪問南京安優網絡官方網站,本公司專注于:網站制作、小程序開發、網站推廣。 24小時服務熱線:400-8793-956
當前位置:南京網站制作公司 > 資訊中心 > 網站知識
小程序前端自定義共享的實現
來源:南京網站制作 時間:2019-12-09 09:10:28

當前,有一個小程序項目在手。希望轉發時可以自定義消息共享界面。但是,微信小程序只提供URL和標題來設置圖片。

 
/**
  *Users click the upper right corner to share
  */
 onShareAppMessage: function() {
  return {
   imageUrl:'',
   title:''
  };
 }
實現
 
我們需要轉發更多顯示內容:頭像,用戶名和喜歡。幸運的是,這種布局不是很復雜,因此我們考慮通過畫布生成圖像并返回畫布而生成的圖像URL。
 
代碼如下(實際上,您需要進行一些顯示優化,并且需要自己調試):
 
首先,在頁面中創建一個新的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) // draw the background below
   //Draw a circular head, refer to the tutorial: https://www.jianshu.com/p/9a6ee2648d6f the second method
 
   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();
   //Draw name and likes
   context.setFontSize(14)
   context.fillText('userName', 70, 32)
   Let zanlength = ('100 '+' second likes'). Length
   Context. Filltext ('100 '+' times like ', 375 - 14 * zanlength, 32)
   //Execute draw to render and return the image URL
   context.draw(true, () => {
    //This method should be executed in the callback of draw
    wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: 375,
     height: 400,
     destWidth: 375,
     destHeight: 400,
     canvasId: 'canvasid',
     success(res) {
    //Set the data format returned by onshare appmessage
      let shareInfo = {
       title: 'customTitle',
       imageUrl
      }
      //Hide canvas
      that.setData({
       canvasShow: false
      })
     }
    })
   });
然而!
 
在畫布上繪制的圖片要顯示在真實機器上存在問題(畫布污染)。非同源圖片將不會顯示在畫布中。以后,我們使用wx.getimageinfo獲取圖像信息,并通過其中的地址顯示圖像(相當于翻轉圖像)。
 
wx.getImageInfo({
        src: imgUrl,
        success: function(res) {
           /**Get the return value res [0]. Path, and then use the value as the path for canvas to draw pictures 
            context.drawImage(res[0].path,x,x,x)**/
          let drawImgUrl = res[0].path
        }
      });
嗯?
 
摘要
 
以上是本文的全部內容。南京小程序開發希望本文的內容對您的學習或工作具有一定的參考學習價值。感謝您對我們的支持。

本文地址:http://www.fsfkjb.live/web/2867.html
Tag:
專業服務:南京網站制作,南京網站制作公司,南京網站建設公司
聯系電話:025-65016872
上一篇: 5G對網站建設和開發的影響
下一篇: 返回列表
最新案例
邁特菲
邁特菲
開為科技
開為科技
南京清真桃源村食品廠有限公司
南京清真桃源村食品廠有限公司
泰杰賽
泰杰賽
蘇派教育
蘇派教育
你可能感興趣
網站制作的動畫–激發網站生命的6種有效方法
為什么南京網站建設我們使用WordPress
如何創建成功的以收益為導向的電子商務網站
5G對網站設計和開發的影響
2020年南京網站建設建議企業的網站的5個新決議
網站制作是如何影響您的SEO
網站技巧南京網站建設是如何做的
網站首頁南京網站制作認為必須有的幾個服務
最后更新
小程序前端自定義共享的實現 5G對網站建設和開發的影響 響應式網頁設計,這是答案嗎?或只是響應? 商業網站南京網站制作認為最常見的7個問題 南京網站建設是如何優化網站速度而提高網站性能 微信小程序的快速發展:從帳戶注冊到現成的小程序 對于WEB標準,南京網站制作我們做得足夠嗎? 在南京網站建設的認為中什么是響應式網頁設計?
服務項目
南京網站制作 營銷型網站 微信營銷 IDC網站 精品案例
黑龙江十一选五下载