微信小程序如何调用图片接口API并居中显示

微信小程序中的美图展示：调用图片接口API并实现居中显示

在完成天气接口demo之后，让我们尝试调用美图接口API来展示图片。本文将指导你如何在微信小程序中调用图片接口API并使得图片在界面中居中显示。

一、WXML部分

在WXML文件中，我们创建一个名为imagesize的视图，并使用wx:for指令遍历list数据。对于每个元素，我们创建一个带有类名in-image的图像标签。

```html

```

二、JS部分

在Page中，我们首先在data中定义一个空数组list。在onLoad函数中，我们使用wx.request方法调用美图接口API。在请求成功后，我们将返回的数据中的图片信息设置到list数组中。

```javascript

Page({

data: {

list: []

},

onLoad: function (options) {

wx.request({

url: '

header: {

'content-type': 'application/json'

},

success: res => {

console.log(res.data);

this.setData({

list: res.data.result[0], //这里假设返回的是一个数组，我们只取第一张图片信息作为示例

});

}

});

}

});

```

三、CSS部分

在CSS中，我们为imagesize类设置display为flex，并使用justify-content属性将其居中。然后，我们为图像设置宽度和高度。

```css

.imagesize {

display: flex;

justify-content: center;

}

.imagesize image {

width: rpx;

height: rpx;

}

```

四、注意事项及扩展知识

需要注意的是，以上代码中的接口请求每次刷新时都会随机调用接口数据。因为接口文档中说明，传递0或不传递参数会随机推荐图片。我们在调用接口时可以在URL后面绑定参数，例如：url: '