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 { 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: 12 rpx; } .modal-content{ text-align : center ; width : 450 rpx; height : 323 rpx; display : block ; margin : 0 auto ; margin-top : 118 rpx; z-index : 10000 ; } .tips 1 { font-size : 38 rpx; color : #333333 ; line-height : 1 ; } .tips 2 { font-size : 26 rpx; color : #9c9c9c ; margin : 18 rpx 0 29 rpx; line-height : 1 ; } .button { width : 80% ; height : 80 rpx; border-radius: 60 rpx; margin : 0 auto 80 rpx; font-size : 30 rpx; 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 ; } |
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:" )
//在真机调试时 |
我已重新编辑
麻烦按照要求补全代码片段,另外,很重要的一点是,回复信息请在我的评论下回复我,你单独评论,我这边是收不到消息通知的,请注重回复信息的方式。
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)