The effect

The above picture is a poster generated by imitating wechat’s personal name card (rough, mainly for quick generation and effect). The poster includes background picture, text, TWO-DIMENSIONAL code and other information. For those interested, go on to 👇

The demo implements the following functions

  • Dynamic TWO-DIMENSIONAL code
  • Dynamically generated posters
  • You can customize forwarding to friends
  • Save the poster to the gallery

Train of thought

specifications

In the project, we are going to develop the function of inviting new users on the existing applet (xiaogao). After the successful invitation, both invitee and invitee can get a discount coupon.

1 create a poster and share it with your friends and moments

2. Forward links to friends and group chats

Spit bad documents and Baidu

Wechat open document introduction is ambiguous, if you have never developed small programs will feel very troublesome, basically need to go to Baidu to see others; The development of small programs also need to continue to debug the inside to provide methods, some write is not right sometimes can not find out.

So, everyone will open Baidu, blog, to search for information; Searched a lot of repeated information, a needle in a haystack to see their own needs.

Can other articles introduce how to generate posters for reference

  • Github.com/Pudon/weapp…

  • Juejin. Cn/post / 691380…

Code implementation

Difficulty 1: How to generate the TWO-DIMENSIONAL code you want? (The TWO-DIMENSIONAL code here, I think it can be scanned to jump to their small program page and carry parameters)

Difficulty 2: How to use canvas to draw the poster you want?

Generate qr code

App.qrcode.js can generate files in two formats, namely base64 QR codes and those stored in temporary wechat photo files on Canvas. Through the comparison of experiments, the second one is more in line with our requirements. I try to put the two generated TWO-DIMENSIONAL codes on a new canvas. The first one will prompt an error.

The principle of two-dimensional code generation plug-in: 1. Define a 2d canvas type=2d 2. Get the canvas canvas element createSelectorQuery 3 canvasToTempFilePathCopy the code

WXML canvas definition: the visual interface is not visible, only the image path is displayed

Code:

  <canvas     
    type="2d"     
    style="width: 75px; height: 75px; position: absolute; left: -200px;"     
    id="myQrcode">  
  </canvas>
Copy the code

Encapsulation into a public TWO-DIMENSIONAL code method:

utils.js

Code:

Const drawQrcode = require(".. /lib/weapp.qrcode.min.js"); Const getQrCodeToCanvas = text => {return new Promise((resolve) => {// Get the canvas dom element const query = wx.createSelectorQuery() query.select('#myQrcode').fields({ node: true, size: }). Exec ((res) => {var canvas = res[0]. Node drawQrcode drawQrcode({canvas: canvas, canvasId: 'myQrcode', width: 75, padding: 10, background: '#ffffff', foreground: '#000000', text: Wx.canvastotempfilepath ({canvasId: 'myQrcode', canvas: canvas, x: 0, y: 0, width: 75, height: 75, destWidth: 150, destHeight: 150, success(res) { resolve(res.tempFilePath) }, }) }) }) }Copy the code

Page call:

Js:

Code:

BindToQrCode () {util.getQrCodeToCanvas(this.data.inputValue).then(url=> {console.log(' picture ', url) this.setData({ qrcodeURL: url }) }) },Copy the code

Ps: If you want to generate a QR code with an image, just add the image attribute to the drawQrcode method

Code:

Const getQrCodeToCanvas = text => {return new Promise((resolve) => {const query = wx.createsElectorQuery ()) query.select('#myQrcode').fields({ node: true, size: True}).exec((res) => {var canvas = res[0]. Img. SRC = "/lib/bg.jpg" img.onload = function () {// drawQrcode drawQrcode({canvas: canvas, canvasId: 'myQrcode', width: 150, padding: 0, marign: 0, background: '#ffffff', foreground: '#000000', text: Image: {imageResource: img, width: 40, imageResource: img, width: 40, // Wx.canvastotempfilepath ({canvasId: 'myQrcode', canvas: canvas, x: 0, y: 0, width: 150, height: 150, destWidth: 300, destHeight: 300, success(res) { resolve(res.tempFilePath) }, }) } }) }) }Copy the code

Generate a poster

Restore the picture of the demo above, the TWO-DIMENSIONAL code is dynamically generated, the picture is from the project

Process: From top to bottom, GetQrCodeToCanvas 3. Get the canvas object createCanvasContext (createSelectorQuery is recommended). The two-dimensional code is placed on the canvasCopy the code

WXML Canvas definition:

Code:

<canvas canvas-id="canvas" style="width: {{width}}px; height: {{height}}px;" > </canvas>Copy the code

Js:

Code:

/** * life cycle function -- listen for the page to complete the first rendering */ onReady: Const CTX = wx.createcanvasContext ('canvas') const CTX = wx.createcanVasContext ('canvas') const CTX = wx.createcanVasContext ('canvas') const CTX = wx.createcanVasContext ('canvas') // Black ctx.rect(0, 0, this.data.width, this.data.height) ctx.fill() ctx.draw(true) // White ctx.rect(20, 100, 0, this.data.width, this.data.height) ctx.fill() ctx.draw(true) // White ctx.rect(20, 100, 0, this.data.width, this.data.height) this.data.width - 40, This.data.height-200) ctx.setFillstyle ('white') ctx.fill() ctx.draw(true) // Text to fill ctx.setfontSize (18) Ctx.setfillstyle ('black') ctx.filltext ('black', 130, Ctx.setfontsize (14) ctx.setfillstyle ('#636363') ctx.filltext ('#636363', 130, 180) ctx.draw(true) ctx.setfontsize (14) ctx.setfillstyle ('#636363') ctx.filltext (' DrawImage ('... '); drawImage('... '); drawImage('... '); /.. DrawImage (qrUrl, 50, 215, this.data.width-110, this.data.height - 360) ctx.draw(true, ()=>{ let that = this; Wx.canvastotempfilepath ({x: 0, y: 0, width: that.data. CanvasW, height: that.data. CanvasH, destWidth: canvasH that.data.canvasW * 2, destHeight: that.data.canvasH * 2, canvasId: 'canvas', success(res) { that.setData({ pictureUrl: Res.tempfilepath, // just an example, not a real resource})}})})})})},Copy the code

Document links

  • weapp-qrcode-canvas-2d
  • canvas
  • forwarding
  • Save the photo to the gallery

conclusion

1. How to obtain APP.qrcode.min.js? Go to gitHub to download the file

2. The canvas ID must be the same as the argument of the method you call

3, the real machine debugging error? 2D canvas only supports preview, not real machine

4. Why not generate the poster with QR code at the same time? Temporarily did not find the method, after all, the two-dimensional code plug-in is also called the official 😭, understanding: should need to rewrite the plug-in

Note: Welcome to learn modestlyCopy the code