l要完成这个任务我们首先要学习以下知识点

1、小程序页面周期

2、网络编程框架介绍

2、JSON格式和解析

3、发起网络请求

• 任务要求
  

    轮播图的图片路径已经事先存在了https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata

  
  

  
  

• 完成对网络资源的请求，将图片显示在轮播图上

  步骤一：打开存放图片路径的网络链接，观察图片资源的存放格式

步骤二:在微信小程序的页面的js文件中的onload方法中使用wx.request请求网络资源，资源请求成功后，调用回调函数，将从网络链接中请求成功的数据用console.log 打印在控制台，并观察需要用到的图片资源存放在哪里。

步骤三：在页面文件的js文件中data中，定义一个swiperList数组用来存放从网络请求的资源，并在wx.request中的成功后的回调函数中完成对swiperList的赋值，

步骤四：在页面文件的wxml文件中完成对swiperList的绑定，把轮播图完成。

• 拓展任务：完成导航栏的制作

  
  

  
  

导航栏数据的接口文档如下

请求URL：

• https://api-hmugo-web.itheima.net/api/public/v1/home/catitems

请求方式：

• GET

参数： 无

返回示例

{
    "message": [
        {
            "name": "分类",
            "image_src": "https://api-hmugo-web.itheima.net/pyg/icon_index_nav_4@2x.png",
            "open_type": "switchTab",
            "navigator_url": "/pages/category/index"
        },
        {
            "name": "秒杀拍",
            "image_src": "https://api-hmugo-web.itheima.net/pyg/icon_index_nav_3@2x.png"
        },
        {
            "name": "超市购",
            "image_src": "https://api-hmugo-web.itheima.net/pyg/icon_index_nav_2@2x.png"
        },
        {
            "name": "母婴品",
            "image_src": "https://api-hmugo-web.itheima.net/pyg/icon_index_nav_1@2x.png"
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}