小程序调用图片接口API并居中显示

简介: 小程序调用图片接口API并居中显示

wxml:

    <view class='imagesize' wx:for="{{list}}" wx:key="index">
    <image src="{{list.img}}" class='in-image' >
    </image>
    </view>

js:

Page({
  data: {
    list: []
  },
  onLoad: function (options) {
    wx.request({
      url: 'https://api.apiopen.top/getImages',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log(res.data)
        this.setData({
          //第一个data为固定用法,第二个data是json中的data
          list: res.data.result[0],
        })
      }
    })
  },
})

css:

.imagesize {
  display: flex;
  justify-content: center;
}
.imagesize image {
  width: 400rpx;
  height: 400rpx;
}

注意

以上代码里面每次刷新的时候,都会随机调用接口数据

因为接口文档里面有说明,传0或者不传会随机推荐图片

所以我们在掉接口的时候可以在url后面绑定参数:

url: 'https://api.apiopen.top/getImages?page=1&count=2',
相关文章
|
12天前
|
JSON API 数据格式
淘宝 / 天猫官方商品 / 订单订单 API 接口丨商品上传接口对接步骤
要对接淘宝/天猫官方商品或订单API,需先注册淘宝开放平台账号,创建应用获取App Key和App Secret。之后,详细阅读API文档,了解接口功能及权限要求,编写认证、构建请求、发送请求和处理响应的代码。最后,在沙箱环境中测试与调试,确保API调用的正确性和稳定性。
|
25天前
|
监控 小程序 安全
小程序的 API 做了什么处理,能够做到全局变量的隐藏
【10月更文挑战第23天】小程序的 API 通过运行环境隔离、作用域限制、数据绑定机制、事件机制、状态管理、代码封装和模块化、安全策略和权限控制以及运行时监控和检测等多种手段来实现全局变量的隐藏。这些措施共同作用,确保了小程序的安全、稳定和可靠运行,同时也提高了开发效率和代码质量。
|
24天前
|
供应链 数据挖掘 API
电商API接口介绍——sku接口概述
商品SKU(Stock Keeping Unit)接口是电商API接口中的一种,专门用于获取商品的SKU信息。SKU是库存量单位,用于区分同一商品的不同规格、颜色、尺寸等属性。通过商品SKU接口,开发者可以获取商品的SKU列表、SKU属性、库存数量等详细信息。
|
25天前
|
JSON API 数据格式
店铺所有商品列表接口json数据格式示例(API接口)
当然,以下是一个示例的JSON数据格式,用于表示一个店铺所有商品列表的API接口响应
|
1月前
|
编解码 监控 API
直播源怎么调用api接口
调用直播源的API接口涉及开通服务、添加域名、获取API密钥、调用API接口、生成推流和拉流地址、配置直播源、开始直播、监控管理及停止直播等步骤。不同云服务平台的具体操作略有差异,但整体流程简单易懂。
|
15天前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
643 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
1月前
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!
|
25天前
|
JSON 前端开发 JavaScript
API接口商品详情接口数据解析
商品详情接口通常用于提供特定商品的详细信息,这些信息比商品列表接口中的信息更加详细和全面。以下是一个示例的JSON数据格式,用于表示一个商品详情API接口的响应。这个示例假定API返回一个包含商品详细信息的对象。
|
1月前
|
JSON API 开发者
1688API商品详情接口如何获取
获取 1688 API 商品详情接口的步骤包括:1. 注册开发者账号;2. 了解接口规范和政策;3. 申请 API 权限;4. 获取 API 密钥;5. 实现接口调用(选择开发语言、发送 HTTP 请求);6. 处理响应数据。通过这些步骤,可以顺利调用 1688 的商品详情 API。
下一篇
无影云桌面