微信小程序--实践

---

fullpage效果实现：

情景需求：页面分为上下块，上方固定高，下方不固定高，做fullpage效果。如图：

Paste_Image.png

布局：
似乎这种情景，在小程序中只能采用纵向的flex布局，别无他法。上方固定高，下方flex:1;

fullpage效果方案探索一:

采用小程序组件:scroll-view。
先说个结论：这种方案实现不了fullpage效果，因为我无法阻止该组件的scroll事件。
再来谈为什么要用这个组件：在小程序中，当以手势滑动屏幕的时候，会拉扯页面波动。导致fullpage 效果不那么完美。所以设想：利用scroll-view组件，当手势滑动时候，页面也跟随滑动（这样可以避免页面波动），滑到一定位置页面自动切换到下一屏幕。但是很可惜，愿望是美好的，现实是残酷的。小程序的scroll-view组件，没法阻止scroll事件。

fullpage效果方案探索二:

采用swiper方案
这里有个坑：在体验小程序时候，swiper 有纵向方向。但是去文档中查找，咋么也找不到。幸好有高人指点，设置"vertical=true"即可。不然这一方案也被否定了。

fullpage效果方案探索三:

自己动手
步骤一：封装一个判断手势方向的函数
步骤二：结合动画API animation 滑动页面

---

数字run起来效果实现

情景需求：当点击卡片的时候，卡片中间显示一个数字，数字从0跑到100。如图所示：

Paste_Image.png

数字效果方案探索一：

采用定时器
关于这一块核心代码：

timer && clearInterval(timer);
timer = setInterval(function() {
  if (startPercent >= endPercent) {
    clearInterval(timer);
    return;
  }
  startPercent++;
  option.start_percent = startPercent;
  me.setData({
    topics: topics
  });
}, 10);

但是在微信开发工具或者真机上，数字跑起来有明显的卡顿现象，感觉小程序对定时器支持不好！！

数字效果方案探索二：

优化定时器代码：降低设置setData({})的频率，由startPercent++ 改为startPercent+=2; 延长定时器的时间，由10ms改为20ms。理由：在一定时间内，减少DOM操作(个人理解)。

timer && clearInterval(timer);
timer = setInterval(function() {
  if (startPercent >= endPercent) {
    clearInterval(timer);
    return;
  }
  startPercent+=2;
  option.start_percent = startPercent;
  me.setData({
    topics: topics
  });
}, 20);

但事实是：没有鸟用,卡顿依然存在。

数字效果方案探索三：

采用requestAnimationFrame
requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout, 主要用途是按帧对网页进行重绘。具体的就不在这介绍了！

timer = requestAnimationFrame(runNum);
function runNum(){
   if(startPercent >= endPercent){
    cancelAnimationFrame(timer);
    return;
  }
  startPercent++;
  option.start_percent = startPercent;
  me.setData({ 
    topics: topics 
  });
  timer = requestAnimationFrame(runNum);
}

但事实是：小程序在ios 居然不支持requestAnimationFrame，报错！！只好放弃。另外在安卓上，卡顿现象也依然存。

数字效果方案探索四：

采用canvas，利用canvas 和定时器画数字。事实发现：卡顿消失了，但存一些bug。先来分析卡顿为什么消失了？个人觉的是：利用canvas,可以免去setData({topics: topics})这一步（类似于不操作DOM），所以整个画面变得十分流畅。再来说bug:

• canvas遇到transform等，并不会随着父级进行transform,而是保留在原地。

最后，再总结一些开发微信小程序遇到的坑：

• promise语法 在不同的开发工具版本中，支持情况不一样。在0.10版本中支持，在0.11版本中不支持
• requestAnimationFrame 在IOS 中报错
• canvas 并不会随着父级进行transform，而是保留在原地； canvas需添加id,且id 名不能重复，否则画布状态为：display:none;