微信小程序网络数据请求服务实现详解

 更新时间:2022年10月25日 14:28:38   作者:小余努力搬砖  
这篇文章主要介绍了微信小程序网络数据请求服务,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

一、小程序中网络数据请求的限制

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

两个限制:

1.只能请求HTTPS类型的接口

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

二、配置request合法域名

需求描述:假设在自己的微信小程序中,希望请求https:/ /www.yzq2ty.cn/域名下的接口

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

注意事项:

1.域名只支持https协议

2.域名不能使用IP地址或localhost

3.域名必须经过ICP备案

4.服务器域名一个月内最多可申请5次修改

三、发起GET请求

uni.request({
			url:baseURL+options.url,
			method:options.method || 'GET',
			data:options.data ||{},
			header:options.header||{},
			dataType:options.dataType||'json',
			success: (res) => {
				resolve(res.data)
			},
			fail:(err)=>{
				reject(err)
			}
		})

四、发起POST请求

我的项目在登录时,需要发起POST请求

import request from '../utils/request.js'
export function getLogin(username,password){
	return request({
		url:'/login',
		method:'POST',
		data:{
			username,password
		}
	})
}

五、在页面刚加载时请求数据

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

	onLoad() {
			uni.getSystemInfo({//获取系统信息
				success: (res) => {
					// #ifdef H5
					this.scrollH = res.windowHeight - uni.upx2px(88)
					//#endif
					// #ifndef H5
					this.scrollH = res.windowHeight - uni.upx2px(225)
					//#endif
				}
			}),
			this.gethome()
		this.qqmapsdk = new QQMapWX({
						key: '3SUBZ-W5BCQ-FLM5G-GYOPG-D523V-DUFNH'
					});
		},

六、跳过request合法域名校验

如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。

此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时

开启「开发环境不校验请求域名、TLS版本及HTTPS证书」

跳过request合法域名的校验。

七、关于跨域和Ajax的说明

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

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

到此这篇关于微信小程序网络数据请求服务实现详解的文章就介绍到这了,更多相关小程序数据请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • chatGPT前端流式输出js实现三种方法—fetch、SSE、websocket

    chatGPT前端流式输出js实现三种方法—fetch、SSE、websocket

    项目需要接入chatgpt提供的api,后端返回流式的字符,前端接收并实时显示,在JavaScript中,使用Stream流通常指的是处理数据流的一种方式,它们允许数据被处理成块,而不是一次性处理整个数据集,这对于处理大量数据或者来自网络请求的数据非常有用,
    2024-07-07
  • 通过location.replace禁止浏览器后退防止重复提交

    通过location.replace禁止浏览器后退防止重复提交

    如果用户重复提交事件,然后又后退,这样可能会对某些数据产生灾难性的问题。所以今天就向大家介绍一种通过location.replace禁止浏览器后退按钮的方法
    2014-09-09
  • 微信小程序海报绘制示例讲解

    微信小程序海报绘制示例讲解

    这篇文章主要介绍了微信小程序海报绘制示例,海报分享功能在许多应用中应该是很常见的,因为它作为一种常用的应用推广和拉新的方式,下面我们来通过案例学习如何绘制
    2024-05-05
  • 如何用原生js写一个弹窗消息提醒插件

    如何用原生js写一个弹窗消息提醒插件

    这篇文章主要介绍了用原生js写一个弹窗消息提醒插件,下面小编来和大家一起学习一下
    2019-05-05
  • JS实现二维数组横纵列转置的方法

    JS实现二维数组横纵列转置的方法

    下面小编就为大家分享一篇JS实现二维数组横纵列转置的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-04-04
  • js获取当前日期昨天、今天、明天日期的不同方法总结

    js获取当前日期昨天、今天、明天日期的不同方法总结

    JS中处理日期时间常用Date对象,下面这篇文章主要给大家介绍了关于利用js获取当前日期昨天、今天、明天日期的不同方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • bootstrap读书笔记之CSS组件(上)

    bootstrap读书笔记之CSS组件(上)

    这篇文章主要介绍了bootstrap读书笔记之CSS组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • firefox firebug中文入门教程 脚本之家新年特别版

    firefox firebug中文入门教程 脚本之家新年特别版

    最近看了一篇文章感触颇深,对于firebug作为脚本之家的编辑经常看的到,但可悲的是没怎么用过,不是不用那个而是不会用,刚好看了一篇基础的文章特别整理下。
    2010-01-01
  • js 递归json树实现根据子id查父id的方法分析

    js 递归json树实现根据子id查父id的方法分析

    这篇文章主要介绍了js 递归json树实现根据子id查父id的方法,结合实例形式分析了JavaScript递归遍历json进行数据查询的相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • Javascript的表单验证-提交表单

    Javascript的表单验证-提交表单

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证-提交表单,对javascript表单验证,提交表单相关知识感兴趣的朋友一起学习吧
    2016-03-03

最新评论