记一次微信小程序的白屏经历

最近两天遇到了一次小程序异常白屏的问题,消耗了大量精力才解决,记录本次经历作为前车之鉴。希望有遇到同样问题的同学能够快速解决,减少无谓的时间浪费。

问题表现

一直正常运行的代码在某天突然无法在真机上运行,表现为真机扫码运行后一直加载中,无法显示布局。但是在模拟器上可以正常运行。
另外在Android手机上没有任何错误表现,在iPhone上打开vConsole后可以看到有初始化失败的日志。此处日志就不贴出来了,并没有什么参考价值。

问题分析

代码在之前一直正常运行,今天无法运行了,首先想到了是不是开发工具和本机环境出了问题。在经历了清理缓存、更新开发工具、重启电脑等操作后发现并不是环境出现问题。

然后,使用其他项目进行验证,在本机编译运行一切正常。这表明是无法运行的项目代码出现了问题。

最后,针对代码提交进行排查,最终发现是一个自定义组件的属性定义错误导致初始化失败。

问题解决

此处贴出有问题的自定义组件代码:
wxml:



    
    {{isFinal?'没有了':'加载中...'}}

javascript:

// components/component-bottom-loading/component-bottom-loading.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 此处定义错误
    isFinal: Boolean = false
  }
})

在官方文档中的示例中定义如下:

Component({
  // 属性定义(详情参见下文)
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  }
}

我在写自定义组件的时候采用了简化的定义方式,并且想当然的赋了初始值。但是实际上这种写法是错误的。应该修改如下:

// components/component-bottom-loading/component-bottom-loading.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isFinal: {
      type: Boolean,
      value: false
    }
  }
})

然后编译运行,一切正常。问题解决。

PS:
虽然问题解决了,但是该自定义组件是一个月之前写的,在此期间开发包、体验包都能正常运行。在经过一段时间后才出现问题。猜测是不同的基础库表现不一致。

你可能感兴趣的:(记一次微信小程序的白屏经历)