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

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

问题表现

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

问题分析

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

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

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

问题解决

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

<!-- components/component-bottom-loading/component-bottom-loading.wxml -->
<view class="component-bottom-loading">
    <loading width="45rpx" height="45rpx" wx:if="{{!isFinal}}" />
    <text class="component-bottom-loading-text">{{isFinal?'没有了':'加载中...'}}</text>
</view>

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