微信小程序中全局图片异常处理

在小程序开发过程中,不可避免的会在页面中加载大量图片,但可能由于网络问题,或者图片文件缺失等问题,导致图片不能被正常展示。我们希望在图片加载失败后显示一张我们预先设定好的默认图片。

属性类型默认值必填说明最低版本
srcstring图片资源地址1.0.0
modestringscaleToFill图片裁剪、缩放的模式1.0.0
lazy-loadbooleanfalse图片懒加载,在即将进入一定范围(上下三屏)时才开始加载1.5.0
show-menu-by-longpressbooleanfalse开启长按图片显示识别小程序码菜单2.7.0
binderroreventhandle当错误发生时触发,,event.detail = {errMsg}1.0.0
bindloadeventhandle当图片载入完毕时触发,event.detail = {height, width}1.0.0

在微信小程序image组件中支持 binderror 来处理图片加载异常事件,最简单粗暴的方式就在是js中捕获这个事件,然后通过setData将image的地址修改为默认图片地址。在使用场景少的情况下这确实是一个不错的方式,但通常一个小程序中会引入不少的图片用于不同的模块,复用性差的弊端就暴露出来了。同时,setData的通信次数较多,效率较低。

其实我们可以直接在视图层来处理这一异常,使用wxs直接操作节点样式,通过设置默认图片为背景图的方式来展示。

module.exports = {
  imageError: function imageError(event, ownerInstance) {
    var instance = event.instance
    instance.setStyle({
      "background-image": "url('" + host + "default.jpg')",
      "background-repeat": "no-repeat",
      "background-size": "cover"
    })
  }
}

我们定义一个wxs工具函数便于全局引用,设置异常节点的背景样式。在wxml中引入并绑定在image组件的error事件中。

<image 
    src="" 
    class="image-class" 
    mode="aspectFill" 
    lazy-load 
    binderror="{{util.imageError}}"
></image>
<wxs src="../../utils/util.wxs" module="util" />

这时候就可以较好的处理图片加载异常了,如果大家有更好的方法欢迎与我交流。

发表评论

电子邮件地址不会被公开。