实现功能

小程序端和后台进行连接,并且向后台传递数据,同时接收后台传递回来的数据。基于idea、Java后台。

小程序和Java后台连接交互其实和web端的交互差不大,都是通过url。唯一的区别就是jsp页面和后台的servlet连接是通过路径,小程序和后台的servlet连接是需要在路径前面加上服务器的地址,比如"http://localhost:8080/"

步骤一

创建一个Java Web项目

步骤二

创建一个servlet类,在这个类里进行数据的传输,可以接收小程序的数据,也可以向小程序发送数据

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 java.io.IOException;

import java.io.Writer;

@WebServlet(name = "Servlet", urlPatterns = "/Servlet")

public class Servlet extends HttpServlet {

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

response.setContentType("text/html;charset=utf-8");

/*设置响应头允许ajax跨域访问*/

response.setHeader("Access-Control-Allow-Origin", "*");

/* 星号表示所有的异域请求都可以接受, */

response.setHeader("Access-Control-Allow-Methods", "GET,POST");

//获取微信小程序传递的参数值并打印

String transInfo = request.getParameter("transInfo");

System.out.println("接收到小程序端传递的数据:" + transInfo);

// 像小程序端传递数据

Writer out = response.getWriter();

out.write("汰,这是后台给小程序端的数据");

out.flush();

}

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

doPost(request, response);

}

}

最终后台项目的目录结构是这样的

到这一步后台的内容就搞定了,只要把这个项目放到服务器里面,就可以启动后台了,tomcat或者node.js都可以

步骤三

创建一个小程序项目

步骤四

先把小程序的界面写好,在index.wxml里面写以下代码

数据交互

接收到后台的数据:{{tt}}

步骤五

在index.wxjs里面写交互代码

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

tt: ''

},

bindtest: function(options) {

var that = this;

wx.request({

url: 'http://localhost:8080/testOne_war_exploded/Servlet', //本地服务器地址

data: { //data中的参数值就是传递给后台的数据

transInfo: '呐,这是小程序端给后台的数据'

},

method: 'get',

header: {

'content-type': 'application/json' //默认值

},

success: function(res) { //res就是接收后台返回的数据

that.setData({

tt: res.data

})

console.log(res.data);

},

fail: function(res) {

console.log("失败");

}

})

}

})

wx.request({})里面放到就是交互代码,url是交互地址,data是给后台传递数据的,success是接收后台返回的数据,格式和Ajax是差不多的。

最后看下实现效果

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