评论

常见小程序体验评分问题解决

部分常见小程序体验评分问题的直观的解决分享,解决后可提高小程序性能及优化体验。

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
  }
},
最后一次编辑于  2023-04-19  
点赞 0
收藏
评论
登录 后发表内容