Today is mainly a custom component, the function is to draw a disk with canvas.

Technical problems encountered in work:

1. How to create and call custom components in wechat applets

Solution: developers.weixin.qq.com/miniprogram…

(1) Create component

(2) Introduce components into the pages you need to use

(3) Application components Apply components in index.html

<controlTempAll :defaultTemp="38" :tempDate="[53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38]></controlTempAll>
Copy the code

2. How to create a canvas in a custom component in wechat applets

Solution: developers.weixin.qq.com/miniprogram…

<canvas id="canvas" style="width:300px; height:300px;" type="2d"></canvas>
Copy the code
this.createSelectorQuery()
.select('#canvas')
.fields({
    node: true.size: true,
})
.exec(this.createCircle.bind(this))

createCircle(res) {
   var canvas = res[0].node
   var clockCtx = canvas.getContext('2d');
}
Copy the code

3. How to reset the width and height of the canvas

Solution: although the style is defined, the canvas is still 150 and needs to be reset

canvas.width = _width;
canvas.height = _height;
Copy the code

4. Custom components can’t reference styles in app.wxSS?

Solution: developers.weixin.qq.com/miniprogram…

You can.