微信小程序-网络请求

本文涉及的产品
.cn 域名,1个 12个月
简介: 微信小程序-网络请求

网络请求


请注意:小程序只支持httpswss(WebSocket,其具备ws协议与wss协议)协议的网络请求。但是允许开发者在开发环境下使用http请求,不过在最终上线时必须要修改为小程序支持的协议类型。


1、网络请求的相关设置

虽然小程序只支持httpswss协议的网络请求。但是允许开发者在开发环境下使用http请求。如果需要在开发环境下使用http协议进行开发测试并且不对域名合法性进行校验,请记得开启支持:

23568c90c3a514ba184fab408f077480.png

最终上线时,需要有https的接口服务,并且需要在小程序官方后台中设置接口域名(为了安全,添加域名白名单),设置路径:小程序管理后台 / 开发 / 开发设置 / 服务器域名。如果条件允许,建议尽量在开发时就使用符合要求的域名配置而不是等到上线的时候再返工。


如果使用的测试号,请在测试号管理页面添加白名单。


611d02a6e3b0f7dc3147c5b0a9b64bc5.png

af9bd305a3314d2d2e10eb37041e7896.png


域名可以使用给定测试域名:

  • 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
                })
            }
        })
    }
})


目录
相关文章
|
3月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
4月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
167 0
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的网络小说微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的网络小说微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的网络办公系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的网络办公系统附带文章和源代码部署视频讲解等
52 8
|
6月前
|
小程序 开发工具
微信小程序开发工具第一次使用,网络连接不上怎么办
微信小程序开发工具第一次使用,网络连接不上怎么办
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生计算机基础网络教学系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生计算机基础网络教学系统附带文章源码部署视频讲解等
32 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的网络相册附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的网络相册附带文章和源代码部署视频讲解等
30 0
|
6月前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的网络小说微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的网络小说微信小程序的详细设计和实现
38 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的网络游戏交易系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的网络游戏交易系统附带文章和源代码部署视频讲解等
43 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的企业内部小型网络管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的企业内部小型网络管理系统附带文章源码部署视频讲解等
33 0