真机测试时遇到component 为null问题
发布于 6 年前 作者 qguo 1101 次浏览 来自 问答

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

<bindDialog id=“bindPhone” class=“bindPhone” bind:getPhoneNumber=“getPhoneNumber”>

</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>
</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 {
  width100%;
  height100%;
  positionfixed;
  top0;
  left0;
  background#000;
  opacity: 0.5;
  overflowhidden;
  color#fff;
}
.modal-dialog {
  width72%;
  positionabsolute;
  top30%;
  left14%;
  background#fff;
  border-radius: 12rpx;
}
.modal-content{
  text-aligncenter;
  width450rpx;
  height323rpx;
  displayblock;
  margin0 auto;
  margin-top118rpx;
  z-index10000;
}
.tips1 {
  font-size38rpx;
  color#333333;
  line-height1;
}
.tips2 {
  font-size26rpx;
  color#9c9c9c;
  margin18rpx 0 29rpx;
  line-height1;
}
.button {
  width80%;
  height80rpx;
  border-radius: 60rpx;
  margin0 auto 80rpx;
  font-size30rpx;
  color#fff;
  background#31cc32;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-contentcenter;
  padding0;
  box-sizing: border-box;
}
button::after{
  bordernone;
}

login.json

{
  "usingComponents": {
    "bindDialog":"../login/bindPhone"
  },
  "navigationBarTitleText""登录"
}

login.wxml

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

login.js中使用wx.selectComponent组件时,在真机调试时报错

//获得dialog组件   
    this.bindPhone = this.selectComponent("#bindPhone");
    console.log("bindPhone:")

    console.log(this.bindPhone)

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

2 回复

你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

我已重新编辑

回到顶部