微信小程序实例：image组件的binderror事件处理

微信公众平台关于image组件的讲解都挺详细的，至于在binderror错误事件处理上并没有详细说明。那么如果我们在获取网络图片出现404 nofound的情况下要怎么处理呢？如果是单张和循环内的某张图片出错的情况下又该如何处理呢？

首先，我们都知道html的img组件自带一个onerror图片出错事件处理机制，写法就如同js一样。语法如下：

<img src="xxx" οnerrοr="this.src='./img/default.png'"/>

但是，我尝试在小程序里的image组件也做这样的处理，却发现并不能实现，反而要提示APP-SERVICE-Engine错误信息。后来重新翻看文档，找到类似的事件处理binderror，文档支出可以通过event.detail打印出具体的出错信息，并没有给出出错后的具体解决方案。通过和前辈沟通得到的解决方案如下：

通过dataset属性将image组件的src变量值存入。binderror事件通过获取属性变量值改变data的数据。当然这个有个弊端，就是image组件的src是动态的值而不能是直接指向某张图片的情况下。

那么具体处理代码如下：

demo.wxml：：

单张图片：

<image src="{{testImg}}" binderror="errImg" bindload="loadImg" data-err-img="testImg" />

多张图片的情况：

      <view class="bd-left-item" wx:for="{{classicArr}}"><image src="{{item.img}}" class="item-img" binderror="errImg" data-err-img="classicArr[{{index}}].img" /><view class="bd-left-item-bottom"><view class="title">{{item.title}}</view><view class="addr">{{item.addr}}</view><view class="tag" wx:for-items="{{item.tags}}" wx:for-item="tag">{{tag}}</view></view></view>

demo.js：：

Page( {data: {classicArr: [{img: "../../img/01.png",title: "现实世界的桃花源",addr: "福建省南安市东田镇香草世界",tags: ["摄影", "PS"]},{img: "../../img/default.png",title: "南普陀",addr: "福建省厦门市南普陀",tags: ["摄影1", "PS"]},{img: "../../img/default.png",title: "武夷山",addr: "福建省....",tags: ["摄影", "PS2"]}],testImg: "../img/01.png"},errImg: function(e){var _errImg=e.target.dataset.errImg;var _objImg="'"+_errImg+"'";var _errObj={};_errObj[_errImg]="../../img/01.png";console.log( e.detail.errMsg+"----"+ _errObj[_errImg] + "----" +_objImg );this.setData(_errObj);//注意这里的赋值方式...}
});

演示如下：：

去掉dataset属性，展示的是一片空白

加入dataset属性后，结合binderror事件处理图片

但是这样存在一个情况就是每个页面都写这个程序不是很臃肿，那么我们考虑怎么把他写入到模块js文件里面呢？

解决方案：：先把this对象传入到js函数里面，就可以直接修改外面的data数据了。具体函数如下：

commons.js：：

//远程图片no found情况下指引
function errImgFun(e, that){var _errImg=e.target.dataset.errImg;var _errObj={};_errObj[_errImg]="../../img/01.png";console.log( e.detail.errMsg+"----" + "----" +_errImg );that.setData(_errObj);
}
module.exports = {sayHello: sayHello,errImgFun: errImgFun
}

index.js：：

var comm=require('../../common/common.js');Page({errImg: function(ev){//需要访问当前页面的数据对象传递到其它页面上var _that=this;comm.errImgFun(ev, _that);},
})

以上是个人对于binderror事件的使用，至于bindload还是不清楚要怎么使用，有知道的希望告知下~~

微信小程序实例：image组件的binderror事件处理相关推荐

微信小程序实例：image组件的binderror事件处理(2021-07-08)
微信小程序实例:image组件的binderror事件处理全局先定义替换图片的路径我这里是展示了好几种不同数据源的图片,所以抽取出来: 前端代码:
微信小程序实例源码大全demo下载
怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行微信小程序实例源码大全微信小程序游戏类demo:识色:从相似颜色中挑选不 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序 F2 图表组件
@antv/f2-canvas 微信小程序 F2 图表组件安装 npm i @antv/f2-canvas 快速开始下面我们就开始使用 f2-canvas 组件来绘制图表吧,这里假设用户已经初步了 ...
微信小程序-MAP API组件合集
合集不断更新,总有一款适合你~ map组件&API 官方文档组件map | 微信开放文档 APIMapContext | 微信开放文档获取当前的地理位置.速度.wx.getLocation ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

微信小程序实例：image组件的binderror事件处理

微信小程序实例：image组件的binderror事件处理相关推荐

最新文章

热门文章