开发小程序时遇到的问题汇总

  1. ReferenceError: regeneratorRuntime is not defined
    报错原因:不能解析async … await 等高级语法
    解决方法:微信开发者工具 -> 详情 -> 本地设置 -> 开启增强编译
  2. 使用组件scroll-view横向滚动时,效果出来了,但是页面内容被撑得很长
    原因:虽然是横向排列的,但是计算高度仍然按照纵向排列来计算的。
    解决办法:给scroll-view所在区域设置高度
    在这里插入图片描述
  3. 调用自定义组件的时候报错property keys must be doublequoted
    原因:json格式的键和值都需要用双引号
    解决方案:将单引号换成双引号(注意:结束一定不能加逗号,除非下面还有内容,否则也会报错)
    在这里插入图片描述
"usingComponents": {
    "NavHeader": "/components/NavHeader/NavHeader"
  }
  1. 一个页面需要调用一个接口整合数据性能优化
    在这里插入图片描述
    比如排行榜里面有云音乐国电榜、新歌榜、热歌榜、原创榜等等
    但是接口每次只返回其中一个榜单的信息,并且返回的数据巨多,但是页面只用显示三条数据
    在这里插入图片描述
    这里就需要重新组合数据,这里只说核心逻辑
	let index = 0;
    let resultArr = [];
    while(index < 5) {
      let topListData = await request('/top/list', {idx: index++});
      let topListItem = {name: topListData.playlist.name, tracks: topListData.playlist.tracks.slice(0, 3)};
      resultArr.push(topListItem);
    }
    this.setData({
     topList: resultArr
    });

可以实现功能,但是此时存在的问题:循环结束才更新topList的状态值, 会导致发送请求的过程中页面长时间白屏,用户体验差。
解决办法:在循环里面更新topList

	let index = 0;
    let resultArr = [];
    while(index < 5) {
      let topListData = await request('/top/list', {idx: index++});
      let topListItem = {name: topListData.playlist.name, tracks: topListData.playlist.tracks.slice(0, 3)};
      resultArr.push(topListItem);
      // 不需要等待五次请求全部结束才更新,用户体验较好,但是渲染次数会多一些
      this.setData({
        topList: resultArr
      });
    }
    // 更新topList的状态值, 放在此处更新会导致发送请求的过程中页面长时间白屏,用户体验差
    // this.setData({
    //   topList: resultArr
    // });
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值