微信小程序_7,网络数据请求

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制: 1.只能请求HTTPS类型的接口 2.必须将接口的域名添加到信任列表

添加到信任列表:

2.配置request合法域名:

需求描述: 假设在自己的微信小程序中,希望请求https://www.escook.cn/域名下的接口 配置步骤:登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意事项: 1.域名只支持https协议 2.域名不能使用IP地址或localhost 3.域名必须经过ICP备案 4.服务器域名一个月内最多可申请5次修改

下面这里是有问题的,实际上是每个月只能修改五次:

3.发起GET请求:

调用微信小程序提供的wxrequest()方法,可以发起GET数据请求,示例代码如下: WXML:

<view>
  <button type="primary" bindtap="getRequest">发起get请求</button>
</view>

.js:

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

请求:

4.发起post请求

WXML:

  <button type="primary" bindtap="postRequest">发起post请求</button>

.js:

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

post:

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

在很多情况下,我们需要在页面刚加载时,自动请求一些初始化的数据,此时需要在页面的onload事件中调用获取数据的函数,示例代码如下: .js:

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

这里的this.getRequest()是:

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

运行:

5.跳过request合法域名校验:

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

6.关于跨域和Ajax的说明

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

Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做"发起Ajax请求",而是叫做"发起网络请求"