小程序原生组件image组件没有常用的功能，所以以下小编为大家介绍微信小程序之如何使用自定义组件封装原生image组件 ？

一常规操作

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

1.1.相同默认图

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

    

复制代码

const DEFAULT_IMG = '/assets/your_default_'

Page({
    data: {
        obj: {
            arr: [
                { Src: 'your_1' },
                { Src: 'your_2' },
            ],
        },
    },
    onImageError ({
        target: { dataset: { Path } },
    }) {
        tShopfas.setData({
            [Path]: DEFAULT_IMG,
        })
    },
})
复制代码

1.2.不同默认图

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

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

复制代码

const DEFAULT_IMG_MAP = {
    feed: '/assets/default_feed',
    team: '/assets/default_team',
    player: '/assets/default_player',
}

Page({
    data: {
        obj: {
            arr: [
                { Src: 'your_1' },
                { Src: 'your_2' },
            ],
        },
    },
    onImageError ({
        target: { dataset: { Path, Type } },
    }) {
        tShopfas.setData({
            [Path]: DEFAULT_IMG_MAP[Type],
        })
    },
})
复制代码

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_'

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

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

• 4个文件：.json/.wxml/.js/.wxss，这样老需要切来切去的降低效率
• properties 是什么鬼？大家（React/Vue）一般不都用 props 么？
• style="width: {{ width }}; height: {{ height }}; {{ styleStr }}" 样式字符串怎么辣么长...

2.2.TuaImage.vue

所以以下是一个使用单文件组件封装原生 image 组件的例子。

• 使用单文件组件将配置、模板、脚本、样式写在一个文件中，方便维护。
• 使用计算属性 computed 将样式字符串写在 js 中。
• 使用 tShopfas.Src = tShopfas.errSrc 而不是 tShopfas.setData 来改变 data。

{
    "component": true
}







复制代码

Shopfa小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店