微信小程序canvas验证码封装组件注意事项

微信小程序里面有好几个页面需要用到验证码验证，所以把验证码模块封装成组件，需要的页面直接调用，遇到了一些坑，总结如下：

1、封装组件需要type="2d"，直接用ctx = wx.createCanvasContext('canvas')会报错

<canvas canvas-id="canvas"  type="2d" class="first-canvas" ></canvas>

var query = this.createSelectorQuery()  

      query.select('.first-canvas')

        .fields({ node: true, size: true })

        .exec((res) => {

          const canvas = res[0].node

          const ctx = canvas.getContext('2d')

　　　//代码省略..........

　　})

 

2、验证码验证使用浮层，用wx：if和hidden控制显示和隐藏  

　　1）wx：if，andiord和ios都不显示组件

　　2）hidden，ios不显示组件

　　3）最后用position，top或者left设置很大的值，问题解决

　　其实问题就在于组件渲染和销毁

3、封装成组件后，发现canvas，js画图的尺寸大小有问题，还没有很好解决

4、调用子组件的方法, 可以实现父组件实时获取子组件的所有数据

子组件：

this.triggerEvent('codeEvent',{params:xxx},{})

 

父组件：

codeEvent(e) {

    let that = this;

    // 这里就是子组件传过来的内容了

      console.log(e.detail.params);

    },