🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容
🌸个人主页： 长风清留杨的博客
🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。
✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战
🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂
小程序开发
网络数据请求
小程序中网络数据请求的限制
小程序中网络数据请求的限制主要基于安全性方面的考虑，官方对数据接口的请求做出了以下两个主要的限制：
- 只能请求HTTPS类型的接口：
- 这是一个非常重要的安全要求。HTTPS（HyperText Transfer Protocol Secure）是一种安全的网络传输协议，它通过SSL/TLS加密技术来确保数据在传输过程中的安全性。使用HTTPS可以防止数据在传输过程中被窃取或篡改，从而保护用户的隐私和数据的完整性。
- 必须将接口的域名添加到信任列表中：
- 这是一个额外的安全步骤，用于确保小程序只与受信任的服务器进行通信。开发者需要在小程序的配置中明确指定哪些域名是合法的请求目标。这样，当小程序尝试与这些域名之外的服务器进行通信时，请求将被拒绝，从而防止潜在的恶意攻击。
在开发者工具中可以点击详情->项目配置->request合法域名查看可以访问的域名，配置好域名之后，例如有一个https://aip.baidu.com的域名，那么就可以访问该域名下的所有API
所以在请求接口的时候，一定要先把该接口所在的域名添加到这个配置中
配置 request 合法域名
我们以https://www.escook.cn/，该域名为例，假如要请求该域名下的接口，首先把该域名添加到小程序中的合法域名中
配置路径：登录小程序后台->开发与服务->开发管理->服务器域名->点击开始配置
然后进入以下界面，在request域名下添加以下内容之后点击保存
https://aip.baidubce.com;https://applet-base-api-t.itheima.net;
然后在小程序开发者工具中就能看到刚才配置的合法域名了
配置 request 合法域名常见错误
| 常见错误提示 | 原因及解决方法 |
|---|---|
| 该域名协议头非法 | 域名内包含非法的协议头，请修改 |
| 域名中不能含有端口号 | 域名内含有端口号，请修改 |
| 不能使用IP地址作为域名 | IP地址不能作为域名，请修改 |
| 不能使用本地域名localhost | 小程序服务器配置域名不可使用本地域名，请修改 |
| 为保障平台安全，请更换域名地址 | 此域名地址不可被设置，请修改 |
| 该域名包含非法字符，只支持英文大小写字母、数字及“_” | 域名内包含非法字符，请修改 |
| 操作频繁，请稍后重试 | 在一定时间周期内提交修改过于频繁，请稍后再试 |
| 该域名因违规被禁止设置。如有异议，请在微信客户端打开此域名进行申诉 | 该域名在微信内存在违规行为，请用微信客户端打开此域名，在错误页面中发起申诉。申诉通过后即可重新填写。 |
| 该域名未备案 | 填写的域名未经过icp备案，请先完成域名备案，再重新填写 |
| 如填写了“api.weixin.qq.com”会出现上述错误提示。出于安全考虑，为避免开发者将AppSecret放置在小程序的前端代码内，平台禁止设置此域名 | 小程序的开发者密码（AppSecret）是一个非常重要的字段，使用该密码可以调用小程序的所有后台接口。请不要将该字段放置在微信小程序的前端代码中，为保障账号安全不可使用此域名地址，请修改。开发者应将Appsecret保存到后台服务器中，通过服务器使用Appsecert获取Accesstoken。微信公众平台小程序后台的服务器地址设置也将禁止将“api.weixin.qq.com”域名的配置，所有对于“api.weixin.qq.com”域名下的接口请求请全部通过后台服务器发起，请勿直接通过小程序的前端代码发起。 |
| 该域名所在的服务平台或网页存在大量违规内容，已被禁止设置。如有异议，请联系服务平台开发者可联系云平台或该网页运营者对违规内容进行整顿后，在微信客户端内打开此域名，并在错误页面中发起申诉。申诉通过后即可重新填写 | 该域名为云平台域名，且该云平台/网页存在大量违规内容，不可设置。 |
| 此域名为开发环境域名，不可在正式环境下使用 | 此域名是腾讯云开发环境域名，不可用在正式环境下，请修改 |
发起GET请求
如果在本地不好设置合法域名的话，可以直接在开发者工具上关闭校验合法域名，勾选上之后，无论域名是否合法都不会影响请求的（只限在开发环境使用，切记不能在生产环境使用）
首先在index.wxml文件中定义一个按钮，并绑定上事件
index.wxml文件
<button bind:tap="request_get">发起GET请求</button>
index.js文件
// index.js 文件
// 定义一个页面，使用微信小程序提供的 Page 构造器
Page({
// 定义一个名为 request_get 的方法，用于发起 GET 请求
request_get() {
// 调用微信小程序的 wx.request 方法来发起网络请求
wx.request({
// 请求的 URL 地址
url: 'https://applet-base-api-t.itheima.net/api/get',
// 请求的方法，这里是 GET 方法
method: 'GET',
// 请求时携带的数据，这里传递了 name 和 age 两个参数
data: {
name: '张三',
age: 31
},
// 请求成功的回调函数，res 是响应对象
success: (res) => {
// 在控制台打印响应的数据
console.log(res.data)
}
})
}
})
发起POST请求
首先在index.wxml文件中定义一个按钮，并绑定上事件
index.wxml文件
<button bind:tap="request_post">发起POST请求</button>
index.js文件
// index.js 文件
// 使用微信小程序提供的 Page 构造器来定义一个页面
Page({
// 定义一个名为 request_post 的方法，用于发起 POST 请求
request_post() {
// 调用微信小程序的 wx.request API 发起网络请求
wx.request({
// 请求的 URL 地址
url: 'https://www.escook.cn/api/post',
// 请求的方法，这里是 POST 方法
method: 'POST',
// 请求时携带的数据，这里传递了 name 和 age 两个参数
data: {
name: 'ls',
age: '33'
},
// 请求成功的回调函数，res 是服务器响应的对象
success: (res) => {
// 在控制台打印出服务器响应的数据
console.log(res.data)
}
})
}
})
在页面刚加载时请求数据
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数
- 页面生命周期函数：
- 在小程序中，页面的生命周期函数用于监听页面的状态变化。其中，onLoad函数是页面加载时会被调用的函数。
- 请求数据：
- 在页面刚加载时，我们通常需要请求一些初始化的数据来填充页面。这可以通过在onLoad函数中调用获取数据的函数来实现。
- 调用获取数据的函数：
- 在onLoad函数中，通过this.request_get()和this.request_post()调用了这两个获取数据的函数。这意味着当页面加载时，这两个函数会被执行，从而请求所需的数据。
//index.js
Page({
// 定义一个名为 request_get 的方法，用于发起 GET 请求
request_get() {
// 调用微信小程序的 wx.request 方法来发起网络请求
wx.request({
// 请求的 URL 地址
url: 'https://applet-base-api-t.itheima.net',
// 请求的方法，这里是 GET 方法
method: 'GET',
// 请求时携带的数据，这里传递了 name 和 age 两个参数
data: {
name: 'zs',
age: 20
},
// 请求成功的回调函数，res 是响应对象
success: (res) => {
// 在控制台打印响应的数据
console.log(res.data)
}
})
},
// 定义一个名为 request_post 的方法，用于发起 POST 请求
request_post() {
// 调用微信小程序的 wx.request API 发起网络请求
wx.request({
// 请求的 URL 地址
url: 'https://www.escook.cn/api/post',
// 请求的方法，这里是 POST 方法
method: 'POST',
// 请求时携带的数据，这里传递了 name 和 age 两个参数
data: {
name: 'ls',
age: '33'
},
// 请求成功的回调函数，res 是服务器响应的对象
success: (res) => {
// 在控制台打印出服务器响应的数据
console.log(res.data)
}
})
},
// 页面加载时的生命周期函数
onLoad: function(options) {
// 当页面加载时，调用 request_get 方法发起 GET 请求
this.request_get()
// 当页面加载时，调用 request_post 方法发起 POST 请求
this.request_post()
}
})
在这个小程序页面中，定义了两个方法：request_get 和 request_post，分别用于发起 GET 和 POST 请求。页面加载时，通过 onLoad 生命周期函数调用了这两个方法，从而在页面加载时发起网络请求并获取数据。请求成功后，会在控制台打印出响应的数据。
代码写完之后点击重新编译，页面直接自动请求get和post的数据
跳过 request 合法域名校验
在小程序开发中，当后端程序员仅提供了HTTP协议的接口，而尚未提供HTTPS协议的接口时，这可能会给开发带来一定的困扰，因为微信小程序默认要求使用HTTPS协议进行网络请求以保证数据的安全性。然而，为了不影响开发的进度，微信开发者工具提供了一个临时解决方案。
这个解决方案就是在微信开发者工具中开启「开发环境不校验请求域名、TLS版本及HTTPS证书」选项。通过这个设置，开发者可以跳过request合法域名的校验，从而允许小程序在开发环境中使用HTTP协议的接口进行网络请求。
但需要注意的是，这个选项只应在开发与调试阶段使用，而不应在实际的生产环境中启用。因为跳过合法域名校验会降低小程序的安全性，使得数据在传输过程中可能面临被窃取或篡改的风险。因此，在开发完成并准备上线时，开发者应确保所有网络请求都使用了HTTPS协议，并关闭了这个临时设置。
关于跨域和 Ajax 的说明
首先，跨域问题是一个在基于浏览器的Web开发中常见的问题。跨域指的是从一个源（domain、protocol、port三者中的任意一个与当前页面地址不同即为跨域）向另一个源发起请求时，由于浏览器的同源策略（Same-Origin Policy），这种请求可能会受到限制或阻止。然而，在小程序开发中，由于小程序的宿主环境是微信客户端，而不是浏览器，因此小程序中不存在跨域的问题。这是因为微信客户端对小程序的网络请求进行了封装和处理，使得小程序可以自由地与后端服务器进行通信，而无需担心跨域限制。
其次，关于Ajax技术，其核心是依赖于浏览器中的XMLHttpRequest这个对象。XMLHttpRequest是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。然而，由于小程序的宿主环境是微信客户端，而不是浏览器，因此小程序中不能叫做“发起Ajax请求”。相反，小程序中使用的是微信提供的API来“发起网络数据请求”。这些API允许小程序向指定的服务器地址发送请求，并接收服务器返回的响应数据。
扫一扫
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
