【微信小程序】网络请求

环境:微信小程序开发工具

测试api(随机获取猫咪靓照):https://api.thecatapi.com/v1/images/search?limit=2

示例:

完整代码

request.wxml

html 复制代码
<button bind:tap="requestBtn" type="primary">网络请求</button>

<view class="box" wx:for="{{imgArr}}" wx:key="id">
<text>图片id:{{index+1}}</text>
<image src="{{item.url}}" mode="widthFix"/>
</view>
css 复制代码
/* pages/request/request.wxss */
.box{
  margin: 0 auto;
  text-align: center;
  border: 1px solid red;
  margin-bottom: 25rpx;
}
javascript 复制代码
// pages/request/request.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
imgArr:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  requestBtn(){
    wx.request({
      url: 'https://api.thecatapi.com/v1/images/search?limit=2',
      success:res=>{
        this.setData({
          imgArr:res.data
        })
      console.log(this.data.imgArr);
      }
    })
    
  },
相关推荐
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac6 小时前
微信小程序的组件
微信小程序
stormjun7 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck7 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23410 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong10 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟10 小时前
小程序跳转另一个小程序
小程序
13 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
16 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji16 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序