微信小程序 API selectComponent 获取组件返回 null 的记录

问题描述

/** 在Page 生命周期 onready 获取组件实例 */

onReady(){
    this.targetComponet = this.selectComponent('#targetCompoent');
}

/** wxml **/
<targetCompoent id="targetCompoent"></targetCompoent>

bindEvent(e){
	this.targetComponent.fun();
	/** this.targetComponent null */
}

解决方案

• 检查页面 .json 引用是否正确

{
	"usingComponents" :{
	 	"targetCompoent":"../../components/targetCompoent/targetCompoent"
	}
}

• 检查组件中的显示逻辑是否用了 wx:if 语法，改成用 style 或者用 hidden 控制

<view wx:if="{{visible}}"></view>
<view hidden="{{!visible}}"></view>

• 在使用组件的地方加多一层检查

onReady(){
    this.targetComponet = this.selectComponent('#targetCompoent');
}

bindEvent(e){
	if(this.targetComponent) return this.targetComponent.fun(); 
	let targetComponent = this.selectComponent('#targetCompoent');
	return this.targetComponent.fun();
}

补充

onLoad(Object query) 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onShow() 页面显示/切入前台时触发。
onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。