微信小程序开发学习笔记——4.8【小案例】初识wx.request获取网络请求并渲染至页面

>>跟着b站up主"咸虾米_"学习微信小程序开发中,把学习记录存到这方便后续查找。

课程连接:4.8.【小案例】初识wx.request获取网络请求并渲染至页面_哔哩哔哩_bilibili

up主提供的网络请求常用接口:

随机猫咪,用来获取一些图片

https://api.thecatapi.com/v1/images/search?limit=1

注意:limit=1则只能获取1张图,设置为非1的任意数可以获取多张图,该小案例设置的是2。

一、wx.request

网络 / 发起请求 / wx.request (qq.com)

二、代码

1、api2.wxml

html 复制代码
<view class="out">
  <view class="box" wx:for="{{listArr}}" wx:key="id">
    <view class="pic">
      <image src="{{item.url}}" mode="aspectFill"></image><!--aspectFill显示最短边,多的会裁掉-->
    </view>
    <view class="name">
      姓名:{{item.id}}
    </view>
  </view>
</view>

组件中用wx:for来遍历listArr将图片展出。 item为数组当前项的默认变量名。

2、api2.js中添加如下代码

javascript 复制代码
Page({
  data: {
    listArr:[]
  },

  onLoad(options) {
    this.getData();
  },
  getData(){
    wx.request({
      url: 'https://api.thecatapi.com/v1/images/search?limit=2',
      success:res=>{
        console.log(res.data);
        this.setData({
          listArr:res.data
        })
      }
    })
  },

})

用wx.request发起 HTTPS 网络请求,url为上述up主提供的网络请求常用接口随机猫咪,成功后返回数据data如下图,并将数据赋值给listArr,共有10个对象。

3、api2.wxss

css 复制代码
/* pages/api2/api2.wxss */
.out{
  padding:30rpx;
}

.out .box{
  width: 100%;
  height: 500rpx;
  border: 1px solid red;
  margin-bottom: 30rpx;
}
.out .box .pic{
  width: 100%;
  height: 400rpx;
}
.out .box .pic image{
  width: 100%;
  height: 100%;
}
.out .box .name{
  text-align: center;
  line-height: 100rpx;
}

4.结果

相关推荐
新子y5 分钟前
【小白笔记】「while」在程序语言中的角色
笔记·python
社会底层无业大学生12 分钟前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北24 分钟前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节
井队Tell31 分钟前
打造高清3D虚拟世界|零基础学习Unity HDRP高清渲染管线(第五天)
学习·3d·unity
狡猾大先生1 小时前
ESP32S3-Cam实践(OLED表情动画-手搓)
笔记·1024程序员节
sensen_kiss1 小时前
INT301 Bio-computation 生物计算(神经网络)Pt.2 监督学习模型:感知器(Perceptron)
神经网络·学习·机器学习
2301_800256112 小时前
地理空间数据库作业笔记——查询最偏僻的城市
数据库·笔记·sql·postgresql·1024程序员节
Han.miracle2 小时前
数据结构——排序的超级详解(Java版)
java·数据结构·学习·算法·leetcode·排序算法·1024程序员节
电子云与长程纠缠2 小时前
Blender入门学习06 - 粒子
学习·blender·1024程序员节
Cathy Bryant3 小时前
线性代数直觉(四):找到特征向量
笔记·神经网络·考研·机器学习·数学建模