【微信小程序】网络数据请求以及相关案例实践

1.网络数据请求

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

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下

两个限制：

① 只能请求 HTTPS 类型的接口

② 必须将接口的域名添加到信任列表中

2. 配置 request 合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口

配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

注意事项：

① 域名只支持 https 协议

② 域名不能使用 IP 地址或 localhost

③ 域名必须经过 ICP 备案

④ 服务器域名一个月内最多可申请 5 次修改

3. 发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下：

 // 发起get请求
  getInfo(){
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method:"GET",
      data:{
        name:'zs',
        age:18
      },
      success:(res)=>{
        console.log(res);
      }
    })
  },

4. 发起 POST 请求

调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求，示例代码如下：

  // 发起post请求
  postInfo(){
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method:"POST",
      data:{
        name:'zs',
        age:18
      },
      success:(res)=>{
        console.log(res);
      }
    })
  },

5. 在页面刚加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件

中调用获取数据的函数，示例代码如下：

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

5. 跳过 request 合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过request 合法域名的校验。

注意：

跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

6. 关于跨域和 Ajax 的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以

小程序中不存在跨域的问题。

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所

以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。

2.案例 - 本地生活-首页

1. 首页效果以及实现步骤

① 新建项目并梳理项目结构

② 配置导航栏效果

③ 配置 tabBar 效果

④ 实现轮播图效果

⑤ 实现九宫格效果

⑥ 实现图片布局

2. 接口地址

① 获取轮播图数据列表的接口

• 【GET】https://www.escook.cn/slides

② 获取九宫格数据列表的接口

• 【GET】https://www.escook.cn/categories

app.json
{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
      "list": [{
          "pagePath": "pages/home/home",
          "text": "首页",
          "iconPath": "/images/tabs/home.png",
          "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
    },
    {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
    }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

// pages/home/home.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        //存放轮播图数据列表
        swiperlist:[],
        //存放九宫格数据列表
        gridlist:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getSwiperList(),
        this.getGridlist()
    },
    //获取轮播图数据请求方法
    getSwiperList(){
        wx.request({
          url: 'https://www.escook.cn/slides',
          method:"GET",
          success:(res)=>{
             // console.log(res);
              this.setData({
                swiperlist:res.data
              })
          }
        })
    },
    //获取九宫格数据方法
    getGridlist(){
        wx.request({
          url: 'https://www.escook.cn/categories',
          method:"GET",
          success:(res)=>{
             // console.log(res);
              this.setData({
                gridlist:res.data
              })
          }
        })
    },

})

<!--pages/home/home.wxml-->
<!-- 轮播图区域 -->
<swiper indicator-dots circular>
    <swiper-item wx:for="{{swiperlist}}" wx:key="id">
        <image src="{{item.image}}"></image>
    </swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="grid-list">
    <view class="grid-item" wx:for="{{gridlist}}" wx:key="id">
        <image src="{{item.icon}}"></image>
        <text>{{item.name}}</text>
    </view>
</view>

<!-- 图片区域 -->
<view class="img-box">
    <image src="/images/link-01.png" mode="widthFix"></image>
    <image src="/images/link-02.png" mode="widthFix"></image>
</view>

/* pages/home/home.wxss */
swiper{
    height: 350rpx;
}

swiper image{
    width: 100%;
    height: 100%;
}

.grid-list{
    display: flex;
    flex-wrap: wrap;
    border-left: 1rpx solid #efefef;
    border-top: 1rpx solid #efefef;
}
.grid-item{
    width: 33.33%;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1rpx solid #efefef;
    border-bottom: 1rpx solid #efefef;
    box-sizing: border-box;
}

.grid-item image{
    width: 60rpx;
    height: 60rpx;
}

.grid-item text{
    font-size: 24rpx;
    margin-top: 10rpx;
}

.img-box{
    display: flex;
    padding: 20rpx 10rpx;
    justify-content: space-around;
}

.img-box image{
    width: 45%;
}