WeChat 애플릿은 이미지 적응을 구현합니다(여러 이미지 지원)

이 기사에서는 WeChat 애플릿이 이미지 적응을 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 기사에 소개된 방법은 여러 이미지에도 적합합니다. 필요한 친구들이 함께 참고해 보세요.

WeChat 애플릿 이미지 적용은 상대적으로 일반적인 요구 사항이라는 것을 누구나 알고 있습니다. 일반적으로 WEBView에서는 max-width:100%만 설정하면 됩니다. WeChat에서도 widthFix를 구현할 수 있지만 너비 값에 한 가지 결함이 있습니다. 그림은 설정된 값보다 크거나 같아야 합니다. 그렇지 않으면 늘어나거나 변형됩니다. 이 기사에서는 다른 방법을 사용하여 조정합니다.

먼저 이미지 구성 요소에 대한 몇 가지 지침을 살펴보겠습니다.

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

참고: image 구성요소 기본값 너비 300px, 높이 225px

모드에는 13개의 모드가 있으며 그 중 4개는 크기 조정 모드이고 9개는 자르기 모드입니다.

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

더 적합한 솔루션이 있다면 아마도 widthFix일 것입니다. 그러나 위 모드에서는 필수 전제 조건은 이미지 라벨의 너비 값 또는 높이 값을 설정하는 것입니다. . 그러나 때로는 그림의 너비와 높이를 전혀 제한하고 싶지 않을 때도 있습니다. 우리에게 필요한 것은 그림 자체가 자체 크기에 따라 조정될 수 있다는 것입니다.

widthFix 모드에서는 먼저 너비 값을 설정해야 합니다. 결과 이미지가 지정된 너비보다 작으면 어떻게 되나요? 이때 이미지가 늘어납니다. (기사 내 일러스트가 일반적인 이모티콘 등 기본 너비보다 작을 수 있기 때문에 기사에서 자주 사용됩니다.)

사실 위 태그의 그림에는 우리를 위해 바인딩로드(bindLoad) 함수가 예약되어 있습니다. 적응성을 어떻게 지원하는지 살펴보겠습니다.

전제가 있습니다. 즉, 여러 장의 사진이 있는 경우 그 중에서 해당 사진의 위치 인덱스를 알아야 합니다. 이 위치를 사용하여 사진의 너비와 높이를 저장합니다.

<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"/>

rrree

이미지가 너비뿐만 아니라 높이 값도 제한하는 경우, 예를 들어 max-height 등을 제한합니다. 그런 다음 imageLoad 함수를 종횡비에 따라 출력하도록 조정해야 합니다.

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

부록: 작은 사진 미리보기, 전체 화면 모드로 전환.

API를 이용해 이미지 미리보기, wx.previewImage(OBJECT)다음은 해당 코드, 스타일 부분, 레이아웃을 직접 작성해본 것입니다.

html 코드:

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

JS

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

이미지 적응(여러 이미지 지원)을 구현하는 더 많은 WeChat 미니 프로그램과 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요. !