L'applet WeChat réalise l'adaptation d'image (prend en charge plusieurs images)

Cet article présente principalement des informations pertinentes sur la façon dont l'applet WeChat peut implémenter l'adaptation d'image. La méthode présentée dans l'article convient également à plusieurs images. Les amis dans le besoin peuvent s'y référer.

Tout le monde sait que l'adaptation de l'image de l'applet WeChat est une exigence relativement courante. Habituellement, dans WEBView, il suffit de définir max-width:100% Bien que widthFix puisse également être implémenté dans WeChat, il y a un défaut. l'image doit être supérieure ou égale à la valeur définie, sinon un étirement et une déformation se produiront. Cet article utilise une autre méthode pour s'adapter.

Tout d'abord, examinons quelques instructions pour le composant image :

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

Remarque : image valeurs par défaut du composant Largeur 300 px, hauteur 225 px

Le mode comporte 13 modes, dont 4 sont des modes de mise à l'échelle et 9 sont des modes de recadrage.

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

S'il existe une solution plus appropriée, c'est probablement widthFix. Cependant, dans les modes ci-dessus, la condition préalable requise est de définir une valeur de largeur ou une valeur de hauteur pour l'étiquette de l'image. . Mais parfois, nous ne voulons pas du tout limiter la largeur et la hauteur de l'image. Ce dont nous avons besoin, c'est que l'image elle-même puisse s'adapter en fonction de sa propre taille.

Le mode widthFix vous oblige à définir d'abord une valeur de largeur. Que se passe-t-il si l'image résultante est plus petite que la largeur donnée ? A ce moment, l'image sera étirée. (couramment utilisé dans les articles, car les illustrations de l'article peuvent être plus petites que la largeur par défaut, comme les émoticônes courantes).

En fait, dans la balise ci-dessus, l'image nous réserve une fonction bindLoad. Jetons un coup d'œil à la manière dont je soutiens l'adaptabilité.

Il y a un principe, c'est-à-dire que lorsqu'il y a plusieurs images, vous devez connaître l'index de position de cette image parmi elles. Nous utilisons cette position pour enregistrer la largeur et la hauteur de l'image.

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

Si notre image limite non seulement la largeur, mais limite également la valeur de la hauteur, par exemple, nous limitons la hauteur maximale et ainsi de suite. Ensuite, notre fonction imageLoad doit être ajustée pour afficher la sortie en fonction de leur rapport hauteur/largeur.

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

Annexe : Aperçu en petite image, passez en mode plein écran.

Utilisez l'API pour prévisualiser les images, wx.previewImage(OBJECT)Ce qui suit est le code correspondant, la partie de style et la mise en page par vous-même.

Code HTML :

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

JS

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

Pour plus d'articles sur la mise en œuvre de l'applet WeChat de l'adaptation d'image (prenant en charge plusieurs images), veuillez faire attention au PHP Site chinois !