草庐IT

【微信小程序入门到精通】— 配置合法域名、进行网络数据请求（GET、POST）

一碗黄豆酱 2023-04-04 原文

目录

前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

本篇文章主要给大家带来进行网络数据请求的方法，那么接下来我们一起学起来吧！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、网络数据请求的限制要求

出于安全考虑，微信小程序官方对网络数据请求进行了限制具体内容如下

  • 要求使用 https 类型接口
  • 必须添加接口域名至信任列表

1.1 配置合法域名

接下来所用的演示域名是使用 b站up主—黑马老师的教学所用域名，若有侵权，告知必删！

  • 登录微信小程序管理后台

  • 进入 开发—开发设置

  • 下拉至 服务器域名

  • 点击开始配置验证身份

  • 修改 request 合法域名

  • 添加 https://www.escook.cn

1.2 在微信小程序开发者工具里面查询是否成功

  • 点击右上角详情

  • 选择项目配置

以上即完成了配置合法域名，接下来我们学习一下网络数据请求

二、网络数据请求

2.1 GET

1、GET交互方式是从服务器上获取数据，而并非修改数据，所以GET交互方式是安全的。就像数据库查询一样，从数据库查询数据，并不会影响数据库的数据信息，对数据库来说，也就是安全的。
2、GET交互方式是幂等的，幂等是一个数学概念，幂等函数就是可以使用相同参数重复执行，并且能获得相同结果的函数。在GET交互这里就是，对同一个URL的多个请求，得到的结果是相同的。就像数据库查询，不同的数据库连接对同一个数据库表用相同条件查询时，得到的结果也是一样的。

2.2 POST

1、POST交互是可以修改服务器数据的一种方式，涉及到信息的修改，就会有安全问题。就像数据库的更新，Update一个数据库表时，如果条件没有写对，就可能把不需要修改的数据给修改了，得到的数据就是错误的了。
2、一般的POST交互是必须要用到表单的，但是表单提交的默认方法是GET，如果改为POST方式，就需要修改表单提交时的Method。

三、网络数据请求实操

3.1 发起 GET 请求

  • 打开 logs.wxml

  • 创建一个 button 按钮做触发装置

    <button type="primary" bindtap="getinfo">触发按钮</button>

  • 打开 logs.js 对事件 getinfo 进行编写

    getinfo (){
wx.request({
  url: 'https://www.escook.cn/api/get',
  method:'GET',
  data:{
    name:'xdl',
    age :'20'
  },
  success:(res)=>{console.log(res.data)}
})
},

    解释说明：首先我们利用 wx.request 将 data 数据传给前面添加的域名，然后利用 console.log() 将data 打印出来显示在调试器中。

  • 事件检验

3.2 发起 POST 请求

  • 新建一个按钮并添加 postinfo 事件

    <!--logs.wxml-->
<button type="primary" bindtap="getinfo">触发GET</button>
<text>----------------------------------------------</text>
<button type="primary" bindtap="postinfo">触发POST</button>

  • 在 logs.js 内编辑 postinfo 事件

    postinfo (){
  wx.request({
    url: 'https://www.escook.cn/api/post',
    method:'POST',
    data:{
      name:'xdl',
      age :'20'
    },
    success:(res)=>{console.log(res.data)}
  })
  },

  • 效果展示

3.3 页面加载时请求数据

若希望在页面刚加载时就自动触发 GET 和 POST 事件，我们可以利用在 logs.js 中的 onLoad 函数利用 this.getinfo 和 this.postinfo

  • 打开 logs.js 在 onload 进行如下编辑

    onLoad(options) {
this.getinfo()
this.postinfo()
}

  • 效果展示

结语

大家每天都要开开心心的喔，让我们一起快乐的学习吧！

精通入门spanclasstoken微信小程序$网络$小程序

有关【微信小程序入门到精通】— 配置合法域名、进行网络数据请求（GET、POST）的更多相关文章

  1. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  2. ruby - 如何模拟 Net::HTTP::Post？ - 2

    是的，我知道最好使用webmock，但我想知道如何在RSpec中模拟此方法:defmethod_to_testurl=URI.parseurireq=Net::HTTP::Post.newurl.pathres=Net::HTTP.start(url.host,url.port)do|http|http.requestreq,foo:1endresend这是RSpec:let(:uri){'http://example.com'}specify'HTTPcall'dohttp=mock:httpNet::HTTP.stub!(:start).and_yieldhttphttp.shou

  3. ruby-on-rails - rails : How to make a form post to another controller action - 2

    我知道您通常应该在Rails中使用新建/创建和编辑/更新之间的链接，但我有一个情况需要其他东西。无论如何我可以实现同样的连接吗？我有一个模型表单，我希望它发布数据(类似于新View如何发布到创建操作)。这是我的表格prohibitedthisjobfrombeingsaved: 最佳答案 使用:url选项。=form_for@job,:url=>company_path,:html=>{:method=>:post/:put} 关于ruby-on-rails-rails:Howtomak

  4. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法

  5. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  6. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  7. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

  8. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  9. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  10. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

随机推荐