小程序-微信小程序踩坑记-1

onShow的坑

微信小程序onShow会仍然保存上一次进入小程序的参数值和场景值，所以如果需要在onShow中做逻辑操作，需要进行区分。

其次，微信小程序发起转发和调起支付功能时，跳出了微信小程序范围，会触发onHide和onShow的操作。

兼容性问题

1. websocket

   由于手机系统的问题。iOS会在小程序进入后台（或息屏）后大约5s就断掉了后台的所有操作，因此在小程序处于进入后台状态时检测到了websocket心跳发送失败后便执行关闭连接，但是息屏状态下不会立即执行关闭连接操作（onHide也失灵了），而是在亮屏时处理操作栈内堆积的操作。

   而Android在进入后台（或息屏）后仍然会运行至大概5分钟（手机不同时间也不同），但Android会暂停小程序的setInterval函数运行。

   所以小程序回到前台后，iOS系统需要进行重连操作，而Android系统只需要重新运行setInterval函数。

   websocket可以同时维护5个，需要在创建成功后进行一系列监听，如果回收使用了旧的socketTask不能再次进行监听函数挂载，否则会响应多次监听函数操作。

2. css动画

   旋转动画transtion: rotate(180deg)，Android和iOS表现不一致，如果动画旋转角度为360°时，iOS真机则会直接显示为末状态，而Android能够正常显示，当旋转角度不为360°的倍数时，iOS会旋转到末状态最小的角度，Android正常显示，所以会出现iOS和Android旋转方向和旋转角度不一致问题。

   使用wx.createAnimation依旧解决不了问题，可旋转范围为[-180, 180]。

   解决方案：使用setInterval去循环调用旋转，但是主要问题是旋转方向可能不一致。

   onLoad() {
       this.data.spinAnimation = wx.createAnimation({
           duration: 1400,
           timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
           delay: 0,
           transformOrigin: '50% 50% 0',
           success: function(res) {
               console.log(res)
           }
       })
   },
   handleSpinAni() {
       const ani = this.data.spinAnimation
       let n = 1
       this.interval = setInterval(() => {
           ani.rotate(180*(n)).step()
           console.log("rotate=="+n)
           this.setData({
               ['ani.spin']: ani.export()
           })
           n += 1
           if (n === 5) {
               clearInterval(this.interval)
           }
       }, 1400)
   }

渲染问题

控制只有一次动效的gif图片，缓存问题

前端开发通用方法，解决缓存问题。当GIF图片的组件已经渲染后，再次显隐或者用v-if控制组件挂载的问题，因为缓存，第一次真是后不会触发GIF图片的动效再次展示，因此使用后缀携带参数的方式解决。如：/static/icons/bg.gif?123

滚动问题

-webkit-overflow-scrolling: touch;
overflow-x: auto;