小程序踩坑

wxml 的胡子拼接

1
<view wx:for="{{5}}">{{ item3['p_'+index] }}</view>

// 生效

1
<mission-item state="{{property[item.key].state}}"/>

// 不生效

1
<mission-item state="{{property.{{item.key}}.state}}"/>

setData 的 key 中含有变量

1
2
var originData = "fmList["+index+"].isStar";
this.setData({[originData]: isStar});

setData 更新对象的某个值

// 不生效

1
this.setData({reward.winTips: "恭喜获得钻石，请到任务中心兑换\n赶紧跟小伙伴炫耀吧"});

// 生效

1
this.setData({'reward.winTips': "恭喜获得钻石，请到任务中心兑换\n赶紧跟小伙伴炫耀吧"});

wx.setStorageSync 不能直接缓存 Map/Set

1
2
3
4
5
6
7
8
9
// Get
let storagedList = wx.getStorageSync(StorageKey);
if (storagedList) {
    this.favList = new Set(storagedList);
}

// Set
// storage 不支持 set，只能转为 array
wx.setStorageSync(StorageKey, Array.from(this.favList))

音频播放被抢占过久

如果音频被抢占过久，等到页面出现时，播放器会 Loading，此时直接 replay 是没有效果的，需要通过 src 重置播放器

1
2
3
4
5
6
7
8
9
10
11
onShow: function () {
    console.log("onShow");
    if (!this.data.isPlaying)
    {
      // 如果音频被抢占过久，等到页面出现时，播放器会 Loading，
      // 此时直接 replay 是没有效果的，需要通过 src 重置播放器
      this.backgroundPlayer.src = this.data.playerData.src;
    }
    // 每次出现就要重新启动播放，包括第一次
    this.replay();
},

子 view 超出父 view 的部分仍然响应了点击

目前只能在超出部分盖一层 View，并给它添加点击事件来解决

内容超过容器，导致可以滚动

以禁止竖直为例：overflow-y:hidden

设置透明背景

  • 正确：background-color:rgba(0,0,0,0)
  • 错误：background-color:clear

胡子通知顺序不一致

1
2
3
4
5
6
{{a || b}}

a = true, b = false

this.setData({a:false});
this.setData({b:true});

结果可能导致 b 的变化比 a 的变化先通知

CSS 变量

1
2
3
4
5
6
7
8
9
10
page {
  --music-item-width: 5rpx;
  --music-item-count: 7;
}

.music_bar {
  width: var(--music-item-width);
  height: calc(var(--music-item-width)*var(--music-item-count));
}

布尔值的胡子语法

1
2
3
4
5
6
7
<!-- 生效 -->
<van-popup show="{{false}}">
</van-popup>

<!-- 不生效 -->
<van-popup show="false">
</van-popup>

scroll-view 的坑

竖直滑动的 scroll-view, 需要给 scroll-view 一个固定的高度（比如 100%），设置属性 scroll-y

1
<scroll-view class='root' scroll-y>
1
2
3
4
.root {
  width: 100%;
  height: 100%;
}

van-popup 滚动时，事件穿透到底下的 View

解决方案

网络回包

1
2
3
4
5
6
7
8
9
10
wx.request({
  url: 'https://norcy.weimiaotech.com/SmallFrequence/regions?version='+version,
  header: {
    'content-type': 'application/json' // 默认值
  },
  success(res) {
    console.log("Request Category Sucess" + res.data.data.length);
    self.didCategoryRequestFinished(res.data.data);
  }
})

这样当 res.data 是空的时候，res.data.data 会变成 undefined，从而访问 length 的时候会出错

注意获取二维码的 scene 值最多只支持 32 个字母

text 标签出现顶部空白

1
2
3
<text>
{{item.title}}
</text>

改为

1
<text>{{item.title}}</text>

行内样式胡子语法不生效

// 生效


// 不生效

  1. wxml 的胡子拼接
  2. setData 的 key 中含有变量
  3. setData 更新对象的某个值
  4. wx.setStorageSync 不能直接缓存 Map/Set
  5. 音频播放被抢占过久
  6. 子 view 超出父 view 的部分仍然响应了点击
  7. 内容超过容器，导致可以滚动
  8. 设置透明背景
  9. 胡子通知顺序不一致
  10. CSS 变量
  11. 布尔值的胡子语法
  12. scroll-view 的坑
  13. van-popup 滚动时，事件穿透到底下的 View
  14. 网络回包
  15. 注意获取二维码的 scene 值最多只支持 32 个字母
  16. text 标签出现顶部空白
  17. 行内样式胡子语法不生效