微信小程序：selectComponent返回null的问题

当小程序自带的组件无法满足所有需求的时候，我们可以参考很多自定义组件。我们这次排查问题就拿比较常用的vant-weapp作为示例：使用selectComponent获取自定义组件对象时，返回null的问题

1、json引入组件

"usingComponents": {
  "van-button": "@vant/weapp/button/index",
  "van-count-down": "@vant/weapp/count-down/index"
}

2、看看wxml文件里面的选择器是否设置选择器

<view>
    <van-button plain hairline type="primary" wx:if="{{isShowCountDown}}" >
        <view>获取验证码</view>
    </van-button>
    <van-button plain hairline type="primary" wx:if="{{!isShowCountDown}}" >
        <view class="flex-start">
            <view>
                <van-count-down class="control-count-down" millisecond time="{{ time }}" auto-start="{{ false }}" format="ss"/>
            <view>
            <view>秒后重新获取验证码</view>
        </view>
    </van-button>
</view>

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

let _this = this;
const countDown = _this .selectComponent('.control-count-down');
console.log("countDown >> " + countDown );

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

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

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

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

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

如果你的自定义组件嵌套的非常深，而这个时候你在页面还未渲染完成的时候就开始使用selectComponent引用组件，获取到的对象也有可能是会为null，这个情况不会太稳定，有时候渲染的速度不一样，出现偶尔引用成功，偶尔引用失败的情况

以上情况分析，我们将我们代码优化了下

<view class="flex-start">
    <view hidden="{{!isShowCountDown}}">
        <van-count-down class="control-count-down" millisecond time="{{ time }}" auto-start="{{ false }}" format="ss" bind:finish="onCountDownFinished" />
    </view>
    <view wx:if="{{isShowCountDown}}" class="phone-code-get"> 秒重新获取</view>
    <view wx:if="{{!isShowCountDown}}">获取验证</view>
</view>

这样之后正常获取了~~~~

其实只要记住_this.selectComponent()返回为null的情况以上两种，要么是引用错误，要么就是未找到自定义组件节点。

代码007普通

打赏 收藏 海报 链接