简单的微信小程序与Java后台的连接
最近接触了小程序的开发,后端选择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 | 1.2.0 |
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)...
二、基本思路
将数据通过get方式传到java servlet类,servlet得到小程序的数据打印出来并返回一个数据给微信小程序,从而实现一个简单的前后端通信
三、小程序端代码
index.wxml
<view>
<button bindtap='bindtest'>test</button>
</view>
核心代码 index.js:
Page({
bindtest:function(){
wx.request({
url: 'http://localhost:8080/wxtest', //本地服务器地址
data:{
username:'001',
password:'abc',
},
method:'GET',
header:{
'content-type':'application/json' //默认值
},
success:function(res){
console.log(res.data);
},
fail:function(res){
console.log("失败");
}
})
}
})
四、java servlet类代码
import java.io.IOException; import java.io.Writer; public class wxtestServlet extends javax.servlet.http.HttpServlet { protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { 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 passsword = request.getParameter("password"); System.out.println("username:" + username + "passsword:" + passsword); //返回值给微信小程序 Writer out = response.getWriter(); out.write("进入后台了"); out.flush(); } protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { this.doPost(request, response); } }
五、可能出现的错误
此时,需要进行如下配置
勾选上不校验合法域名、web-view、tls版