为什么 button 属性“getUserInfo”不成功？
Closed this issue · 12 comments
button 属性“getUserInfo”不成功，提示以下错误：
VM7311:1 Do not have bindQosChange handler in current page: pages/button/button. Please make sure that bindQosChange handler has been defined in pages/button/button, or pages/button/button has been added into app.json
在 mpvue 中使用如下：
<template>
<div class="page">
<button open-type="getUserInfo" @getuserinfo="getUserInfo">getUserInfo</button>
</div>
</template>
<script>
export default {
methods: {
getUserInfo(e) {
console.log(e);
}
}
}
</script>
<style scoped>
</style>
根据你的报错信息提示，应该是你绑定的获取用户信息的函数没有定义，你可以先确定下是不是这个问题造成的。
getUserInfo函数在methods 里面定义如下：
getUserInfo(e) {
// this.topicIndex = e.mp.detail.value;
console.log(e.mp.detail.errMsg)
console.log(e.mp.detail.userInfo)
console.log(e.mp.detail.rawData)
},
您那边测试是可以使用的， 方法可以告诉我。
@lvjh 我这边是可以正常获取 userInfo，方法就是上面的代码。
你方便提供一下你获取userInfo的所有代码不，你的报错信息里面不是有个 bindQosChange ,问题应该就是这个引起的。
使用你的方式，可以获取到了用户信息， 非常感谢您的解答！！
请教您一个问题：如何动态的修改page 的 background-color: 属性？
:style 就可以实现
<template>
<div class="page">
<div :style="{backgroundColor:backgroundColor}"></div>
</div>
</template>
<script>
export default {
data() {
return {
backgroundColor:'red'
}
},
}
</script>
<style scoped>
</style>
动态修改 data 里面 backgroundColor的值就可以了
我使用您的方法可以实现上部分背景有更新， 下部分没有更新（效果见截图）
我控制部分代码
<div class="page" :style="{backgroundColor:backgroundColor[backgroundColorIndex]}">”
backgroundColor: ['rgb(51, 60, 77)', 'rgb(64, 143, 230)'],
socketString: ['关闭', '开启'],
backgroundColorIndex: 1,
搞了好半天，尝试好多方法都没有实现，重新刷新加载页面可以解决问题，但是用户体验好差。
您有没有好的办法可以实现整个页面的背景动态刷新？
你提供的上诉代码暂时看不出问题，方便提供一下完整的代码不？或者上部分背景可以更新，你可以顺着思路找一下下面为什么不能更新的问题，比如是backgroundColorIndex改变的不对还是 css布局这些有问题
1，backgroundColorIndex修改，页面的背景已经修改，业务逻辑没有问题
2，css部分， 我完全按照您的css样式，没有修改。
3，应该是template的上一级的问题，但是不知道 如何修改？
代码：
<template>
<div class="page" :style="{backgroundColor:backgroundColor[backgroundColorIndex]}">
<div class="page__hd">
<div class="page__title"></div>
<div class="page__desc"></div>
</div>
<button class="weui-btn" type="default" @click="changeBackgroundColor">发送</button>
</div>
</template>
<script>
export default {
data() {
return {
backgroundColor: ['rgb(51, 60, 77)', 'rgb(64, 143, 230)'],
socketString: ['关闭', '开启'],
backgroundColorIndex: 1,
}
},
methods: {
changeBackgroundColor() {
if (this.backgroundColorIndex === 0)
this.backgroundColorIndex = 1
else
this.backgroundColorIndex = 0
console.log(res.data.result);
console.log('this.backgroundColorIndex:' + this.backgroundColorIndex + ':' + this.backgroundColor[this.backgroundColorIndex])
}
}
}
</script>
<style scoped>
</style>
这种效果？
加一个 class page-bg
<template>
<div class="page page-bg" :style="{backgroundColor:backgroundColor[backgroundColorIndex]}">
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.page-bg {
position: absolute;
height: 100%;
width: 100%;
}
</style>厉害，就是这种效果，太感谢您了！！
如果您把微信小程序的api集成到这个库里面就更好了!
如何使用微信的扫一扫功能 获取 外部二维码信息？
mpvue 完全支持小程序 api，使用方法和小程序中一样。
小程序获取二维码信息，参考wx.scanCode(OBJECT)