Shulou(Shulou.com)06/01 Report--

This article Xiaobian introduces in detail for you "WeChat Mini Programs how to use custom components to encapsulate native image components", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "WeChat Mini Programs how to use custom components to encapsulate native image components" can help you solve your doubts.

A routine operation

Before Mini Program launched the custom component function, we could only display the placeholder map under the hood by changing the data in Page, so the processing method at that time was very painful.

1.1. Same default graph

Because you need to know the data path of this image, you have to add something like data-img-path to each image.

Copy the code 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,})},}) copy code 1.2. Different default diagrams

What if the default picture is different? For example, the default images for players, teams, and feed are generally different.

Then you generally have to add another attribute, such as data-img-type, to identify the type of default graph.

Copy the code 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],})},}) copy code 1.3. Picture is in the template

It's nice to have a shallow page level, but if you cross the template, the template may have to use an attribute similar to pathPrefix to pass the path prefix of the template data.

Copy the code

Finally, call setData ({[path]: DEFAULT_IMG}) in the failed callback to reset the image address.

Second, the custom component 2.1. Native custom component

Generally speaking, there are four files to write in the native writing method: .json/.wxml/.js/.wxss

TuaImage.json

{"component": true} copy the code

TuaImage.wxml

Copy the code

TuaImage.js

Const DEFAULT_IMG ='/ assets/your_default_img'Component ({properties: {/ / Image address src: String, / / Image loading And the default address errSrc: {type: String, / / default is the team icon value: DEFAULT_IMG,}, width: {type: String, value: '48rpx,}, height: {type: String, value:' 48rpx` }, / / style string styleStr: {type: String, value:'',}, / / pattern of image cropping and scaling (see document for details) imgMode: {type: String, value: 'scaleToFill',},} Data: {imgSrc:', isLoading: true,}, methods: {/ / error loading picture _ onImageError (e) {this.setData ({imgSrc: this.data.errSrc,}) this.triggerEvent ('onImageError', e)} / / after loading the picture _ onImageLoad (e) {this.setData ({isLoading: false}) this.triggerEvent ('onImageLoad', e)},},}) copy the code

Is there anything inconvenient for people in Phuket to use native writing:

4 files: .json / .wxml / .js / .wxss, so you always need to cut back and forth to reduce efficiency.

What the heck is properties? Don't people (React/Vue) usually use props?

Style= "width: {{width}}; height: {{height}}; {{styleStr}}" style string is so long.

2.2.TuaImage.vue

So here is an example of using a single-file component to encapsulate a native image component.

Use single-file components to write configurations, templates, scripts, and styles in a file for easy maintenance.

Use the calculation property computed to write the style string in js.

Use this.imgSrc = this.errSrc instead of this.setData to change the data.

{"component": true} / * picture component It can also be set to network images such as: https://foo/bar.pngconst DEFAULT_IMG ='/ assets/your_default_img'export default {props: {/ / Image address src: String, / / Image loading. And the default address errSrc: {type: String, / / default is the team icon default: DEFAULT_IMG,}, width: {type: String, default: '48rpx,}, height: {type: String, default:' 48rpx` }, / / style string styleStr: {type: String, default:'',}, / / pattern of image cropping and scaling (see document for details) imgMode: {type: String, default: 'scaleToFill',},} Data () {return {imgSrc:', isLoading: true,}}, computed: {/ / style string imgStyleStr () {return `style: ${this.width} Height: ${this.height} ${this.styleStr} `},}, methods: {/ / error loading picture _ onImageError (e) {this.imgSrc = this.errSrc this.$emit ('onImageError', e)}, / / loading picture completed _ onImageLoad (e) {this.isLoading = false this.$emit (' onImageLoad') E)},},} copy code is read here This article "WeChat Mini Programs how to use custom components to encapsulate native image components" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.