常见小程序体验评分问题解决
1. css ‘:active’ 伪类来实现点击态 --> 使用小程序内置组件的 ‘hover-*’ 属性来实现
// bad
<view class='item'>
.item{
background: #fff;
&:active {
background: #f0f0f0;
}
}
// good
<view class='item' hover-class="item--hover">
.item{
background: #fff;
}
.item--hover {
background: #f0f0f0;
}
2. 图片没有按原图宽高比例显示 --> 使图片原比例与展示区域比例接近或尽量使用mode=“aspectFit”
// bad
<image src="https://xx.png"></image>
// good
<image src="https://xx.png" mode="aspectFit"></image>
3. overflow: ‘auto’ 或 overflow: ‘scroll’ 的元素添加`-webkit-overflow-scrolling: touch 以开启IOS惯性滚动
// bad
.container{
overflow: 'auto';
}
// good
.container{
overflow: 'auto';
-webkit-overflow-scrolling: touch;
}
4. 存在将未绑定在 WXML 的变量传入 setData
<view>{{a}}</view>
// bad
this.setData({
a:1,
b:2,
})
// good
this.setData({
a:1
})
5.存在定时器未跟随页面回收
// bad
setTimeout(()=>{
this.getData()
},1500)
// good
...
this.data.timer = setTimeout(()=>{
this.getData()
},1500)
...
// 页面中
onUnload(){
this.data.timer && clearTimeout(this.data.timer);
this.data.timer = null
}
// 组件中
pageLifetimes:{
hide() {
this.data.timer && clearTimeout(this.data.timer);
this.data.timer = null
},
}
// 组件中或
lifetimes:{
detached(){
this.data.timer && clearTimeout(this.data.timer)
this.data.timer = null
}
},