一、写在前面
最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的,然后查找资料发现结合了官方提供的api后好像和我们普通的web前后端通信也没有多大的区别,有想法后就写了这个测试程序。
二、API文档
wx.request(OBJECT)
发起网络请求。使用前请先阅读说明。
OBJECT参数说明:
参数名类型必填默认值说明
url
String
是
开发者服务器接口地址
data
Object/String
否
请求的参数
header
Object
否
设置请求的 header,header 中不能设置 Referer。
method
String
否
GET
(需大写)有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType
String
否
json
如果设为json,会尝试对返回的数据做一次 JSON.parse
success
Function
否
收到开发者服务成功返回的回调函数
fail
Function
否
接口调用失败的回调函数
complete
Function
否
接口调用结束的回调函数(调用成功、失败都会执行)
success返回参数说明:
参数类型说明最低版本
data
Object/String
开发者服务器返回的数据
statusCode
Number
开发者服务器返回的 HTTP 状态码
header
Object
开发者服务器返回的 HTTP Response Header
data 数据说明:
最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下:
对于 header['content-type'] 为 application/json 的数据,会对数据进行 JSON 序列化
对于 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)
示例代码
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data)
}
})
三、基本思路
将数据通过get方式传到Java servlet类,servlet得到微信小程序的数据打印出来并返回一个数据给微信小程序,从而实现一个最简单的前后端通信。
四、关键代码
微信小程序代码
index.wxml
test
index.js
bindtest: function(){
wx.request({
url: 'http://localhost:8080/Demo01/servlet02',
data:{
username:'001',
password:'abc'},
method:'GET',
header: {
'content-type': 'application/json' // 默认值
},
success:function(res){
console.log(res.data);
},
fail:function(res){
console.log(".....fail.....");
}
})
},
Java serlvet类代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
/* 设置响应头允许ajax跨域访问 */response.setHeader("Access-Control-Allow-Origin", "*");
/* 星号表示所有的异域请求都可以接受, */response.setHeader("Access-Control-Allow-Methods", "GET,POST");
//获取微信小程序get的参数值并打印
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("username="+username+" ,password="+password);
//返回值给微信小程序
Writer out =response.getWriter();
out.write("进入后台了");
out.flush();
}
五、效果演示
前端控制台
ecplise控制台
至此说明微信小程序与Java后台通信成功!当然这是最简单的通信,比较复杂的是需要对Json数据的处理,以后有时间再总结下。