简单的微信小程序与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版

六、效果演示