导航：首页 > 开发技术 >

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

发表于：2025-01-23 作者：千家信息网编辑

千家信息网最后更新 2025年01月23日，本文小编为大家详细介绍"微信小程序怎么使用自定义组件封装原生image组件 "，内容详细，步骤清晰，细节处理妥当，希望这篇"微信小程序怎么使用自定义组件封装原生image组件 "文章能帮助大家解决疑惑

千家信息网最后更新 2025年01月23日微信小程序怎么使用自定义组件封装原生image组件

本文小编为大家详细介绍"微信小程序怎么使用自定义组件封装原生image组件 "，内容详细，步骤清晰，细节处理妥当，希望这篇"微信小程序怎么使用自定义组件封装原生image组件 "文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

一常规操作

在小程序没还没推出自定义组件功能时，只能通过改变 Page 中的 data 来展示兜底的占位图，所以当时的处理方式十分蛋疼...

1.1.相同默认图

由于需要知道这个图片的数据路径，所以不得不在每个 image 上加上类似 data-img-path 的东西。

复制代码

const DEFAULT_IMG = '/assets/your_default_img'Page({    data: {        obj: {            arr: [                { imgSrc: 'your_img1' },                { imgSrc: 'your_img2' },            ],        },    },    onImageError ({        target: { dataset: { imgPath } },    }) {        this.setData({            [imgPath]: DEFAULT_IMG,        })    },})复制代码

1.2.不同默认图

如果默认图片不同呢？例如球员、球队和 feed 的默认图片一般都是不同的。

那么一般只好再增加一个属性例如 data-img-type 来标识默认图的类型。

复制代码

const DEFAULT_IMG_MAP = {    feed: '/assets/default_feed',    team: '/assets/default_team',    player: '/assets/default_player',}Page({    data: {        obj: {            arr: [                { imgSrc: 'your_img1' },                { imgSrc: 'your_img2' },            ],        },    },    onImageError ({        target: { dataset: { imgPath, imgType } },    }) {        this.setData({            [imgPath]: DEFAULT_IMG_MAP[imgType],        })    },})复制代码

1.3.图片在模板中

页面层级浅倒还好，如果跨模板了，那么模板就可能要用一个类似于 pathPrefix 的属性来传递模板数据的路径前缀。

复制代码

最后在失败回调里调用 setData({ [path]: DEFAULT_IMG }) 重新设置图片地址。

二自定义组件

2.1.原生自定义组件

原生写法一般要写4个文件：.json/.wxml/.js/.wxss

TuaImage.json

{    "component": true}复制代码

TuaImage.wxml

复制代码

TuaImage.js

const DEFAULT_IMG = '/assets/your_default_img'Component({    properties: {        // 图片地址        src: String,        // 图片加载中，以及加载失败后的默认地址        errSrc: {            type: String,            // 默认是球队图标            value: DEFAULT_IMG,        },        width: {            type: String,            value: '48rpx',        },        height: {            type: String,            value: '48rpx',        },        // 样式字符串        styleStr: {            type: String,            value: '',        },        // 图片裁剪、缩放的模式（详见文档）        imgMode: {            type: String,            value: 'scaleToFill',        },    },    data: {        imgSrc: '',        isLoading: true,    },    methods: {        // 加载图片出错        _onImageError (e) {            this.setData({                imgSrc: this.data.errSrc,            })            this.triggerEvent('onImageError', e)        },        // 加载图片完毕        _onImageLoad (e) {            this.setData({ isLoading: false })            this.triggerEvent('onImageLoad', e)        },    },})复制代码

布吉岛大家使用原生写法时有木有一些感觉不方便的地方：