前端开发样式总结

每日一言：科学和观点。前者诞生知识，后者产生无知。

1、部分# font-weight 在安卓不生效

张鑫旭写的《CSS世界》 240页  有相关描述可以作为参考

2、小程序动画的实现

a、用css实现动画

• 尽量减少帧数
• 尽量用transform启动GPU硬件加速

b、lottie-miniprogram 引入 动画json

• 注意canvas画布的大小,本人在开发时设计给了一个2000px宽高的动画，导致ios手机上不能正常展示

• path和data不能同时存在

// 动画声明
checkAnimate () {
      if(!this.data.isNewVersion) return
      let getCnvas = this.createSelectorQuery().select('#canvas_bg')
      getCnvas.node(res => {
        const canvas = res.node
        const context = canvas.getContext('2d')
        canvas.width = xx
        canvas.height = xx
        lottie.setup(canvas)
        this.checkAni = lottie.loadAnimation({
          loop: true,
          autoplay: true,
          path: 'https://XXX.json',
          rendererSettings: {
            context,
          },
        })
        
      }).exec()
    },
    
// 动画执行
this.checkAnimate() // 执行动画
this.lightPlay()

// 模版
<canvas id="canvas_bg" class="canvas_bg" type="2d"></canvas>
    

3、解决在 IOS 页面点击 input 白屏问题

1. 如果使用了 position 定位，检查父元素是否有加上 position: relative;
2. 如果以上不能解决，给 input 加上

input {
  -webkit-transform: translateZ(0);
  transform: translateZ(0)
}