微信小程序的网络设置,及网络请求:wx.request(OBJECT)

摘要:
项目设置;“设置”后->设置完成;在代码部分的开头,首先设置一个视图来显示从服务器接收到的数据,然后设置一个按钮“在单击以启动对服务器页面的请求时调用”httpRequest()“;pages index.js的内容如下:;

微信公众号“颜家大少”

本文所用排版工具http://md.aclickall.com

微信小程序要实现网络请求,首先要对其进行设置,下面以"微信web开发者工具V1.01.170913"为例

一:对于服务器网站没有备案,或只需要做本地测试的用户

在“微信web开发者工具”的“设置”->“项目设置”->“项目设置”中
选:不校验安全域名、TLS 版本以及 HTTPS 证书,如下图
这里写图片描述

二:对已有备案的网站服务器用户

因为小程序只支持https的域名,所以先要确保自己的网站服务器已安装了SSL证书,至于怎样安装,可参考我之前的文章,如下:
一:https的简单介绍及SSL证书的生成
二:https的SSL证书在服务器端的部署,基于tomcat,spring boot
三:让服务器同时支持http、https,基于spring boot
四:https的SSL证书在Android端基于okhttp,Retrofit的使用

然后,通过下面两步设置
1):在mp.weixin.qq.com中用自己的小程序帐号登录,在"设置"->"开发设置"中填写服务器域名,如下图:

这里写图片描述
设置完后,在“微信web开发者工具”的“设置”->“项目设置”->“域名信息”中会看到刚在后台的域名设置,如下图:
这里写图片描述
2):在“微信web开发者工具”的“设置”->“项目设置”->“项目设置”中
不要选:不校验安全域名、TLS 版本以及 HTTPS 证书,如下图
这里写图片描述

三:设置完成后,就开始代码部分

先设置一个view用于显示收到服务器应答的数据
再设置一个button,用于点击时调用"httpRequest()"发起对服务器的请求
pages\index\index.wxml 内容如下:

<!--index.wxml-->
<view class="container">
<!-- This is our View -->
<view> Http Receive: {{response}} </view>
<button bindtap="httpRequest"> http test </button>
</view>

pages\index\index.js内容如下:

// This is our App Service.
// This is our data.
var helloData = {
response: ''
}
// Register a Page.
Page({
data: helloData,
httpRequest: function (e) { //对应:<button bindtap="httpRequest"> http test </button>的button点击
var that=this
wx.request({
url: 'http://127.0.0.1/test', //仅为示例,要根据你实际的接口地址
data: {
x: 'ab',
y: 'cd'
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data)
that.setData({
response: res.data //把接收到的服务器数据显示到{{response}}中
})
}
})
}
})

上面代码等同于访问:

https://127.0.0.1/test?x=ab&y=cd

最终显示的结果如下(当然,收到什么内容要根据你服务器的回复内容):
这里写图片描述


更多精彩内容,请关注微信公众号:颜家大少
这里写图片描述

免责声明:文章转载自《微信小程序的网络设置,及网络请求:wx.request(OBJECT)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android View如何获取焦点Teamcenter案例展示下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

PHP 开发环境搭建( Eclipse PDT XAMPP XDEBUG)

1.下载和安装配置XAMPP 我下载的是,XAMPP Lite(精简版) ZIP 压缩包,下载地址 http://www.apachefriends.org/zh_cn/xampp-windows.html 根据xampp的文档描述,解压到根目录意味着您可以直接使用,不需要先运行“setup_xampp.bat”进行配置 (参见:http://www.ap...

To Use EGit(Git for Eclipse)

  Label Decorations Menu Actions  User Guidehttp://wiki.eclipse.org/EGit/User_Guide Label Decorations Label decorations show Git specific information on resources under Git versi...

php中处理换一换的简单实例

微博中,有很多标签供用户选择,点击换一换的时候,都会不断切换。 php程序的简单实现如下: //查询所有标签 $labels = Labels::find()->setColumns('id,w_name,w_uid')->order('w_time desc')->group('w_name')->getAll(); $label...

Linux kernel 之 uart 驱动解析

uart 是一种非常之常见的总线,比如DEBUG信息输出,小数据量数据传输,485,以及蓝牙的控制,GPS,很多都是通过uart 进行数据传输并进行控制。 * #### 在Linux kernel 内部,uart 通常是作为 一个 tty 设备对其进行控制,也是就是一个字符设备文件,可对其进行读写操作。 * #### kernel version 4.4....

MindManager Pro 9.1.157更改默认字体

新创建图表内默认字体 打开MindManager模型存放目录:C:\Documents and Settings\(用户名)\Local Settings\Application Data\Mindjet\MindManager\9\Library\ENU\Templates\,打开New Blank Map.mmat此文件,在“Central Topi...

C# 如何获取Url的host以及是否是http

参考资料:https://sites.google.com/site/netcorenote/asp-net-core/get-scheme-url-host Example there's an given url: http://localhost:4800/account/login 获取整个url地址: 在页面(cstml)中  Microsoft...