微信小程序打夯之旅(五)：分享 & 分享到朋友圈

時間 2019-11-08

標籤微信程序打夯之旅分享朋友简体版

原文原文鏈接

頁面基礎分享能力

基本的頁面分享，只須要在頁面中設置 onShareAppMessage 便可，若是分享的內容各個頁面保持一致，建議進行必定的封裝，如封裝到 Page 的能力中。javascript

App({
  // 獲取分享卡片內容
  getShareMessage(path) {
    return {
      title: '分享標題',
      imageUrl: '分享圖片',
      path: path || '分享默認路徑'
    };
  },
  enhancePage() {
    const oPage = Page;
    Page = config => oPage(Object.assign(config, {
      getShareMessage: this.getShareMessage,
    }));
  },
  onLaunch() {
    this.enhancePage();
  },

})
複製代碼

Page({
  onShareAppMessage() {
    return this.getShareMessage(1);
  }
})
複製代碼

用戶點擊按鈕主動觸發分享

只須要設置按鈕的 open-type 爲 share 就能夠自動觸發頁面的 onShareAppMessage 了。html

<button open-type="share">分享按鈕</button>
複製代碼

獲取羣聊中的分享信息

限於隱私保護，我的分享的信息已經再也不能拿到了，可是咱們能夠獲取分享所在羣的信息。java

1.須要在分享頁設置 ticket 信息

onLoad() {
  // 配置分享，用以區分分享到我的仍是羣
  wx.showShareMenu({withShareTicket: true});
}
複製代碼

2.在 onShareAppMessage 裏獲取羣信息

onShareAppMessage() {
  return {
    title: '分享',
    path: '/pages/index',
    success: (res) => {
      const tickets = res.shareTickets;
      if (res.shareTickets) {
        wx.getShareInfo({
          shareTicket: tickets[0],
          success: (data) => {
            console.log('分享到羣: ', data);
          },
        });
      } else {
        console.log('分享到我的');
      }
    },
  };
}
複製代碼

3.在 APP.onLaunch 或者 App.onShow 裏獲取羣信息

App({
  onShow: (options) => {
    wx.getShareInfo({
      shareTicket: options.shareTicket,
      success: (res) => {
        // 請求微信服務器獲取羣信息
      }
    })
  }
})
複製代碼

分享到朋友圈

小程序是不支持直接分享到朋友圈的，只能經過保存圖片並引導用戶主動發送朋友圈。下面的例子是一個分享動態生成的圖片。canvas

第一步：素材預下載，素材不支持遠程URL，須要下載到本地（如小程序二維碼和書封）

// 獲取小程序二維碼
downloadAppCode() {
    return new Promise((resolve, rej) => {
      wx.downloadFile({
        url: '後臺獲取二維碼接口',
        success: (res) => { resolve(res.tempFilePath); },
        fail: (res) => { resolve(''); }
      });
    });
},
// 下載文件
downloadFile(url) {
  return new Promise((resolve, rej) => {
    if (url){
      wx.downloadFile({
        url: url,
        success: (res) => { resolve(res.tempFilePath); },
      });
    } else resolve();
  });
},

// 下載全部書封到本地
downloadCovers(books) {
  const urls = books.map((book) => this.getBookCover(book.bookId));
  Promise.all([
    this.downloadFile(urls[0]),
    this.downloadFile(urls[1]),
    this.downloadFile(urls[2]),
    this.downloadFile(urls[3]),
    this.downloadFile(urls[4]),
    this.downloadAppCode(),
  ]).then((res) => {
    const appCode = res[res.length - 1];  // 獲取小程序二維碼地址
    res = res.splice(0, res.length - 1);  // 全部書封地址
    res = res.filter(item => item);       // 過濾空書封
    this.setData({ localCovers: res, appCode });
    this.drawShareImg();
  });
}
複製代碼

第二步：經過canvas繪製須要被保存分享的圖片

