WeChat applet implementation sharing to a circle function

As of November 2017 No. 18, small micro-channel program has not yet officially open up and share the ability to directly circle of friends, but the wisdom of working people is great, now common practice, with a small program to generate a code the pictures saved to the user photo album, users post their own pictures to the circle of friends

my routine:

  1. backend API request is generated applet code (generated applet code needs access token backend generates more convenient)
  2. canvas to draw text and pictures to canvas
  3. when the user clicks the circle of friends to share, to show users the canvas, canvas turn into a picture, save the picture to album
  onShow: function () {var that = this; // 1 backend API request generated applet code that.getQr (); //. 2. canvas drawing text and images 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 Lingling', 110, 590) CTX.SetFontsize (30) CTX.SetfillStyle ('# 111111') ctx.filltext ('pet friends come onlookers Photo ', 30, 660) CTX.FillText (' I am in the cute claw kinder ", 30, 700) ctx.setfontsize (24) ctx.filltext ('long press scan code details', 30, 770) CTX.DRAW )}, // 3. Canvas Canvas WX.canVastTEMPFILEPATH ({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 When sharing a circle of friends, save the picture to the photo album wx.saveimagetophotosalbum ({filepath: That.data.Shareimgsrc, Success (res) {wx.showmodal ({Title: 'Sitting Success', Content:' Success Successfully saved to photo album , Go to the hair ring ~ ', showcancel: false, confirmtext:' 好 哒 ', confirmcolor:' # 72b9c3 ', Success: fuNCTION (RES) {if (res.confirm) {console.log ('user clicks OK');} That.hideshareImg ()}}}}})  

Canvas Drawing units for PX, take an example, screen width 375, draw 375 canvas, saved picture is 375px, the image is not enough, so I improve the routine:

1. Request End API generates a small program code (generating small program code requires Access token, the backend is relatively convenient)

2. CANVAS Drawing text and pictures to canvas
Draw 2 times screen width Canvas canvas, Canvas Canvas It must be visible to be converted to a picture, but he can’t see the user, it will not give it to the user, then it will be a huge number that is better than the screen

3. Canvas into pictures

4. When the user click to share the circle of friends, give the user to the user, save the picture to the album


Now there is a relatively high payment of WeChat applet: “WeChat applet development tutorial” Xiaobian is carefully organized, I hope it is.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment