网络数据请求

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

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

两个限制:

① 只能请求 HTTPS 类型的接口

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

微信小程序只能请求 https 类型的接口

且需要请求的域名必须提前进行设置后,才可以通过微信小程序访问该请求

https://www.escook.cn/

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

配置 request 合法域名

注意事项

• 域名只支持 https 协议
• 域名不能使用 IP 地址 或 localhost
• 域名必须经过 ICP 备案
• 服务器域名一个月最多可申请 5 次修改

  发起 GET 请求

  JSONPlaceholder 是一个提供免费的在线 REST API 的网站，我们在开发时可以使用它提供的 url 地址测试下网络请求以及请求参数。或者当我们程序需要获取一些假数据、假图片时也可以使用它。

  网站地址：http://jsonplaceholder.typicode.com/

  嘿嘿 重要的事情说三遍

  注：如果不在wx官网网站上设置自己要用到的网站地址，在微信开发者工具里是没办法使用的。

  所以需要在第三方区域有一个后端接口服务，这里暂时使用的是一个免费的API 接口网址进行测试，注:每月只能修改5次网址接口地址

  注：如果不在wx官网网站上设置自己要用到的网站地址，在微信开发者工具里是没办法使用的。

  所以需要在第三方区域有一个后端接口服务，这里暂时使用的是一个免费的API 接口网址进行测试，注:每月只能修改5次网址接口地址

  注：如果不在wx官网网站上设置自己要用到的网站地址，在微信开发者工具里是没办法使用的。

  所以需要在第三方区域有一个后端接口服务，这里暂时使用的是一个免费的API 接口网址进行测试，注:每月只能修改5次网址接口地址

  微信小程序中有个顶级对象是 wx

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

  
  
  作者: 王鑫
  支持商业活动相关合作
  电话: 15135151098
  发起GET
  

  要和data处于同一级

  data 为发送到服务器的数据

  xxx {
    xxx
  },
  getInfor: function() {
      wx.request({
        url: 'https://example/api/get',  
        method: 'GET',
        data: {
          name: 'zs',
          age: 20
        },
        success: (res) => {
          console.log('请求成功'),
          console.log(res.data)
        },
        fail(err) {
          console.log('请求错误'),
          console.error('Error',err);
        },
        complete(res) {
          console.log("请求完成")
        }
      })
    },
    xxx {
      xxx
    },
  

  method: 'POST'
  请求方式
  

  在页面刚加载时请求数据

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

  当页面一加载，一开始，这个函数就会执行

  /**
  * 生命周期函数 -- 监听页面数据
  */
    onLoad: function (options) {
      this.getSwiperList()
      this.getGridList()
      this.getInfor()
    },
    // 获取轮播图的数据
    getSwiperList() { ...
    },
    // 获取九宫格的数据
    getGridList() { ...
    }
  }}
  

  如果后端没有https接口，仅提供http请求，也可以进行测验

  详情-> 本地设置->点击（不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS 证书 ）

  注意：

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

  网络数据请求

  关于 跨域 和 Ajax 的说明

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

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

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

  案例实现：

  首页效果以及实现

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

  ② 配置导航栏效果

  ③ 配置tabBar效果

  ④ 实现轮播图效果

  ⑤ 实现九宫格效果

  ⑥ 实现图片布局

  导航栏

  app.json -> window

  页面配置中常用的配置项

  属性	类型	默认值	描述
  navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色,如 #000000
  navigationBarTextStyle	String	white	当前页面导航栏标题颜色,仅支持 black/white
  navigationBarTitleText	String	Weixin	当前页面导航栏标题文字内容
  backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
  backgroundTextStyle	String	dark	当前页面下拉 loading 的样式,仅支持 dark/light
  enablePullDownRefresh	Boolean	false	是否 为当前页面开启下拉刷新的效果
  onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离,单位为 px

  配置tabBar

  和window窗口平级

  "tabBar": {
      "list": [
        {
          "pagePath": "pages/home/home",
          "text": "home"
          // "iconPath": "iconpath",  // 未选中时候的图标。 例如 /image/tabs/home.png
          // "selectedIconPath": "selectIconpath"   //选中时候的图标
        },
        {
          "pagePath": "pages/contact/contact",
          "text": "text"
          // "iconPath": "iconpath",
          // "selectedIconPath": "selectIconpath"
        }
      ]
    },
  

  轮播图

  https://img-blog.csdnimg.cn

  想到一个好主意,免费撸CSDN的羊毛。

  
    
    
      石头
    
    
    
      剪刀
    
    
    
      布
    
  	
  	  
  	
  
  

  获取轮播图数据的方法

  JS

  data: {
    swiperList: []
  },
  onLoad: function (option){
    this.getSwiperList()
  },
  getSwiperList(){
    wx.request() {
      url: 'https://img-blog.csdnimg.cn/xxx',
      method: 'GET',
      success: (res) => {
        console.log(res)
        this.setData({
          swiperList: res.data 
        })
      }
    }
  }
  

  wxml

  wxss

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

  实现九宫格

  https://www.escook.cn/categories

  Also Need An List

  data: {
    // 存放九宫格的列表
    gridList: []
  },
  onLoad: function (option){
    this.getSwiperList()
    this.getGridList()
  },
  // 定义一个新的函数
  // 获取九宫格数据的方法
  getGridList() {
    wx.request({
      url: 'https://www.escook.cn/categories',
      method: 'GET',
      success: (res) => {
        console.log(res)   //打印了一个对象,里面就是一个九宫格的列表
        this.setData({
          gridList: res.data
        })
      }
    })
  },
  

  wxml

  
    
      
      {{item.name}}
  
  

  wxss

  .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%;
  }