本文小编为大家详细介绍“微信小程序怎么使用自定义组件封装原生image组件 ”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序怎么使用自定义组件封装原生image组件 ”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
在小程序没还没推出自定义组件功能时，只能通过改变 Page 中的 data 来展示兜底的占位图，所以当时的处理方式十分蛋疼...
由于需要知道这个图片的数据路径，所以不得不在每个 image 上加上类似 data-img-path 的东西。
计算
安全
数据库
网络和加速
企业服务
<view
wx:for="{{ obj.arr }}"
wx:key="imgSrc"
wx:for-item="item"
wx:for-index="itemIdx"
><image
src="{{ item.imgSrc }}"
binderror="onImageError"
data-img-path="obj.arr[{{ itemIdx }}].imgSrc"
/>
</view>
复制代码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,
})
},
})
复制代码如果默认图片不同呢？例如球员、球队和 feed 的默认图片一般都是不同的。
那么一般只好再增加一个属性例如 data-img-type 来标识默认图的类型。
<!-- 球队图 -->
<image
...
data-img-type="team"
/>
<!-- 球员图 -->
<image
...
data-img-type="player"
/>
复制代码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],
})
},
})
复制代码页面层级浅倒还好，如果跨模板了，那么模板就可能要用一个类似于 pathPrefix 的属性来传递模板数据的路径前缀。
<!--
球员排行模板
pathPrefix: String
playerList: Array
...
-->
<template name="srPlayerRank"><view
wx:for="{{ playerList }}"
wx:key="imgSrc"
wx:for-item="item"
wx:for-index="itemIdx"
><image
src="{{ item.imgSrc }}"
binderror="onImageError"
data-img-type="player"
data-img-path="{{ pathPrefix }}.playerList[{{ itemIdx }}].imgSrc"
/></view>
</template>
复制代码最后在失败回调里调用 setData({ [path]: DEFAULT_IMG }) 重新设置图片地址。
原生写法一般要写4个文件：.json/.wxml/.js/.wxss
TuaImage.json
{
"component": true
}
复制代码TuaImage.wxml
<!-- 加载中的图片 -->
<image
hidden="{{ !isLoading }}"
src="{{ errSrc }}"
style="width: {{ width }}; height: {{ height }}; {{ styleStr }}"
mode="{{ imgMode }}"
/>
<!-- 实际加载的图片 -->
<image
hidden="{{ isLoading }}"
src="{{ imgSrc || src }}"
mode="{{ imgMode }}"
style="width: {{ width }}; height: {{ height }}; {{ styleStr }}"
bindload="_onImageLoad"
binderror="_onImageError"
lazy-load="{{ true }}"
/>
复制代码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 }}" 样式字符串怎么辣么长...
所以以下是一个使用单文件组件封装原生 image 组件的例子。
使用单文件组件将配置、模板、脚本、样式写在一个文件中，方便维护。
使用计算属性 computed 将样式字符串写在 js 中。
使用 this.imgSrc = this.errSrc 而不是 this.setData 来改变 data。
<config>
{
"component": true
}
</config>
<template lang="wxml"><!-- 加载中的图片 --><image
hidden="{{ !isLoading }}"
src="{{ errSrc }}"
style="{{ imgStyleStr }}"
mode="{{ imgMode }}"
/><!-- 实际加载的图片 --><image
hidden="{{ isLoading }}"
src="{{ imgSrc || src }}"
mode="{{ imgMode }}"
style="{{ imgStyleStr }}"
bindload="_onImageLoad"
binderror="_onImageError"
lazy-load="{{ true }}"
/>
</template>
<script>
/**
* 图片组件，能够传递备用图片以防图片失效
* https://developers.weixin.qq.com/miniprogram/dev/component/image.html
*/
// 也可以设置为网络图片如： https://foo/bar.png
const DEFAULT_IMG = '/assets/your_default_img'
export default {
props: {
// 图片地址
src: String,
// 图片加载中，以及加载失败后的默认地址
errSrc: {
type: String,
// 默认是球队图标
default: DEFAULT_IMG,
},
width: {
type: String,
default: '48rpx',
},
height: {
type: String,
default: '48rpx',
},
// 样式字符串
styleStr: {
type: String,
default: '',
},
// 图片裁剪、缩放的模式（详见文档）
imgMode: {
type: String,
default: 'scaleToFill',
},
},
data () {
return {
imgSrc: '',
isLoading: true,
}
},
computed: {
// 样式字符串
imgStyleStr () {
return `width: ${this.width}; height: ${this.height}; ${this.styleStr}`
},
},
methods: {
// 加载图片出错
_onImageError (e) {
this.imgSrc = this.errSrc
this.$emit('onImageError', e)
},
// 加载图片完毕
_onImageLoad (e) {
this.isLoading = false
this.$emit('onImageLoad', e)
},
},
}
</script>
<style lang="scss">
</style>
复制代码读到这里，这篇“微信小程序怎么使用自定义组件封装原生image组件 ”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
