原来小程序发送网络请求这么简单(6)

小程序提供了一个简单又高效的应用开发框架和丰富的API,极大的方便了开发者调用微信提供的能力。而这些API中用的比较频繁的就是发送网络请求了,因为我们都希望小程序功能可以对接我们自己的服务接口实现数据交互(这样就不用专门为小程序再去开发一套后台系统了)。

微信小程序实战006:原来小程序发送网络请求这么简单

服务器域名配置

每个小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile) 、WebSocket 通信(wx.connectSocket)和 UDP 通信(wx.createUDPSocket)。我们可以在小程序后台->开发->开发设置->服务器域名中进行配置,域名只支持经过 ICP 备案的 https (wx.request、wx.uploadFile、wx.downloadFile) 、 wss (wx.connectSocket) 协议和UDP 协议(wx.createUDPSocket)。端口可以不用配置(请求时UR也不带端口),如果配置了端口那么就只能访问该端口的接口。

微信小程序实战006:原来小程序发送网络请求这么简单

​ 小程序如何发送网络请求

发送网络请求可以使用wx.request(Object)函数来与服务器进行交互。当用户发起请求时先发到微信服务器进行安全校验,然后再由微信服务器发送到服务器;同样服务器也会将返回的结果先发到微信服务器,再由微信服务器打包之后返回到网页并将处理结果呈现给用户。该接口的最大并发限制是 10 个,因此开发的时候要控制好请求的数量。

微信小程序实战006:原来小程序发送网络请求这么简单

wx.request参数

wx.request(Object)是一个非常重要的API,接受的参数是个对象。对象中可以定义很多属性,url是必填的请求参数且该url中的域名不能使用 IP 地址(小程序的局域网 IP 除外)或 localhost。method默认值是GET请求,数据类型默认是json格式。

微信小程序实战006:原来小程序发送网络请求这么简单

如何发送网络请求(HTTPS)

在标签组件中绑定bindtap属性,当按钮点击的时候会调用对应的方法。我们在该方法中调用wx.request()方法来发起网络请求,如果需要传递数据可以在标签组件中传入data-*自定义属性,当该组件触发事件时会将该属性值发送给事件处理函数。

这里我们测试一个注册功能,tips为提示语注册前提示用户“请先注册”,data-*属性为标签携带的数据(用户名和密码),点击“发送注册请求”按钮并将用户密码发送给后端,注册成功之后tips显示“注册成功”。content-type 默认为 application/json适用于GET请求,现在我这用的是POST请求,所以header这里需要 : "Content-Type": "application/x-www-form-urlencoded"。

微信小程序实战006:原来小程序发送网络请求这么简单

如何发送HTTP请求 (本地开发)

虽然小程序在线上的版本都只能请求到自己在小程序后台中配置好的https服务器,但是在在开发环境中我们还是可以通过发送http请求来测试接口的。我们只要在右上角点击“详情”中找到”不校验安全域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书“选项,或者在“微信开发者工具”菜单栏中点击“设置“,在弹出的下拉菜单中继续点击最下面一行的”项目设置“(此时左边会弹出一个“详情”弹框)。这样我们就可以使用小程序提供的api发送网络请求,进行功能测试。

微信小程序实战006:原来小程序发送网络请求这么简单

​总结:

以上内容是小编给大家分享的微信小程序实战006:如何发送网络请求详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

本文由 8源码吧 作者:liaolong 发表,其版权均为 8源码吧 所有,文章内容系作者个人观点,不代表 8源码吧 对观点赞同或支持。如需转载,请注明文章来源。

发表评论