demand

The customer of our small program said that the posters generated by goods were a little fuzzy, because they were all generated in the background before and there was no way to set the definition parameters, so we need to change the generation method. We have seen WXML-to-Canvas before, but we haven’t had the opportunity to study and use it properly. Now comes the opportunity to step on a new one.

The official address is here

1. Install it according to the instructions on the official website

npm install --save wxml-to-canvas
Copy the code

Be sure to build NPM

2. Import components

  1. Start with json on the page you want to use

    "usingComponents": {
      "wxml-to-canvas": "wxml-to-canvas"
      }
    Copy the code

    There are some files in the node package, but there are some files in the miniprogram_npm folder. Then I copy the files directly from the official demo file to use it.

  2. In the WXML file

    <wxml-to-canvas class="widget" ></wxml-to-canvas>
    Copy the code

3. The package introduction of Js

  1. First of all, I encapsulated WXML, style, and WXML’s dynamic value transfer in a JS called util

    const wxml = (name,share_img,qrcode_img) = >{
     return ` 
             
              
             
            +share_img+`'>  
             
             
              `
             
            +name+`  
             
            +qrcode_img+`'>   `
    }
    
    const style = {
     container: {
         width: 300.height: 456.backgroundColor: '#fff',},itemBox: {
         width: 300.height: 260.alignItems: 'center',},itemBox2: {width: 300.height: 50.alignItems: 'center'.marginTop:20
     },
     itemBox3: {width: 300.height: 120.alignItems: 'center'
     },
     img: {width:270.height:251.marginTop:15
     },
     img2: {width:100.height:100,},text: {
         width: 260.height: 40.textAlign: 'center'.fontSize:14.marginTop:5.lineHeight:'1.1 em'.scale:1}}module.exports = {
     wxml,style
    }
    Copy the code
  2. Import it in the js you want to use, and change the path to your own

    const {
     wxml,
     style
    } = require('.. /.. /.. /.. /utils/util.js')
    Copy the code
  3. In the onload write

    /** * lifecycle function -- listens for page loading */
     onLoad: function (options) {
         var that = this;
    
         this.widget = this.selectComponent('.widget');
    
         /** * The following is the way I see other blogs have encountered this situation, need to do a delay to set up successfully. * Because when the page is not rendered, it is impossible to get the node * if you have such a problem, you can try * the time is set by yourself, you can get the node */
    
         /** setTimeout(function(){ that.widget = that.selectComponent('.widget'); }, 1000) * /
    
     },
    Copy the code
  4. Our requirement is to generate the commodity poster, which contains the small program code, so I need to ask the interface to give me the TWO-DIMENSIONAL code first, and then I will write the two-dimensional code and the information of the commodity into the template

    /** * The following code is written in my applet interface callback */
    const_wxml = WXML (parameter1, the parameter2, the parameter3)
                   const p1 = that.widget.renderToCanvas({
                       wxml: _wxml,
                       style
                   })
                   p1.then((res) = > {
                       that.container = res;
                       const p2 = that.widget.canvasToTempFilePath()
                       p2.then(res= > {
                           that.setData({
                               src: res.tempFilePath,
                               width: that.container.layoutBox.width,
                               height: that.container.layoutBox.height,
                           },function(){
                               wx.hideLoading();
                           })
                       }).catch(fail= > {
                           wx.hideLoading();
                           wx.showToast({
                               icon: 'error'.title: 'Please try again later',
                           })
                       })
                   }).catch(fail= > {
                       wx.hideLoading();
                       wx.showToast({
                           icon: 'error'.title: 'Please try again later',})})Copy the code

4. The debugging

At this time the function is basically developed, the development tool generated no problem, clarity than background generation of clarity, and then I went to the real machine take a look, get, error.

fail canvas has not been created

In a meal operation, it can be said that the reason was found, but not completely found, the setting in onload did not take effect, the setting delay did not work, all kinds of data searching, wandering around the community, leng did not encounter the same situation as me. Is the mentality of quick jump, suddenly thought of the experience version has not tried it, holding a gambling mentality, click upload.

Hahahahahaha, no problem with the experience version.

On-line!

I haven’t figured out exactly why yet.

However, it does not affect users’ use.

The first time to write an article, a little nervous, if there are omissions, welcome to supplement.