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

时间 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 });
}
复制代码