// 繪製分享圖片
drawShareImg() {
    const ctx = wx.createCanvasContext('shareImg');
    const covers = this.data.localCovers;

    // 背景
    ctx.save()
    ctx.setFillStyle('white')
    ctx.fillRect(0, 0, 260, 370);
    ctx.restore()

    // nickname
    ctx.setFillStyle('#111111');
    ctx.setFontSize(14);
    ctx.setTextAlign('center');
    ctx.fillText(this.data.userInfo.nickName, 130, 42, 260);

    // 文案 心願書屋
    // ctx.drawImage('../assets/images/share/share_icon_xysw.svg', 70, 52, 120, 30);
    ctx.setFillStyle('#111111');
    ctx.setTextAlign('center');
    ctx.font = "30px SourceHanSerifCNMedium";
    ctx.fillText('心願書屋', 130, 82, 260);

    // 書封邊框
    ctx.setStrokeStyle('rgba(0,0,0,0.1)');
    if(covers[3]) ctx.strokeRect(21, 150, 42, 56);
    if(covers[4]) ctx.strokeRect(197, 150, 42, 56);
    if(covers[1]) ctx.strokeRect(51, 126, 60, 80);
    if(covers[2]) ctx.strokeRect(149, 126, 60, 80);
    if(covers[0]) ctx.strokeRect(91, 102, 78, 104);

    // 書封
    if(covers[3]) ctx.drawImage(covers[3], 21, 150, 42, 56);
    if(covers[4]) ctx.drawImage(covers[4], 197, 150, 42, 56);
    if(covers[1]) ctx.drawImage(covers[1], 51, 126, 60, 80);
    if(covers[2]) ctx.drawImage(covers[2], 149, 126, 60, 80);
    if(covers[0]) ctx.drawImage(covers[0], 91, 102, 78, 104);

    // 矩形背景
    ctx.rect(0, 226, 260, 66);
    ctx.setFillStyle('#FFDCE7');
    ctx.fill();

    // 引號
    ctx.drawImage('/assets/images/share/share_icon_left.png', 20, 242, 20, 12);
    ctx.drawImage('/assets/images/share/share_icon_right.png', 220, 264, 20, 12);

    // 二維碼
    ctx.drawImage(this.data.appCode, 108, 309, 44, 44);

    // 文案 我已經領了129書幣
    ctx.setFillStyle('#773A4D');
    ctx.font = "14px SourceHanSerifCNMedium";
    ctx.setTextAlign('center');
    ctx.fillText('我已經領了129書幣', 130, 254, 260);

    // 文案 每天領幣，免費看書
    ctx.setFillStyle('#773A4D');
    ctx.font = "14px SourceHanSerifCNMedium";
    ctx.setTextAlign('center');
    ctx.fillText('每天領幣，免費看書', 130, 274, 260);

    // 文案 識別小程序碼
    ctx.setFillStyle('#9B9B9B');
    ctx.setFontSize(12);
    ctx.setTextAlign('left');
    ctx.fillText('識別小程序碼', 30, 337, 260);

    // 文案 進入心願書屋
    ctx.setFillStyle('#9B9B9B');
    ctx.font = "12px SourceHanSerifCNMedium";
    ctx.setTextAlign('left');
    ctx.fillText('進入心願書屋', 158, 337, 260);

    ctx.draw();
},
複製代碼

第三步：經過微信api下載圖片到手機相冊

canvasToFile() {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 260,             // 畫布區域寬度
      height: 370,            // 畫布區域高度
      destWidth: 260 * 4,     // 保存圖片寬度
      destHeight: 370 * 4,    // 保存圖片高度
      canvasId: 'shareImg',
      success: (res) => {
        this.saveImage(res.tempFilePath);
      },
      fail: function (err) {
        console.log('生成圖片失敗');
      },
    });
},
  // 保存圖片
saveImage(filePath) {
    wx.saveImageToPhotosAlbum({
      filePath:filePath,
      success: (res) => {
        this.showSuccess('圖片保存成功');
      },
      fail: () => {
        this.showError('圖片保存到相冊失敗', '圖片沒法保存到相冊，請稍後重試');
      },
    });
},
複製代碼

本地圖片處理注意事項模擬器上都是騙人的

1. 不要使用相對路徑，只能使用絕對路徑
2. 圖片不支持svg不支持svg不支持svg
3. 圖片不支持base64，只支持本地圖片和網絡圖片兩種
* 若是使用了相對路徑、svg、base64，模擬器上運行順暢的毫無破綻，可是在真機上是繪製不出來的！！！
複製代碼

仍是老老實實轉化成網絡圖片再下載吧！！！
相關問題：https://developers.weixin.qq.com/community/develop/doc/00048c046f0028e62247f403651800?highLine=drawimage%2520base64
複製代碼

模擬器坑爹二連

明明在模擬器上特殊字體是有效的，爲何到了真機上就又變成了默認字體了？？？
想要用字體？那就讓設計切個圖片給你吧
複製代碼

分享參數問題：新用戶掃描後處理scene值

生成二維碼時會帶上scene值，當其餘人掃描後能夠從scene值中解析出有用的參數小程序

decodeURLParams(str) {
  const result = {}
  const params = str.split('&');
  for (let param of params) {
    const keyValue = param.split('=');
    result[keyValue[0]] = keyValue[1];
  }
  return result;
},
onLoad() {
  let  bookId = '';
  if (options.bookId) bookId = options.bookId;
  else if (options.scene) bookId = this.decodeURLParams(decodeURIComponent(options.scene)).bookId || '';
  this.setData({ bookId: bookId });
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。