As of November 18, 2017, wechat applet officials have not yet opened the ability to share directly with friends, but the wisdom of working people is great

Now the common practice is to generate a picture with a small program code, save it to the user's album, and the user will publish the picture to the circle of friends by himself

My routine:

1. Request the back-end API to generate the applet code (access token is required to generate the applet code, so it is convenient to generate the back-end code)
2. Canvas draws text and pictures to the canvas
3. When the user clicks share to the circle of friends, the canvas will be displayed to the user, the canvas will be converted into pictures, and the pictures will be saved to the album

onShow: function () {
      var that = this;
      //1. Request backend API to generate applet code
      that.getQr();

      //2. canvas draws text and pictures
      const ctx = wx.createCanvasContext('myCanvas');
      var imgPath = '../../../image/intro.png'
      var bgImgPath = '../../../image/bgImgPath.png';
      ctx.drawImage(imgPath, 0, 0, 600, 520);

      ctx.setFillStyle('white')
      ctx.fillRect(0, 520, 600, 280);

      ctx.drawImage(imgPath,    30, 550, 60, 60);
      ctx.drawImage(bgImgPath,  30, 550, 60, 60);
      ctx.drawImage(imgPath,    410, 610, 160, 160);

      ctx.setFontSize(28)
      ctx.setFillStyle('#6F6F6F')
      ctx.fillText('Demon spirit', 110, 590)

      ctx.setFontSize(30)
      ctx.setFillStyle('#111111')
      ctx.fillText('Dear friends, come and watch the lovely photos', 30, 660)
      ctx.fillText('I'm in mengclaw kindergarten', 30, 700)

      ctx.setFontSize(24)
      ctx.fillText('Long press scan code to view details', 30, 770)
      ctx.draw()
  },
  // 3. canvas to image
      wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 600,
          height: 800,
          destWidth: 600,
          destHeight:800,
          canvasId: 'myCanvas',
          success: function(res) {
              console.log(res.tempFilePath);
              that.setData({
                  shareImgSrc : res.tempFilePath
              })

          },
          fail:function (res) {
              console.log(res)
          }
      })
      //4. When the user clicks share to friends circle, save the picture to album
        wx.saveImageToPhotosAlbum({
            filePath:that.data.shareImgSrc,
            success(res) {
                wx.showModal({
                    title: 'Stored successfully',
                    content: 'The picture has been saved to the album successfully. Go to the hair circle~',
                    showCancel:false,
                    confirmText:'Good da',
                    confirmColor:'#72B9C3',
                    success: function(res) {
                        if (res.confirm) {
                            console.log('User click OK');
                        }
                        that.hideShareImg()
                    }
                })
            }
        })

Canvas is drawn in PX. For example, the screen is 375 wide. When drawing 375 canvas, the saved image is 375px. If the image pixel is not enough, it will be pasted out. So I improved the following routine:

1. Request the back-end API to generate the applet code (access token is required to generate the applet code, so it is convenient to generate the back-end code)

2. Canvas draws text and pictures to the canvas
   Draw a canvas with twice the screen width. The canvas must be visible before it can be turned into a picture. However, it can't be seen by the user if it's too hot or ugly. Just set a huge number beyond the screen

3. Canvas to picture

4. When the user clicks share to the friends circle, show the picture to the user and save the picture to the album

   

Original address: Wechat app sharing to friends