小程序使用selectComponent获取自定义组件时，返回null（问题排查与分析）

       要想小程序界面好看，还原UI妹纸设计的界面，小程序自带的组件肯定是无法满足所有需求的。那遇到比较炫酷好看UI的时候，想要还原的时候就必不可少需要自定义组件了。写过许多自定义组件了，也遇到过许多坑，这里说一个比较头大的坑，就是引入自定义组建的时候，使用selectComponent获取自定义组件时，返回null的问题。

      简单示例

   因为这里我们说的主要是selectComponent返回为null的问题，其他问题先不考虑，这里假设我有一个自定义组件QrCodeDialog，且自定义组件的代码没有问题（组件代码本身的问题就不在本次讨论范围了）。

这个时候在页面引入的时候我在某个界面引用了QrCodeDialog，却发现this.selectComponent()方法返回的null。

问题排查与分析

  1.那首先最基本的就是看页面的json引用路径是否正确

2.看看wxml文件里面的选择器是否设置选择器，比如我这里设置的是id选择器

（这里提一下自定义组件使用什么名字的标签是由页面的json文件中引用自定义组件时的key决定的，比如我引用的时候key定义的是qrcode_dialog，那么在wxml文件使用的时候组件名就是qrcode_dialog，这个大家应该都知道^_^）

3.看看在页面的js文件里面引用的代码

注意这个selectComponent方法里面的参数要与wxml里面设置的id选择器的值相对应，比如我的用的id选择器就用#号+id

 

如果检查过后上面说的，全都没问题的话，那多半就是wxml中自定义组件的那段代码还没渲染到就使用selectComponent引用了组件，这个时候的返回值肯定是null。产生这种大致就下面两种情况。

1.wx:if属性使用不当。

     为什么说wx:if使用不当会导致selectComponent返回为null呢？这里不得不提一下wx:if与hidden属性的区别，这两个属性我想大家都比较熟悉，都是用来控制显示与隐藏的。要说有什么区别，有些可爱的同学就会脱口而出：“wx:if条件为true就显示，反之则隐藏；hidden条件为true就隐藏，反之则显示！”。嗯，说的没错，这确实是最直观最明显的区别。但是说的并不全！他们还有一个区别，就是如果你用wx:if包裹了一段代码，界面在渲染的时候，当wx:if的条件为false的时候是不会渲染这段代码的，只有wx:if的条件为true才会渲染这段代码；而用hidden包裹的代码无论条件是为true还是false都会渲染它包裹的代码，只不过为true时将这段布局隐藏了而已。

    说到这个区别我想有些小可爱已经明白了。假如你的自定义组件包裹在了wx:if下，并且在你使用selectComponent获取组件对象的时候，这个wx:if的条件还为false，也就是说你引用的时候，页面并没有渲染到你的自定义组件，这时候使用selectComponent获取的组件对象当然为空，因为都还没渲染到。

   说到这里，赶紧看看你页面的wxml文件的布局文件，是不是将自定义组件放在了wx:if里面包裹起来了，并且你引用的时候wx:if的条件是不是为false。如果真的是这种情况导致的将wx:if换成hidden就好了。

2.自定义组件所在层级太深

这个意思就是说你的自定义组件嵌套在n个view下面，理论上页面渲染的顺序应该是从外往里，如果你的自定义组件嵌套的非常深，而这个时候你在页面还未渲染完成的时候就开始使用selectComponent引用组件，获取到的对象也有可能是会为null，这个情况不会太稳定，有时候渲染的速度不一样，出现偶尔引用成功，偶尔引用失败的情况。

当然第二种情况极少出现，反正我这辈子没遇见过。哈哈~夸张了一些，反正我是没遇到过这种情况，不够理论上应该是存在这种情况的。

 

好了就这么多，在发现其他情况的话我在补充。