微信小程序 - 05_网络数据请求（wx.request、get/post、跳过request合法域名校验、案例练习）

欢迎访问笔者个人技术博客： http://rukihuang.xyz/

01 请求限制

• 处于安全性的考虑，小程序官方对数据接口的请求做出了两个限制：
  • 只能请求HTTPS类型的接口
  • 必须将接口的域名添加到信任列表中

02 配置request合法域名

• 配置步骤：登陆微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
• 注意事项：
  • 域名只支持https协议
  • 域名不能使用ip地址或者localhost
  • 域名必须经过icp备案
  • 服务器域名一个月最多可以申请5次修改

03 发起get请求

• 调用微信小程序提供wx.request()方法，可以发起get数据请求

wx.request({
    url: 'https://www.escook.cn/api/get',//请求的接口地址，必须基于https协议
    method: 'get', //请求的方式
    data:{ //发送到服务器的数据
        name: 'zs',
        age: 22
    },
    success: (res) => {//请求成功之后的回调函数
        console.log(res)//查看真实数据 console.log(res.data)
    }
})

04 发起post请求

wx.request({
    url: 'https://www.escook.cn/api/post',//请求的接口地址，必须基于https协议
    method: 'post', //请求的方式
    data:{ //发送到服务器的数据
        name: 'zs',
        age: 22
    },
    success: (res) => {//请求成功之后的回调函数
        console.log(res)//查看真实数据 console.log(res.data)
    }
})

05 页面刚加载时就请求数据

• 在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化数据。此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：

/**
* 生命周期函数——监听页面加载
*/
onLoad: function(options) {
    this.getInfo()
    this.postInfo()
}

06 跳过request合法域名校验

• 开启开发环境不检验请求域名、TLS版本及HTTPS证书，跳过request合法域名的校验。

• 注意：跳过合法域名校验，只在开发和测试阶段使用

07 跨域和Ajax

• 跨域问题只存在于基于浏览器的web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
• Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。

08 练习

• app.json

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
  ],
  "window":{
    "navigationBarBackgroundColor": "#025D54",
    "navigationBarTitleText": "在线测试",
    "navigationBarTextStyle":"white",
    
    "backgroundColor": "#efefef",
    "backgroundTextStyle":"dark",
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "home",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "message",
        "iconPath": "images/message.png",
        "selectedIconPath": "images/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "contact",
        "iconPath": "images/contact.png",
        "selectedIconPath": "images/contact-active.png"
      }
    ]
  },
  
  "style": "v2",

  "sitemapLocation": "sitemap.json",

  "lazyCodeLoading": "requiredComponents"
  
}

• wxml

<!-- 轮播图 -->
<swiper indicator-dots="true" circular="true">
    <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>

• wxss

/* 轮播图 */
swiper {
    height: 350rpx;
}

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

/* 九宫格 */
.grid-list {
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    border-top: 1rpx solid #efefef ;
    border-left: 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: 10rpx;
}

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

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

• js

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

    /**
     * 页面的初始数据
     */
    data: {
        //存放轮播图
        swiperList: [],
        //存放九宫格类别数据
        gridList: []
    },

    //获取轮播图地址
    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
              })
          }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.getSwiperList()
        this.getGridList()
    }
})