网络请求
请注意:小程序只支持
https
和wss(WebSocket,其具备ws协议与wss协议)
协议的网络请求。但是允许开发者在开发环境下使用http
请求,不过在最终上线时必须要修改为小程序支持的协议类型。
1、网络请求的相关设置
虽然小程序只支持https
和wss
协议的网络请求。但是允许开发者在开发环境下使用http
请求。如果需要在开发环境下使用http
协议进行开发测试并且不对域名合法性进行校验,请记得开启支持:
最终上线时,需要有https
的接口服务,并且需要在小程序官方后台中设置接口域名(为了安全,添加域名白名单),设置路径:小程序管理后台 / 开发 / 开发设置 / 服务器域名。如果条件允许,建议尽量在开发时就使用符合要求的域名配置而不是等到上线的时候再返工。
如果使用的测试号,请在测试号管理页面添加白名单。
域名可以使用给定测试域名:
- https://api.i-lynn.cn
- https://mpapi.iynn.cn
2、发起网络请求
在小程序的wx
对象中,其已经提供了网络请求方法。
语法:wx.request(请求参数的对象)
文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
示例代码
wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '', y: '' }, method: "GET", header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } })
注:在发起请求之前,需要在app.json文件中设置request请求的超时时间以防止网络堵塞导致程序卡死,时间单位为毫秒:
"networkTimeout": { "request": 10000 }
wx.request()的方法返回的对象信息包含如下几个属性:
- cookies:返回的cookies
- data:响应体
- header:响应头
- statusCode:http状态码
- errMsg:错误信息
例如:点击按钮发送一个网络请求请求数据并循环渲染
wxml代码
<!--pages/request/request.wxml--> <text>pages/request/request.wxml</text> <button type="primary" bindtap="send">发送请求</button> <block wx:for="{{data}}" wx:key="index"> <view>地区id:{{item.id}},地区名:{{item.name}}</view> </block>
js代码
Page({ /** * 页面的初始数据 */ data: { data: [] }, /** * 发送网络请求 */ send() { wx.request({ // 请求地址 url: 'https://api.i-lynn.cn/area', // 请求方式 method: "GET", // 请求参数 data: { id: 1 }, // 成功请求的回调 success: (res) => { console.log(res); this.setData({ data: res.data }) } }) } })