network里总是有一个报错，但是页面没有影响，不知道是什么原因

Question

云函数代码：

  app.router('musiclist',async(ctx,next) => {
    const res = await axios.get(`${BASE_URL}/playlist/detail?id=${parseInt(event.playlistId)}&${ICODE}`)
    ctx.body = res.data
  })

小程序代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    nusiclist:[],
    listInfo:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.cloud.callFunction({
      name:'music',
      data:{
        playlistId:options.playlistId,
        $url:'musiclist'
      }
    }).then((res) => {
      const pl = res.res1ult.playlist;
      this.setData({
        musiclist:pl.tracks,
        listInfo:{
          coverImgUrl:pl.coverImgUrl,
          name:pl.name
        }
      })
    })
  },
}

Answer 1

谢成 2020-08-20 09:12:53

这个应该和背景图片url有关，在musiclist.wxml和player.wxml中都有用到背景图片，最开始这个背景图片url的值为空，然后这个值我们通过ajax请求获取再赋值。应该就是在一开始url为空的这个状态时报的错误。

这样修改试试，加粗部分是需要修改的代码：

在musiclist.wxml中：

<view wx:if="{{listInfo.coverImgUrl}}" class='detail-container' style='background: url({{listInfo.coverImgUrl}}) no-repeat  top/cover'></view>

在player.wxml中：

<view wx:if="{{picUrl}}"  class="player-container" style="background:url({{picUrl}}) center/cover no-repeat"></view>

我们解决问题的思路是：先通过wx:if判断要赋值的这个url值是否存在，如果不存在就不渲染该元素，如果存在再渲染这个背景图片对应的元素。

• 提问者 wn798793618 #1

  非常感谢！加上wx:if就解决了，谢谢老师