黑马程序员微信小程序学习总结5.网络数据请求和结合wx:for使用轮播图

小程序中的网络数据请求限制

如何添加后端域名

注意：目前好像一个月可以修改50次了（2024年2月）

发起GET请求（POST同理）

注意：此域名域名已经不能使用

演示代码：
wxml：

<!--pages/getRe/getRe.wxml-->
<button type="primary" bind:tap="getInfo">发送get请求</button>
<view>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</view>
<button type="primary" bind:tap="postInfo">发送post请求</button>

.js：

// pages/getRe/getRe.js
Page({
  getInfo(){
    console.log("调用getInfo");
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method:"GET",
      data:{
        name:"zs",
        age:25
      },
      success:(res) => {
        console.log(res);
      }
    })

  },
  postInfo(){
    console.log("调用getInfo");
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method:"POST",
      data:{
        name:"zs",
        age:25
      },
      success:(res) => {
        console.log(res);
      }
    })

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

页面刚加载的时候请求数据

跳过request合法域名校验

关于跨域和Ajax

结合wx:for使用轮播图

wxml：

<swiper class="swiperfor" autoplay="true" circular="true" indicator-dots="true">
  <swiper-item wx:for="{{sw}}" wx:key="id">
    <image src="{{item.image}}" class="im"/>
  </swiper-item>
</swiper>

wxss：

.swiperfor {
  height: 350rpx;
}
.im {
  height: 100%;
  width: 100%;
}

对image设置：height: 100%;width: 100%;时，是将图像铺满父元素，若父元素没有高度就不会显示。swiper-item是个例外，因为轮播图的高度是由swiper决定而不是swiper-item，swiper-item设置高度没有任何效果

js中的data：

其中sw的数据可以通过后端请求获取

res.data如：

九宫格

具体看课，这里只有笔记
数据：

wxml：

wxss：