微信小程序怎么使用自定义组件封装原生image组件

小天博客 • 01/18 10:06 • 程序猿 • 阅读 8

本文小编为大家详细介绍“微信小程序怎么使用自定义组件封装原生image组件 ”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序怎么使用自定义组件封装原生image组件 ”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
在小程序没还没推出自定义组件功能时，只能通过改变 Page 中的 data 来展示兜底的占位图，所以当时的处理方式十分蛋疼…
由于需要知道这个图片的数据路径，所以不得不在每个 image 上加上类似 data-img-path 的东西。
如果默认图片不同呢？例如球员、球队和 feed 的默认图片一般都是不同的。
那么一般只好再增加一个属性例如 data-img-type 来标识默认图的类型。
页面层级浅倒还好，如果跨模板了，那么模板就可能要用一个类似于 pathPrefix 的属性来传递模板数据的路径前缀。
最后在失败回调里调用 setData({ [path]: DEFAULT_IMG }) 重新设置图片地址。
原生写法一般要写4个文件：.json/.wxml/.js/.wxss
TuaImage.json
TuaImage.wxml
TuaImage.js
布吉岛大家使用原生写法时有木有一些感觉不方便的地方：
4个文件：.json/.wxml/.js/.wxss，这样老需要切来切去的降低效率
properties 是什么鬼？大家（React/Vue）一般不都用 props 么？
style=”width: {{ width }}; height: {{ height }}; {{ styleStr }}” 样式字符串怎么辣么长…
所以以下是一个使用单文件组件封装原生 image 组件的例子。
使用单文件组件将配置、模板、脚本、样式写在一个文件中，方便维护。
使用计算属性 computed 将样式字符串免费云主机域名写在 js 中。
使用 this.imgSrc = this.errSrc 而不是 this.setData 来改变 data。读到这里，这篇“微信小程序怎么使用自定义组件封装原生image组件 ”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: python如何使用枚举器

这篇文章主要为大家展示了“python如何使用枚举器”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“python如何使用枚举器”这篇文章吧。使用枚举器，在循环免费云主机域名中很容易找到索引。以上是“python如何使…