微信小程序如何在自定义组件中创建画布

813 阅读1分钟

今天主要是自定义一个组件,功能是用画布画一个圆盘。

工作中遇到的技术问题:

1、微信小程序里如何创建、调用自定义组件

解决:developers.weixin.qq.com/miniprogram…

(1)创建component组件

(2)在需要用到的页面中引入组件

(3)应用组件 在index.html里应用组件

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

2、微信小程序里如何在自定义组件里创建画布

解决:developers.weixin.qq.com/miniprogram…

<canvas id="canvas" style="width:300px;height:300px;" type="2d"></canvas>
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');
}

3、微信小程序如何重设画布的宽高

解决:虽然定义了style,但是画布的搞还是150,得重设一下

canvas.width = _width;
canvas.height = _height;

4. 自定义组件里无法引用app.wxss里的样式?

解决:developers.weixin.qq.com/miniprogram…

可以。