微信小程序开发踩坑记

前言

微信小程序自去年公测以来，我司也申请了一个帐号开发，春节前后开始开发，现在终于告一个段落了。谨以此文记录下踩过的坑。

坑1：scroll-view与onPullDownRefresh冲突

由于有几个页面需要将导航tab栏自动置顶，所以使用了scroll-view。然而又想要下拉刷新，本来想直接使用onPullDownRefresh，结果却发现下拉的时候onPullDownRefresh根本没有！囧！

研究了半天，最终监听touchXXX自己模拟了个下拉刷新。（具体实现方案改日再分享。）为了尽量接近微信原生的下拉刷新，还特意抄了半天微信原生的下拉刷新动画...

　　

.loading{
    display: block;
    width: 100%;
    height: 20px;
    padding: 20px 0;
    text-align: center;
    background: #eee;
}
.loading::before,
.loading .dot,
.loading::after
{
  content: '';
  display: inline-block;
  color: transparent;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  margin: 0 8px;
}

.loading::before,
.loading .dot,
.loading::after{
  -webkit-animation: pulldown-refresh-loader 1.4s infinite ease-in-out;
  animation: pulldown-refresh-loader 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.loading::before{
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loading .dot{
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes pulldown-refresh-loader {
  0%, 80%, 100% { background-color: #f0f0f0; }
  40% { background-color: #fff; }
}

@keyframes pulldown-refresh-loader {
  0%, 80%, 100% { background-color: #f0f0f0; }
  40% { background-color: #fff; }
}

 

坑2：无法获取元素的高度

本来有个页面是要做成监听滚动，然后自动切换顶部tab的，类似 bootstrap的滚动监听 的效果。 然而里面有大段的文本，而文本的高度根本算不来，囧。还是放弃这个效果吧。

坑3：无法在bindXXX的事件处理的时候阻止冒泡

有人说，你可以使用catchXXX呀！然而，我在某些时候才需要阻止事件冒泡，另外一些时候是不需要阻止冒泡的，是需要默认行为...

最终采用了一个很挫的方案来“解决” -- 复制那个根据是否组织冒泡分别渲染成bindXXX或catchXXX...：

zzz
zzz

这个还不能简单地使用wx:if，否则切换的成本太高了点。

坑4： 预览前构建时间比较长

貌似没有好办法，预览的构建貌似不是增量的，希望微信官方啥时候能改成增量的就好了。点击预览按钮后去倒杯水喝吧。

坑5： 组件复用好蛋疼

小程序里面虽然提供了