真机测试时遇到component 为null问题 - WXOPEN Club

wxml中使用自定义组件，在js（真机测试情况下出现）文件中获取组件时为null

</bindDialog>

下面这个语句无论放在js中的哪个位置，在真机调试时都为null，在预览和模拟器一起正常

this.bindPhone = this.selectComponent(“#bindPhone”);

当前 Bug 的表现（可附上截图）

预期表现

这个问题困扰了我一天，一直不知道是哪里出错了，在此之前一直都是可以使用的，这个问题是更新完微信开发者工具后出现的，项目中也用了一些其他的自定义组件都没有问题，唯独是这个组件出了问题

目测出现这个问题的机型有iPhone6s、iPhone7、iPhone7 plus、one plus6, 微信版本7.0.3，开发者工具版本号1.02.1904090，

代码片段：

bindPhone.wxml

<view class="modal-mask" hidden='{{!isShow}}'></view>

<view class="modal-dialog" hidden='{{!isShow}}'>

<view class="modal-content">

<view class='tips1'>绑定手机号</view>

<view class='tips2'>请先绑定手机号在进行此操作</view>

<button class='button' open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">

微信用户一键绑定

</button>

</view>

bindPhone.js

// pages/login/bindPhone.js

Component({

/**

* 组件的属性列表

*/

properties: {

},

/**

* 组件的初始数据

*/

data: {

// 弹窗显示控制

isShow: false

},

/**

* 组件的方法列表

*/

methods: {

//隐藏弹框

hideDialog() {

this.setData({

isShow: !this.data.isShow

})

},

//展示弹框

showDialog() {

this.setData({

isShow: !this.data.isShow

})

},

/**

* triggerEvent 组件之间通信

*/

getPhoneNumber(event) {

var res = event.detail

this.triggerEvent("getPhoneNumber", { encryptedData: res.encryptedData, iv: res.iv });

}

})

bindPhone.css

.modal-mask {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.5;

overflow: hidden;

color: #fff;

}

.modal-dialog {

width: 72%;

position: absolute;

top: 30%;

left: 14%;

background: #fff;

border-radius: 12rpx;

}

.modal-content{

text-align: center;

width: 450rpx;

height: 323rpx;

display: block;

margin: 0 auto;

margin-top: 118rpx;

z-index: 10000;

}

.tips1 {

font-size: 38rpx;

color: #333333;

line-height: 1;

}

.tips2 {

font-size: 26rpx;

color: #9c9c9c;

margin: 18rpx 0 29rpx;

line-height: 1;

}

.button {

width: 80%;

height: 80rpx;

border-radius: 60rpx;

margin: 0 auto 80rpx;

font-size: 30rpx;

color: #fff;

background: #31cc32;

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

padding: 0;

box-sizing: border-box;

}

button::after{

border: none;

}

{

"usingComponents": {

"bindDialog":"../login/bindPhone"

},

"navigationBarTitleText": "登录"

}

<bindDialog id="bindPhone" class="bindPhone" bind:getPhoneNumber="getPhoneNumber">

</bindDialog>

//获得dialog组件

this.bindPhone = this.selectComponent("#bindPhone");

console.log("bindPhone:")

console.log(this.bindPhone)

//在真机调试时this.bindPhone始终为null，在模拟器上和预约时一切正常