微信小程序-网络请求

简介: 微信小程序-网络请求

网络请求


请注意:小程序只支持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
                })
            }
        })
    }
})


相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
1月前
|
移动开发 安全 小程序
mpaas常见问题之小程序容器,跑起来后一直提示 "网络不给力, 请稍后再试"如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
24 0
|
1月前
|
小程序 前端开发 程序员
【微信小程序】-- 网络数据请求(十九)
【微信小程序】-- 网络数据请求(十九)
|
6月前
|
小程序 API
【 uniapp - 黑马优购 | 首页】小程序首页全局配置(home、网络请求、轮播图、分类...)
【 uniapp - 黑马优购 | 首页】小程序首页全局配置(home、网络请求、轮播图、分类...)
80 0
|
8月前
|
存储 小程序 前端开发
小程序封装网络请求和拦截器
在开发小程序时,实际上我们通常需要封装网络请求和拦截器,以实现统一处理状态码和存储用户登录信息等功能。这样可以提高开发效率,减少代码重复,同时也可以提高代码的可维护性和可读性。
147 0
|
5月前
|
网络协议 Java 关系型数据库
微信支撑10亿用户背后核心技术:亿级流量Java并发与网络编程实战
大家可能不知道,支撑微信10亿用户之后,最基础也是最核心的技术是什么?那就是网络编程。 越是大型互联网通讯项目,越是对网络编程的落地要求越高。落地,意味着对实战的要求更高。
|
7月前
|
小程序 网络安全
当后台架设好了域名正常,但是小程序真机调试出现网络异常,模拟确实正常可以使用
当后台架设好了域名正常,但是小程序真机调试出现网络异常,模拟确实正常可以使用
103 0
|
8月前
|
小程序 前端开发 程序员
小程序----网络数据请求
小程序----网络数据请求
|
9月前
|
小程序
微信小程序发起网络请求数据并展示
微信小程序发起网络请求数据并展示
116 0
|
10月前
|
JSON JavaScript 小程序
微信小程序网络请求api中HTML格式问题
微信小程序网络请求api中HTML格式问题
106 0
|
14天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。

热门文章

最新文章