微信小程序之如何使用自定义组件封装原生 image 组件

cnTomato 发布于2019-08-23 10:58 / 2942人阅读

摘要：假如图片链接有问题比如，依然展示占位图。使用单文件组件将配置模板脚本样式写在一个文件中，方便维护。

零、问题的由来

一般在前端展示图片时都会碰到这两个常见的需求：

图片未加载完成时先展示占位图，等到图片加载完毕后再展示实际的图片。

假如图片链接有问题（比如 404），依然展示占位图。甚至你还可以增加点击图片再次加载的功能。（例如知乎）

然鹅，小程序原生组件 image 并没有提供这些常用功能...

注：这里加了 2s 的延迟

一、常规操作

在小程序没还没推出自定义组件功能时，只能通过改变 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 }) 重新设置图片地址。

就问你蛋不蛋疼？这一坨 data-img-path="{{ pathPrefix }}.playerList[{{ itemIdx }}].imgSrc" 代码真让人无发可脱...

二、自定义组件

有了自定义组件后，用领袖【窃·格瓦拉】的话来说的话就是：“感觉好 door 了~”

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)
        },
    },
})

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

4个文件：.json/.wxml/.js/.wxss，这样老需要切来切去的降低效率

properties 是什么鬼？大家（React/Vue）一般不都用 props 么？

style="width: {{ width }}; height: {{ height }}; {{ styleStr }}" 样式字符串怎么辣么长...

2.2.TuaImage.vue

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

使用单文件组件将配置、模板、脚本、样式写在一个文件中，方便维护。

使用计算属性 computed 将样式字符串写在 js 中。

使用 this.imgSrc = this.errSrc 而不是 this.setData 来改变 data。


{
    "component": true
}

采用框架是 tua-mp：

github 源码地址

终极蛇皮上帝视角之微信小程序之告别 setData

终极蛇皮上帝视角之微信小程序之告别“刀耕火种”

云服务器 GPU云服务器微信小程序组件自定义选择组件如何使用微信小程序如何封装html组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96868.html

微信小程序开发中的二三事之网易云信IMSDK DEMO

摘要：传统的网页编程采用的三剑客来实现，在微信小程序中同样有三剑客。观察者模式不难实现，重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型，微信小程序中自然也有。本文由作者邹永胜授权网易云社区发布。简介为了更好的展示我们即时通讯SDK强悍的能力，网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 评论0 收藏0
「轻算账」小程序实践笔记

摘要：资源开发文档是一套完全免费的微信小程序开发框架，扩展了小程序的能力。推荐有一些不错的解决方案封装封装跨页面事件通讯监听数据变化开发如何在微信小程序的页面间传递数据需要时可以快速过一遍。微信小程序回调，，，的使用例子供参考这篇文章主要记录我做小程序「轻算账」过程中遇到的一些问题和解决方案，就当是做个总结，也希望其中有能够帮助到他人的信息。 showImg(https://segment...

BigTomato 2019-08-23 13:45 评论0 收藏0
微信小程序 bug 集中营

摘要：利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。但是第一，微信小程序是国内的，有中文文档，虽然它的文档说明有点坑，但好歹有文档，阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们，如果觉得本文还不错，记得给个...

he_xd 2019-08-02 12:03 评论0 收藏0
微信小程序 bug 集中营

摘要：利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。但是第一，微信小程序是国内的，有中文文档，虽然它的文档说明有点坑，但好歹有文档，阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们，如果觉得本文还不错，记得给个...

PascalXie 2019-08-29 17:19 评论0 收藏0
微信小程序 bug 集中营

摘要：利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。但是第一，微信小程序是国内的，有中文文档，虽然它的文档说明有点坑，但好歹有文档，阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们，如果觉得本文还不错，记得给个...

lordharrd 2019-08-26 13:21 评论0 收藏0