wx小程序从服务器请求我的课程列表

这两天写了一个wx小程序的我的课程的页面，比较简单，但是关联服务器是第一次请求，所以和大家分享一下

<view class="body">
    <view class="title">我的课程</view>
    <view class="line2"></view>
    <view   wx:for="{{RSList}}" wx:key="{{index1}}">
        <view class="RS">
        <view class="RS_img">
          <view class="RS_img_text">{{item.text1}}</view>
          <progress percent = "{{item.pro}}" show-info="true" color="red" stroke-width="10" activeColor="green" backgroundColor="#ccc" />
        </view>
        <view class="line"></view>
        <view class="RS_S1">
          <view>笔记</view>
          <view>{{item.text2}}</view>   
        </view>
        <view class="line"></view>
        <view class="RS_S3" catchtap="{{item.tocatch}}">继续学习</view>
        </view>
        <view class="line2"></view>
    </view>
</view>

	.body{
  height: 100%;
  width: 100%;
}
.line{
  margin-left: 3%;
  margin-right: 3%;
  background-color: gray;
  width: 3rpx;
}
.line2{
  margin-top: 40rpx;
  background-color: gray;
  width: 100%;
  height: 3rpx;
}
.RS{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100rpx;
  margin-top: 50rpx;
}
.RS_img{
  width: 55%;
}
.RS_img_text{
  color: black;
  font: 100rpx;
  margin-right: 20%;
}
.RS_S1{
  margin-top:10rpx;
  width: 20%;
  text-align: center
}
.RS_S3{
  width: 25%;
  color: blue;
  margin-top: 20rpx;
  text-align: left;
}
.title{
  width: 100%;
  text-align: center;
  height: 80rpx;
  font-size: 60rpx;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    RSList: [
      {
        text1: "奥特曼打怪兽",
        text2: 0,
        pro: 30,
        tocatch:"",
      },
      {
        text1: "怪兽打奥特曼",
        text2: 1,
        pro: 10,
        tocatch:"",
      }
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  getRSList() {
    let that = this;
    wx.request({
      url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        // success 
        // console.log(res);
        if (res.data.code === 0) {
          that.setData({
            RSList: res.data.data.RSList
          })
        }

      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  onLoad: function (options) {
    this.getRSList();
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

{
  "usingComponents": {}
}

###效果图