<button wx:if="{{!hasWxUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getWxUserInfo">获取头像昵称</button>
<button open-type='contact' class='contact-btn'>
<image src='/image/contact.png' class='contact-img' mode='widthFix' />
</button>
以上2个button在同一个页面,点击【获取头像昵称】时,响应了contact事件,请官方同学验证下,谢谢!
补充:我把css中的【.contact-btn】注释掉就好了,这个太扯了。。。
我把css样式一个一个去掉尝试,发现是【position: static;】存在时就出问题了,官方的同学可以重现下
你好,没有复现你说的情况,应该是你的代码逻辑上出了问题吧
页面简单到爆,js就是跳转页面,无逻辑。以下贴出完整代码,供参考,还请帮忙再看看,谢谢
<view class='container'>
<view class='account'>
<view class='left'>
<text class='username'>{{wxUserInfo.nickName}}</text>
</view>
<view class='right'>
<button wx:if="{{!hasWxUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getWxUserInfo">获取头像昵称</button>
<block wx:else>
<image class="avatar" src="{{wxUserInfo.avatarUrl}}" mode='scaleToFill' />
</block>
</view>
</view>
<progress percent='100' stroke-width='1' activeColor='#F2F2F2' class='seperator' />
<view class='link'>
<view class='item'>
<text class='text'>去填问卷</text>
<image src='/image/blog.png' class='blog-img' mode='widthFix' bindtap='goToBeforeQu' />
</view>
<progress percent='100' stroke-width='1' activeColor='#F2F2F2' class='seperator' />
<view class='item'>
<text class='text'>我的报告</text>
<image src='/image/report.png' class='report-img' mode='widthFix' bindtap='goToBeforeQu' />
</view>
<!--
<progress percent='100' stroke-width='1' activeColor='#F2F2F2' class='seperator' />
<view class='item'>
<text class='text'>常见问题</text>
<image src='/image/ask.png' class='ask-img' mode='widthFix' />
</view>-->
<progress percent='100' stroke-width='1' activeColor='#F2F2F2' class='seperator' />
<view class='item'>
<text class='text'>联系客服</text>
<button open-type='contact' class='contact-btn'>
<image src='/image/contact.png' class='contact-img' mode='widthFix' />
</button>
</view>
<progress percent='100' stroke-width='1' activeColor='#F2F2F2' class='seperator' />
</view>
</view>
===========================================
.container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.account {
width: 77.6%;
display: flex;
flex-direction: row;
align-items: left;
}
.account .left {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
}
.username {
font-family: SourceHanSans;
font-size: 5.86vw;
color: #231815;
margin-top: 25%;
}
.gender {
font-family: SourceHanSans;
color: #5e5e5e;
font-size: 3.73vw;
padding-top: 5%;
}
.account .right {
width: 50%;
display: flex;
flex-direction: row-reverse;
}
.avatar {
width: 25.33vw;
min-height: 25.33vw;
max-height: 25.33vw;
margin-top: 10%;
margin-right: 5%;
border-radius: 50%;
}
.seperator {
width: 77.6%;
margin-top: 4%;
margin-bottom: 4%;
}
.link {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 77.6%;
}
.text {
font-size: 4.8vw;
line-height: 4.8vw;
font-family: SourceHanSans;
color: #535353;
margin-top: 3%;
}
.blog-img {
width: 3.73vw;
height: auto;
margin-top: 2%;
}
.report-img {
width: 4.53vw;
height: auto;
margin-top: 2%;
}
.ask-img {
width: 4.8vw;
height: auto;
margin-top: 2%;
}
.contact-img {
width: 5.06vw;
height: auto;
}
.contact-btn {
width: 5.06vw;
height: 4.8vw;
margin-top: 2%;
position: static;
display: flex;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
box-sizing: none;
font-size: none;
text-align: none;
text-decoration: none;
line-height: none;
border-radius: 0;
overflow: none;
color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
}
==================================================
const app = getApp()
const commonConst = require('../../utils/commonConst.js')//获取常量定义类
Page({
data: {
wxUserInfo: {},
hasWxUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function () {
this.loadWxUserInfo()
},
loadWxUserInfo: function () {
console.log('account loadWxUserInfo')
if (app.globalData.wxUserInfo) {
console.log('account step1')
this.setData({
wxUserInfo: app.globalData.wxUserInfo,
hasWxUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
console.log('account step2')
app.userInfoReadyCallback = res => {
console.log('tttttttttttttttt')
this.setData({
wxUserInfo: res.userInfo,
hasWxUserInfo: true
})
}
} else {
console.log('account step3')
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.wxUserInfo = res.userInfo
this.setData({
wxUserInfo: res.userInfo,
hasWxUserInfo: true
})
}
})
}
},
getWxUserInfo: function (e) {
console.log(e)
app.globalData.wxUserInfo = e.detail.userInfo
this.setData({
wxUserInfo: e.detail.userInfo,
hasWxUserInfo: true
})
},
goToBeforeQu: function () {
wx.navigateTo({
url: '../beforeQu/beforeQu'
})
},
onShareAppMessage: function () {
return {
title: commonConst.SHARE_TITLE_INDEX,
imageUrl: '/image/snake.png',
path: '/pages/index/index?referOpenid=' + wx.getStorageSync('openid'),
success: function (res) { },
fail: function (res) { }
}
}
})