微信小程序分享到朋友圈方法與技巧

小程序提供onShareAppMessage 函數，此函數只支持分享給我微信朋友。小程序如何分享到朋友圈呢？

我提供的方法是，使用canvas繪制一張圖片，並用wx.previewImage預覽圖片，然后長按圖片保存圖片到手機。再通過發朋友圈的方式，選擇保存的圖片，當用戶瀏覽朋友圈時，可以長按圖片、識別圖中二維碼進入小程序。

效果展示

           

 

准備工作和小程序配置（步驟一和步驟二）

配置小程序下載域名(不效驗合法域名，可忽略此選項)

准備一張帶有小程序二維碼的圖片、一張背景圖、內容縮略圖

Page({
  data: {
    bgImg: "http://image.lqmohun.com/canvasbg.jpg",  //背景圖
    dataImg: "http://image.lqmohun.com/ceshi.jpg",   //內容縮略圖
    ewrImg: "http://image.lqmohun.com/erweima.jpg",  //小程序二維碼圖片
    systemInfo: null,  //系統類型
    canvasWidth:0,   //canvas的寬
    canvasHeight: 0   //canvas的高
  },

 

步驟三：下載需要的圖片資源到本地

  downloadImages: function () {
       
    let that = this;
    wx.downloadFile({  //背景圖
      url: that.data.bgImg,
      success: function (res) {
        wx.downloadFile({  //內容縮略圖
          url: that.data.dataImg,
          success: function (res1) {
            wx.downloadFile({
              url: that.data.ewrImg,
              success: function (res2) {//  小程序二維碼圖
                that.convas(res.tempFilePath, res1.tempFilePath, res2.tempFilePath);
              },
              fail: function () {
              }
            });
          }
        });
      }
    })
  },

 

步驟四：將需要分享的信息繪制成圖片

 convas: function (bgImg, dataImg, ewrImg) {  
    let that = this;
    var ctx = wx.createCanvasContext('myCanvas');
    var scWidth = that.data.systemInfo.windowWidth;
    var scHeight = that.data.systemInfo.screenHeight;
    var defaultHeight = 0.020 * that.data.systemInfo.screenHeight;
    //第一步：刻畫背景圖
    ctx.drawImage(bgImg, 0, 0, scWidth, scHeight);
    //第二步：刻畫背景色
    ctx.setFillStyle('white');
    ctx.fillRect(20, 30, scWidth-40, scHeight-60);
    //第三步：刻畫內容縮略圖
    var imgHeight = parseInt(this.imageProportion());
    ctx.drawImage(dataImg, 20, 30, scWidth - 40, imgHeight);
    //第三步：刻畫標題
    ctx.setFontSize(0.056 * scWidth);
    ctx.setFillStyle('#333333');
    ctx.setTextAlign('center');
    ctx.fillText("食物美容，遠離肌膚衰老", (scWidth) / 2, imgHeight + 63 + defaultHeight );
    //第四步：刻畫內容;(備注：canvas好像沒有自動換行，有需要此步驟的同學，可根據canvas寬度，設置文字個數)
    ctx.setFontSize(0.044 * scWidth)
    ctx.setFillStyle('#333333');
    ctx.setTextAlign('left');
    ctx.fillText("簡介：歲月如刀，刀刀催人老，到我們25", 35, imgHeight + 100 + defaultHeight);
    ctx.fillText("歲的時候，皮膚就開始進入衰老期，皺紋", 35, imgHeight + 125 + defaultHeight); 
    ctx.fillText("、色斑。皮膚松弛等現象逐漸出現，這時", 35, imgHeight + 150 + defaultHeight);
    ctx.fillText("，抗衰老工程也正式展開。", 35, imgHeight + 175 + defaultHeight);
  //  第五步：刻畫小程序碼
    ctx.drawImage(ewrImg, 35, imgHeight + 200 + defaultHeight, 120, 120);
    //第六步：提示用戶，長按圖片下載或分享
    ctx.setFontSize(0.050 * scWidth)
    ctx.setFillStyle('#333333')
    ctx.fillText('長按碼查看詳情', 165, imgHeight + 250 + defaultHeight);
    ctx.fillText('小程序名字', 165, imgHeight + 280 + defaultHeight);
    //第七步將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中
   
    ctx.draw(false, function (e) {
      //第八步：生成圖片並預覽
      that.imageGeneratePreview();
    });
  }

小程序canvas做測試時，文字好像不能自動換行。提供一種比較笨的方法，根據屏幕寬度判斷文字個數，循環繪制文字就行了；

this.imageProportion()的方法獲取縮略圖等比例縮小之后的寬高

defaultHeight不同寬高屏幕，繪制內容上下間距優化

 

步驟五：將canvas畫布導出成指定大小圖片、並預覽

imageGeneratePreview: function () {
    let that=this;
    //把當前畫布指定區域的內容導出生成指定大小的圖片，並返回文件路徑
    wx.canvasToTempFilePath({
      width: this.data.systemInfo.windowWidth,
      height: this.data.systemInfo.screenHeight,
      destWidth: this.data.systemInfo.windowWidth * 3,
      destHeight: this.data.systemInfo.screenHeight * 3,
      canvasId: 'myCanvas',
      success: function (res) {
        //預覽圖片
        wx.previewImage({
          urls: res.tempFilePath.split(','),   // 需要預覽的圖片http鏈接列表
          fail: function (res) {
            console.log("預覽圖片失敗" + res)
          }
        })
      },
      fail: function (res) {
        console.log("出錯了:"+JSON.stringify(res));
      },complete:function(){
        wx.hideLoading();
      }
    })
  },

 

備注：

   本文章只提供一種思路，具體排版還請以實際項目為主。

  互相交流學習QQ群：726466109