wechat-mini-program-experience
经历了一次小程序开发,遇到了一些开发时遇到的坑,首先说明一下技术框架是使用的京东的 taro 进行的开发,并且使用的 hooks 的开发方式
Taro 的坑
首先来看看使用 taro 框架会有哪些坑是需要避免的呢
在开发中需要保持的一些思维
小程序中的一些注意事项
- canvas 的使用注意事项
a. 首先第一点就是 canvas 的 type="2d" 的模式不会进行绘制,原因尚未知晓,解决方法就是不设定 type,而是使用
canvas.getContext('2d')
。b. canvas 在绘制时如果要设置一些样式,需要配合
context.save() context.restore()
,因为 canvas 的样式是依据最近的一次,如果想要各个设置不互相干扰,就需要在设置前后使用上面两个 API 进行保存,实在是因为样式混杂不好处理,那么就在每次 draw 的时候进行整块画布清空context.clearRect()
。c. canvas 的所有计算完毕之后,一定要使用
context.draw()
进行绘制,否则画布上不会出现任何图像。d. 小程序的 canvas 的宽高就是其 style 的宽高,与 HTML 的不一样。
e. 在调试 canvas 的时候需要在真机上面进行调试,因为小程序 canvas 使用的是原生组件,模拟器上的样子不一定是真机上的样子,并且如果有 canvas 尽量不要放在浮层中,可能会因为 canvas 是原生组件而层级并不会在浮层上展示,同样因为是原生组件,所以也不能在 scroll-view 中使用 canvas,canvas 不会随着 scroll-view 滑动而滑动。
f. 如果需要在小程序中进行 canvas 的动画,需要调用
canvas.requestAnimationFrame()
,如果不生效,可以使用setInterval()
,但是小程序的动画在真机上可能会很卡,原因尚未知晓,尽量不要设计过于复杂的动效在小程序上。
埋点小技巧
Last updated