什么是小程序图片出错处理机制
什么是小程序图片出错处理机制？简单解释当小程序获取网络图片出现异常时，微信组件提供一种方案解决问题的过程。微信官方公众平台对关于image组件的解释为图片组件，至于在binderror错误事件处理上的说明并不详细，如果在获取网络图片时出现404 nofollow情况下要如何处理？或者是单张和循环内的某张图片出错的情况下又该如何处理呢？这时候就需要调用到小程序图片出错处理机制binderror。
Binderror是小程序绑定错误的处理机制，官方描述为当错误发生时触发事件，事件对象event.detail = {errMsg: 'something wrong'}。首先，我们都知道html的img组件自带一个onerror图片出错事件处理机制，写法就如同js一样。
但是，小程序里的image组件做这样的处理，却发现并不能实现，反而要提示APP-SERVICE-Engine错误信息。小程序类似的事件处理binderror，文档支出可以通过event.detail打印出具体的出错信息，并没有给出出错后的具体解决方案。了结果后得知解决方案如下：通过dataset属性将image组件的src变量值存入。binderror事件通过获取属性变量值改变data的数据。当然这个有个弊端，就是image组件的src是动态的值而不能是直接指向某张图片的情况下。那么具体处理代码如下：
demo.wxml：
单张图片：
多张图片的情况：
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);//注意这里的赋值方式...
}
});
但是这样存在一个情况就是每个页面都写这个程序不是很臃肿，那么我们考虑怎么把他写入到模块js文件里面呢？
解决方案：先把this对象传入到js函数里面，就可以直接修改外面的data数据了。
小程序图片出错处理机制是利用binderror事件来代替image组件没提供的onerror事件，如果图片链接404，就会触发这个binderror事件，我们在绑定的事件里修改对应的数据源就好了。
推荐阅读：小程序API可以实现哪些功能
标签：
