写在前面

Client: 微信小程序

Server: Java Servlet running on local Tomcat 9.0

Tools: 微信开发者工具 && Eclipse

Client

弄一个简陋的微信小程序进行测试,wxml 只需要绘制一个向后台发送信息的按钮即可:

1
2
3
4
<!--index.wxml-->
<view class="container">
<button bindtap='connecttest'>test</button>
</view>

在 js 中绑定按键发送请求并在 console 中输出返回值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//index.js
//获取应用实例
const app = getApp()
Page({
connecttest: function () {
wx.request({
url: 'http://localhost:8080/smallAPP/ConnectTest',
data: {
username: 'pomo',
password: '123'
},
method: 'POST',
header: {
//'content-type': 'application/json' // 默认值以 json 形式发送请求
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res.data);
},
fail: function (res) {
console.log("Fail to connect...");
}
})
}
)}

到目前为止,Client 已经完成。

Server

lib

在 Eclipse 中新建一个名叫 smallApp 的 Dynamic Web Project 。先在 WEB-INF 的 lib 中导入 json 相关包:json-lib-2.4-jdk15.jar download

但是这里要注意一个陷阱,这个 json 包需要依赖其他包才能正常运行:

  • jakarta commons-lang 2.5

  • jakarta commons-beanutils 1.8.0

  • jakarta commons-collections 3.2.1

  • jakarta commons-logging 1.1.1

  • ezmorph 1.0.6

官方网址:http://json-lib.sourceforge.net/

DTO

定义一个名叫 user 的 DTO 并带有 userName 和 password 两个属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package com.smallAPP.common;

public class User {
private String userName;
private String password;
public User() {
super();
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}

Servlet

在 DTO 的同一目录下新建一个 Servlet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package com.smallAPP.common;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

@WebServlet("/ConnectTest")
public class ConnectTest extends HttpServlet {
private static final long serialVersionUID = 1L;

public ConnectTest() {
super();
}

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置请求编码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/* 设置响应头允许ajax跨域访问 */
//response.setHeader("Access-Control-Allow-Origin", "*");
/* 星号表示所有的异域请求都可以接受, */
//response.setHeader("Access-Control-Allow-Methods", "GET,POST");

User user = new User();
//获取微信小程序get的参数值并打印
user.setUserName(request.getParameter("username"));
user.setPassword(request.getParameter("password"));
System.out.println("username="+user.getUserName()+" ,password="+user.getPassword());
//转成json数据
Map<String, Object> result = new HashMap<String, Object>();
result.put("data", user);
result.put("msg", "后台已收到");
JSONObject object = JSONObject.fromObject(result);
PrintWriter out = response.getWriter();
out.print(object.toString());
out.close();
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

这个 Servlet 的功能就是把 Client 发送过来的 userName 和 password 在控制台输出,然后把这两个信息转换成 json 数据返回给微信小程序。

测试

在微信开发者工具详情中设置不校验域名(若非本地服务器测试,需要配置好服务器,服务器配置好之后无需关心跨域问题):

在 Eclipse 运行 Servlet,然后点击微信小程序页面上的 test 按钮向后台发送请求,在 Eclipse 中查看后台的接收结果:

然后再观察微信小程序的 console:

如上图所示,微信小程序与 Java 后台成功进行通讯。