微信小プログラムは画像適応を実現する（多図対応）

WeChatウィジェットの画像の適応は、一般的なニーズであることはよく知られています。普段はWEB Viewでmax-width:100%を設定する必要があります。WeChatではwidthFixも実現できますが、画像の幅の値が設定値より大きいか、あるいは設定値以上であるか、そうでないと引っ張り変形が発生します。本文は別の種類を通じて適応します。
まず、写真のコンポーネントからの説明を見ます。
属性名
タイプ
標準値
説明
src
String
画像リソースのアドレス
モード
String
'scale ToFill'
画像のトリミング、拡大縮小モード
binderror
HandleEvent
エラーが発生した場合は、AppServiceのイベント名、イベントオブジェクトevent.detail={errMsg:'something wrong'}に投稿します。
bindload
HandleEvent
画像のロードが完了すると、AppServiceのイベント名、イベントオブジェクトevent.detail={height:'ピクチャ高度px'，width:'ピクチャ幅px'
注：イメージコンポーネントのデフォルト幅は300 px、高さは225 pxです。
modeには13のパターンがあります。そのうち4つはズームモード、9つはカットモードです。
モード
説明
scale ToFill
アスペクト比を維持しないで、画像の幅をイメージ要素を満たすまで完全に拡張します。
aspectFit
アスペクト比の拡大縮小画像を維持して、画像の長辺を完全に表示させます。つまり、完全に画像を表示することができます。
aspectFill
アスペクト比の拡大縮小画像を維持し、画像の短辺だけが完全に表示されるようにします。つまり、画像は通常水平または垂直方向だけで完全であり、他方の方向は切り取りが発生する。
widthFix
幅は変わらず、高さは自動的に変化し、原図の幅の高さ比は変わらない。
適切なスキームがある場合は、おそらくwidthFixであるが、上記のようなモードでは、画像ラベルに幅値または高さ値を設定することが要求される。しかし、時には写真の幅を制限したくないです。必要なのは写真自体が自分の大きさに合わせて適応できるということです。
widthFixモードでは先に幅を設定しなければなりません。もし出てきた写真が所与のwidthより小さい場合は？このとき、画像に引張り現象が発生します。文章によく使われていますが、文章のイラストはデフォルトの幅より小さいかもしれません。例えば、よくある表情などです。
実は上のラベルの中で、写真は私達のために関数bindLoadを残しました。これからどうやって適応をサポートしますか？
一つの前提があります。多図の場合、この画像はすべての中に位置するindexであり、この位置を通じて画像の幅と高さを保存します。

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

もし私たちの写真に幅が限定されているだけでなく、高さ値も限定されています。例えば、max-heightなどを限定します。私たちのイメージロード関数は彼らのアスペクト比で出力するように調整します。

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

付録：小さい図のプレビュー、フルスクリーンのモードに入ります。
プレビュー画像を用いたAPIは、wx.previewImage(OBJECT)以下に対応するコードであり、スタイルの部分は、自分でレイアウトする。
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
 })
 }
})

締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてほしいです。もし疑問があれば、メッセージを残して交流してもいいです。