什么是小程序图片出错处理机制

2018-04-27 18:07

摘要:小程序图片出错处理机制简单解释当小程序获取网络图片出现异常时,微信组件提供一种方案解决问题的过程。

什么是小程序图片出错处理机制?简单解释当小程序获取网络图片出现异常时,微信组件提供一种方案解决问题的过程。微信官方公众平台对关于image组件的解释为图片组件,至于在binderror错误事件处理上的说明并不详细,如果在获取网络图片时出现404 nofollow情况下要如何处理?或者是单张和循环内的某张图片出错的情况下又该如何处理呢?这时候就需要调用到小程序图片出错处理机制binderror

什么是小程序图片出错处理机制

Binderror是小程序绑定错误的处理机制,官方描述为当错误发生时触发事件,事件对象event.detail = {errMsg: \'something wrong\'}。首先,我们都知道htmlimg组件自带一个onerror图片出错事件处理机制,写法就如同js一样。

但是,小程序里的image组件做这样的处理,却发现并不能实现,反而要提示APP-SERVICE-Engine错误信息。小程序类似的事件处理binderror,文档支出可以通过event.detail打印出具体的出错信息,并没有给出出错后的具体解决方案。了结果后得知解决方案如下:通过dataset属性将image组件的src变量值存入。binderror事件通过获取属性变量值改变data的数据。当然这个有个弊端,就是image组件的src是动态的值而不能是直接指向某张图片的情况下。那么具体处理代码如下:

demo.wxml:

单张图片: src={{testImg}} binderror=errImg bindload=loadImg data-err-img=testImg />  

多张图片的情况:

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可以实现哪些功能

参与讨论

发表评论