Das WeChat-Applet realisiert die Bildanpassung (unterstützt mehrere Bilder)

In diesem Artikel werden hauptsächlich relevante Informationen darüber vorgestellt, wie das WeChat-Applet die Bildanpassung implementieren kann. Lassen Sie uns gemeinsam einen Blick darauf werfen.

Jeder weiß, dass die Anpassung von WeChat-Applets eine relativ häufige Anforderung ist. Normalerweise müssen wir in WEBView nur max-width:100% festlegen. Obwohl widthFix auch in WeChat implementiert werden kann, gibt es einen Fehler Das Bild muss größer oder gleich dem eingestellten Wert sein, sonst kommt es zu Dehnung und Verformung. In diesem Artikel wird eine andere Methode zur Anpassung verwendet.

Schauen wir uns zunächst einige Anweisungen für die Bildkomponente an:

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
binderror	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
bindload	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

Hinweis: Bild Komponentenstandardwerte: Breite 300 Pixel, Höhe 225 Pixel. Der Modus verfügt über 13 Modi, davon 4 Skalierungsmodi und 9 Zuschneidemodi.

Wenn es eine geeignetere Lösung gibt, ist es wahrscheinlich widthFix. In den oben genannten Modi besteht die erforderliche Voraussetzung jedoch darin, einen Breitenwert oder einen Höhenwert für die Bildbeschriftung festzulegen. . Aber manchmal möchten wir die Breite und Höhe des Bildes überhaupt nicht einschränken. Was wir brauchen, ist, dass sich das Bild selbst an seine eigene Größe anpassen kann.

模式	说明
scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	宽度不变，高度自动变化，保持原图宽高比不变

Im widthFix-Modus müssen Sie zuerst einen Breitenwert festlegen. Was passiert, wenn das resultierende Bild kleiner als die angegebene Breite ist? Zu diesem Zeitpunkt wird das Bild gestreckt.

(wird häufig in Artikeln verwendet, da die Abbildungen im Artikel möglicherweise kleiner als die Standardbreite sind, wie z. B. gängige Emoticons).

Tatsächlich reserviert das Bild im obigen Tag eine Funktion bindLoad für uns. Werfen wir einen Blick darauf, wie ich Anpassungsfähigkeit unterstütze.

Es gibt eine Voraussetzung: Wenn mehrere Bilder vorhanden sind, müssen Sie den Positionsindex dieses Bildes kennen. Wir verwenden diese Position, um die Breite und Höhe des Bildes zu speichern.

Wenn unser Bild nicht nur die Breite, sondern auch den Höhenwert begrenzt, begrenzen wir beispielsweise die maximale Höhe und so weiter. Dann muss unsere imageLoad-Funktion so angepasst werden, dass sie entsprechend ihrem Seitenverhältnis ausgegeben wird.

<image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg" bindLoad="imageLoad" style="width:{{imageSize[0].width}}rpx; 
height:{{imageSize[0].height}}rpx" data-index="0" mode="scaleToFill"/>
<image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg" bindLoad="imageLoad" style="width:{{imageSize[1].width}}rpx; 
height:{{imageSize[1].height}}rpx" data-index="1" mode="scaleToFill"/>

var px2rpx = 2, windowWidth=375;
page({
 data:{
 imageSize:{}
 },
 onLoad:function(options){
 wx.getSystemInfo({
 success: function(res) {
 windowWidth = res.windowWidth;
 px2rpx = 750 / windowWidth;
 }
 })
 },
 imageLoad:function(e){
 //单位rpx
 var originWidth = e.detail.width*px2rpx, 
 originHeight = e.detail.height*px2rpx,
 ratio = originWidth/originHeight;
 var viewWidth = 710,viewHeight//设定一个初始宽度
 //当它的宽度大于初始宽度时，实际效果跟mode=widthFix一致
 if(originWidth>= viewWidth){
 //宽度等于viewWidth,只需要求出高度就能实现自适应
 viewHeight = viewWidth/ratio;
 }else{
 //如果宽度小于初始值，这时就不要缩放了
 viewWidth = originWidth;
 viewHeight = originHeight;
 }
 var imageSize = this.data.imageSize;
 imageSize[e.target.dataset.index] = {
 width:viewWidth,
 height:viewHeight
 }
 this.setData({
 imageSize:imageSize
 })
 }
})

Anhang: Kleine Bildvorschau, Vollbildmodus aufrufen.

imageLoad:function(e){
 var originWidth = e.detail.width * px2rpx,
 originHeight=e.detail.height *px2rpx,
 ratio = originWidth/originHeight ;
 var viewWidth = 220,viewHeight = 165, viewRatio = viewWidth/viewHeight;
 if(ratio>=viewRatio){
 if(originWidth>=viewWidth){
 viewHeight = viewWidth/ratio;
 }else{
 viewWidth = originWidth;
 viewHeight = originHeight
 }
 }else{
 if(originWidth>=viewWidth){
 viewWidth = viewRatio*originHeight
 }else{
 viewWidth = viewRatio*originWidth;
 viewHeight = viewRatio*originHeight;
 }
 }
 var image = this.data.imageSize;
 image[e.target.dataset.index]={
 width:viewWidth,
 height:viewHeight
 }
 this.setData({
 imageSize:image
})
},

Verwenden Sie die API, um Bilder in der Vorschau anzuzeigen. Im Folgenden finden Sie den entsprechenden Code, den entsprechenden Stilteil und das entsprechende Layout.

HTML-Code: wx.previewImage(OBJECT)

JS

<view class="wrap">
 <image wx:for="{{pictures}}" wx:key="unique" src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>

Weitere WeChat-Miniprogramme zur Implementierung der Bildanpassung (Unterstützung mehrerer Bilder) und verwandte Artikel finden Sie unter die chinesische PHP-Website!

Page({
 data: {
 pictures: [
 'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
 'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
 'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
 'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
 'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
 'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
 'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
 'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
 ]
 },
 previewImage: function(e){
 var that = this,
 index = e.currentTarget.dataset.index,
 pictures = this.data.pictures;
 wx.previewImage({
 current: pictures[index],
 urls: pictures
 })
 }
})