一、基础语法

小程序中提供了 wx.request() 方法来发送网络请求。该方法接收一个对象作为参数。
示例代码：

  1. wx.request({
  2.     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
  3.     method: 'GET',
  4.     success: (res) => {
  5.         console.log(res.data.message);
  6.     }
  7. })

1、设置页面的方法

在页面 .js 文件中，如果要设置页面自己的方法，可以直接在 Page 对象中添加方法即可。
示例代码：

  1. Page({
  2.     getSwiperData() {
  3.         wx.request({
  4.             url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
  5.             method: 'GET',
  6.             success: (res) => {
  7.                 console.log(res.data.message);
  8.                 this.setData({
  9.                     swiperData: res.data.message
  10.                 });
  11.             }
  12.         })
  13.     }
  14. })

调用时，通过 this 调用即可：

  1. Page({
  2.     onLoad() {
  3.         this.getSwiperData();
  4.     }
  5. })

2、配置合法域名

在小程序中运行以上代码，调试器中可能出现类似以下报错，导致我们无法成功获取到数据：
网络请求 - 图1
解决方案有两种。

1）跳过域名校验

我们可以在微信开发者工具中，临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。
网络请求 - 图2

2）配置合法服务器域名

服务器域名请在 「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置，参考下图：
网络请求 - 图3
把当前服务器地址添加成合法域名，然后重启小程序开发者工具即可生效。

二、组件传值

页面中可以使用自定义组件，同时可以给组件中传递数据。

1、传递数据

例如，首页将 swiperData 数据传递给 <home-swiper> 组件：

  1. <home-swiper swiperData="{{swiperData}}"></home-swiper>

2、接收数据

子组件中，通过 properties 属性来接收外部传递的数据：

  1. Component({
  2.     properties: {
  3.         swiperData: Array
  4.     }    
  5. })

子组件接收到数据，就可以正常地进行数据渲染了。