Background: The company needs to generate two-dimensional code through the agreed URL. Users can download, save and paste the album by themselves. Implementation: Pull Qrcode() is the API method of appellate P-qrcode. It is very simple to use, but I have encountered a lot of problems during the development and debugging process. DrawQrcode ([options])😫*callback unavailable *😫

drawQrcode({ width: 200, height: 200, canvasId: 'myQrcode', text: 'https://github.com/yingye', callback: Function (e) {doSomething()}}) function doSomething(e) {wx.canvastotempFilepath ({canvas, // Canvas drawing context canvasId: 'qrCode', // Draw 'canvasId' success: res => {this.setData({imageUrl: res.tempFilepath}); }, fail(err) { console.log('err', err); }})}Copy the code

2. If the real machine and preview mode are inconsistent, the real machine will report an error and the generated TWO-DIMENSIONAL code will display blank. Solution: Switch to the real machine debugging version 2.0

On hole 3. Temporary address generated by canvasToTempFilePath failed to save album on real machine?

VM3172:2 Unhandled promise rejection TypeError: Cannot read property 'createView' of undefined at qh._initCanvasInstance (eval at n.call.document (runtime.js? devtools_ignore=true:1), <anonymous>:2:1093569) at qh._init (eval at n.call.document (runtime.js? devtools_ignore=true:1), <anonymous>:2:1080004) at t (eval at n.call.document (runtime.js? devtools_ignore=true:1), <anonymous>:2:1080167) at qh._onReady (eval at n.call.document (runtime.js? devtools_ignore=true:1), <anonymous>:2:1080199) at eval (eval at n.call.document (runtime.js? devtools_ignore=true:1), <anonymous>:2:1605857) at new V (eval at n.call.document (runtime.js? devtools_ignore=true:1), <anonymous>:2:48211) at dB (eval at n.call.document (runtime.js? devtools_ignore=true:1), <anonymous>:2:1605834) at eval (eval at n.call.document (runtime.js? devtools_ignore=true:1), <anonymous>:2:1608069) at Array.forEach (<anonymous>) at eval (eval at n.call.document (runtime.js? devtools_ignore=true:1), <anonymous>:2:1608052)Copy the code

On hole 4: The base64 applet to local image base64ToArrayBuffer has been discarded

Solution:There are two-dimensional codes generated by canvas and passedCanvas.toDataURLgeneratebase64Image link path, can not download, so this scenario is not suitable, do not use.

The pit climb was finally achievedNew canvas-2D interface

1To canvas

<canvas type="2d" style="width: 200px; height: 200px;" canvas-id="qrCode" id="qrCode"></canvas>
Copy the code

2. Appellate P-qrcodenpm I appellate P-qrcode 3. Import drawQrcode from.. /.. / utils/weapp. Qrcode. Esm. Js 4. Call

  • Create canvas Instancewx.createSelectorQuery
  • Painting qr codedrawQrcode
  • Generate a temporary path to the QR codewx.canvasToTempFilePath
  • Save the photo albumwx.saveImageToPhotosAlbum
const query = wx.createSelectorQuery() query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node; DrawQrcode ({canvas, width: 200, height: 200, canvasId: 'myQrcode', text: 'https://github.com/yingye' / / need to generate the url}) / / qr code will wx. The qr code to generate a temporary path canvasToTempFilePath ({canvas, / / canvas graphics context canvasId: 'qrCode', // Draw 'canvasId' success: res => {this.setData({imageUrl: res.tempFilepath}); }, fail(err) { console.log('err', err); }}) / / save the temporary path directly to the photo album wx saveImageToPhotosAlbum ({filePath: res.tempFilePath, Success (res){// Save to album successfully} fail() {// popup to authorize wx.showmodal ({success(res){// If cancel if (res.cancel) {} else {// open Settings wx.openSetting({ success(res) { if (res.authSetting['scope.writePhotosAlbum']) { } else { } }) } } }) } }) })Copy the code

Conclusion:

  1. Intermittent development may not pay attention to documentation changes, including API transfers, deprecations, tool features updates, etc., so in the development of long-term maintenance of small application developers first, to avoid the trap of others.
  2. The problem as far as possible in the wechat developer community to find the answer, see the official solution or the developer to give a proven feasible idea.
  3. Familiar with documentation API usage and base library updates
  4. The inconsistency between the simulator, preview and real machine is very troublesome. Be sure to debug and observe the difference on the real machine.

Link forage TWO-DIMENSIONAL code two-dimensional code jump rule two-dimensional code generation details and principle