微信小程序分享朋友圈功能

微信小程序没有提供分享到朋友圈的功能，所以我就是用普遍的做法，先看简单的效果图

下面是代码： wxml:

<canvas canvas-id="canvas" style="width: 375px; height: 600px;"></canvas>

js:

onLoad: function (options) {
    let ctx = wx.createCanvasContext('canvas');
    wx.getImageInfo({
      src: 'http://imgservice1.suning.cn/uimg1/b2c/image/3Ddq78GF55iX3LoXMR3tCQ.jpg_800w_800h_4e',
      success: (res) => {
        ctx.setFillStyle('#ffffff');
        ctx.fillRect(0, 0, 375, 600);
        ctx.drawImage(res.path, 0, 0, res.width, res.width, 0, 0, 375, 300);
        ctx.setFillStyle('#C8001E');
        ctx.fillRect(0, 300, 375, 80);
        ctx.setFontSize(20);
        ctx.setFillStyle('#ffffff');
        ctx.setTextAlign('left');
        ctx.fillText('￥2399', 10, 330);
        ctx.setFontSize(14);
        ctx.setFillStyle('#ffffff');
        ctx.setTextAlign('left');
        ctx.fillText('商品名称商品名称商品名称商品名称商品名称', 12, 355);
        wx.getImageInfo({
          src: 'https://www.nainaiwang.com/_nuxt/img/c18ab74.png',
          success: (res1) => {
            ctx.drawImage(res1.path, 0, 0, res1.width, res1.width, 140, 400, 100, 100);
            ctx.setFontSize(20);
            ctx.setFillStyle('#000');
            ctx.setTextAlign('left');
            ctx.fillText('识别二维码参与拼团', 100, 530);
            ctx.draw(false, function(){
              wx.showModal({
                title: '是否保存图片到相册？',
                success: res => {
                  if (res.confirm) {
                    wx.canvasToTempFilePath({
                      canvasId: 'canvas',
                      success: res2 => {
                        wx.saveImageToPhotosAlbum({
                          filePath: res2.tempFilePath,
                          success: res => {
                            wx.showModal({
                              showCancel: false,
                              title: '保存成功，去发朋友圈吧'
                            })
                          }
                        })
                      }
                    })
                  }
                }
              })
            });
          }
        })
      }
    })
  }

我只是实现了一个demo，没有考虑太多，工作中样式肯定是更美观的，js里面的代码也是要优化的。

• demo里用的图片都是网络图片，使用wx.getImageInfo就行了，但是实际工作中并不会这么简单，就拿二维码图片来说，肯定是需要后端配合来生成的。可参考微信文档 获取小程序码 | 微信开放文档