Comunicación interactiva front-end (applet de WeChat) y back-end (java), basada en javaweb
1. Preparación
Software: idea + herramienta de desarrollo de WeChat
Idioma: java +
herramienta de idioma de applet: JDK + Tomcat
2. Crea un proyecto
1. Cree un nuevo proyecto java-web
Aquí, se ha implementado tomcat. Si ha implementado tomcat, consulte el paso 3
Para personalizar la ruta de un proyecto, es mejor nombrarlo de acuerdo con la nomenclatura de joroba, nombres estandarizados, para facilitar la gestión del proyecto, no importa si no sigue esto, no tiene ningún impacto sustancial y el proyecto ha sido recién creado en este paso.
Así es como se ve el proyecto recién creado
2. Creamos una nueva clase de servlet
Creamos una nueva clase de servlet bajo el paquete src. Esta clase llevará a cabo la comunicación de datos entre el applet y el backend, recibirá datos transmitidos por el applet y enviará datos al applet. El código es como sigue
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);
}
}
A continuación, intentemos ver si el proyecto se puede iniciar con éxito en el servidor Usamos tomcat para iniciar el proyecto. Haga clic en el botón ejecutar en la esquina superior derecha
Si aparece la siguiente página, no se asuste, significa que ha comenzado con éxito. Esto sucede porque IDEA creará una página index.jsp por sí misma y el contenido en el cuerpo es $END $
3. Implementar Tomcat
1. Haga clic en Agregar configuración junto al martillo verde en el menú
2. Haga clic en el signo + en la esquina superior izquierda y seleccione Tomcat Server -> Local
3. Modifique la configuración de Tomcat
(1), modifique la configuración en el cuadro rojo en el servidor
(2), después de configurar la ruta
de configuración en la implementación, la página IDEA será Si cambia, se reconstruirá y el tomcat configurado previamente aparecerá en la esquina superior derecha de la página. Tener un mensaje de advertencia es irrelevante. No afecta el inicio del proyecto.
(3) La configuración detallada puede referirse a este blog, ¡creo que es muy buena! ! !
https://blog.csdn.net/qq_38801550/article/details/78187803?utm_medium=distribute.pc_relevant.none-task-blog-2 predeterminado baidujs_baidulandingword~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242.1
4. Cree un proyecto de applet de WeChat
(1) El código en index.wxml es el siguiente
<view>
<button bindtap='bindtest'>数据交互</button>
<text>接收到后台的数据：{
{tt}}</text>
</view>
(2) El código en index.js es el siguiente
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
tt: ''
},
bindtest: function(options) {
var that = this;
wx.request({
url: 'http://localhost:8080/Servelt', //本地服务器地址
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("失败");
}
})
}
})
La página se muestra de la siguiente manera
5. Después de iniciar el proyecto
(1), lado del subprograma
(2), back-end
