Web技术基础教程 4

JavaWeb开发技术与案例教程第14章JavaWeb与微信小程序第14章知识结构14.1微信小程序技术栈14.2微信小程序与JavaWeb的协同工作14.3案例学习：微信小程序的开发•14.3.1微信小程序与JavaWeb通信•14.3.2微信小程序智能客服14.4本章小结1第14章课程导入微信小程序是腾讯推出的轻量级应用形态，基于微信生态运行，无需下载安装即可使用。其技术架构采用双线程模型，逻辑层（JavaScript）与视图层（WXML/WXSS）分离，通过微信客户端通信，确保高效渲染与逻辑处理。JavaWeb与微信小程序是两种不同的技术栈，但它们在现代软件开发中经常协同工作，为用户提供丰富的线上体验。本章通过对JavaWeb与微信小程序进行详细对比，并通过实例讲解它们之间如何协同工作，开发包括前端后端的应用系统。◆本章要点•理解JavaWeb后端与微信小程序前端协同工作的模式，即小程序作为客户端（视图层）通过API与Java后端通信。•掌握微信小程序前端如何使用wx.request()向JavaWeb后端（Servlet）发送HTTP请求。•掌握JavaWeb后端处理小程序请求时，必须设置Access-Control-Allow-Origin响应头以解决跨域问题。•掌握在SpringMVC中配置ServerEndpointExporter以支持jakarta.websocket.server.ServerEndpoint注解。•掌握微信小程序如何使用wx.connectSocket()与Java后端建立WebSocket长连接，实现智能客服等实时通信功能。2第14章课程导入◆素养目标•强化跨平台协作意识，提升沟通效率：通过小程序与JavaWeb后端的数据交互，理解“接口协议”对前后端协作的重要性。•践行用户体验一致性，打造无缝衔接：在小程序页面与Web端样式统一实践中，强调“多端一致”对品牌认知的强化作用。•推动技术融合创新，拓展应用场景：结合小程序开发能力学习，理解“微服务+JavaWeb”混合架构优势。•弘扬工匠精神，追求细节完美：在小程序交互细节优化中，践行“极致用户体验”理念。314.1微信小程序技术栈微信小程序开发针对移动端应用程序开发，主要在微信平台上进行。需要掌握微信小程序开发工具的使用和应用开发，同时包括微信小程序框架的技术应用（例如小程序组件、API、事件等）。微信小程序适用于开发移动端应用，满足用户移动端场景下快速浏览、分享、购买等需求。它们通常具有轻量级、易部署和快速迭代的特点。414.2微信小程序与JavaWeb的协同工作（1）微信小程序在功能上扮演了JavaWeb应用中客户端的角色，它负责界面展示（View）和前端事件处理（Logic），需要结合服务器进行数据读写和加工处理，JavaWeb与微信小程序之间的协同工作，相当于将微信小程序当作View层以展示界面和处理前端事件，然后通过HTTP通信，将数据提交至Java中处理，并返回处理结果至小程序界面中。◆数据交互微信小程序可以通过HTTP请求与JavaWeb后端进行通信，实现数据的传递和接收。例如，用户在小程序中提交表单数据，这些数据可以通过HTTPPOST请求发送到JavaWeb后端（例如Servlet）进行处理和存储。◆业务逻辑处理

JavaWeb后端可以处理复杂的业务逻辑，如用户认证、订单处理、数据分析等。这些处理结果可以通过API接口返回给小程序前端进行展示和交互。514.2微信小程序与JavaWeb的协同工作（2）◆用户认证与授权

JavaWeb后端可以实现用户认证和授权机制，确保用户只能访问他们被授权的资源。小程序前端可以通过调用相关的API接口进行用户登录、注册和权限验证等操作。◆数据存储与访问

JavaWeb后端可以使用关系型数据库（如MySQL）或非关系型数据库（如MongoDB）存储和管理数据。小程序前端可以通过调用API接口访问和操作这些数据。614.3.1微信小程序与JavaWeb通信

JavaWeb作为微信小程序服务端是一个常见的开发场景，它涉及到微信小程序前端与JavaWeb后端的交互。下面是一个JavaWeb作为微信小程序服务端的实例，包括后端和前端的基本实现。714.3.1微信小程序与JavaWeb通信JavaWeb后端实现◆创建JavaWeb项目◆如图14-1所示，在IntelliJIDEA中，创建JakartaEE项目，名称为ch14_1。◆选择Template为Webapplication。图14-1创建JakartaEE项目界面814.3.1微信小程序与JavaWeb通信◆编写Servlet类清单14-1所示的代码是为微信小程序设计的后端接口Servlet，通过设置CORS头部支持跨域访问，接收用户名和密码参数并返回JSON格式的响应，为微信小程序提供简单的登录验证功能演示。914.3.1微信小程序与JavaWeb通信（清单14-1WeChatServlet.java）1/3packagecom.example.ch14_1;importjakarta.servlet.ServletException;importjakarta.servlet.annotation.WebServlet;importjakarta.servlet.http.HttpServlet;importjakarta.servlet.http.HttpServletRequest;importjakarta.servlet.http.HttpServletResponse;importjava.io.IOException;importjava.io.Writer;/***微信小程序接口Servlet*@WebServlet注解定义Servlet访问路径为"/wechat"*处理微信小程序发起的登录/验证请求*/@WebServlet("/wechat")publicclassWeChatServletextendsHttpServlet{/***处理POST请求（微信小程序主要请求方式）*@paramrequestHTTP请求对象*@paramresponseHTTP响应对象*/@OverrideprotectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)1014.3.1微信小程序与JavaWeb通信（清单14-1WeChatServlet.java）2/3throwsServletException,IOException{//设置CORS跨域访问头（允许微信小程序跨域访问）response.setHeader("Access-Control-Allow-Origin","*");//允许所有域名访问response.setHeader("Access-Control-Allow-Methods","GET,POST");//允许的请求方法//从请求参数中获取微信小程序提交的数据Stringusername=request.getParameter("username");//获取用户名参数Stringpassword=request.getParameter("password");//获取密码参数（实际项目应加密传输）//TODO:此处应添加业务逻辑处理（示例仅演示流程）//例如：数据库验证、生成token、记录日志等//设置响应格式为JSON（微信小程序标准数据格式）response.setContentType("application/json;charset=utf-8");//获取响应输出流try(Writerout=response.getWriter()){//构建JSON响应（实际项目应使用JSON库如Jackson）StringjsonResponse=String.format("{\"message\":\"Hello,%s!\",\"status\":\"success\"}",username);out.write(jsonResponse);//写入响应内容out.flush();//确保立即发送响应}}/***处理GET请求（示例中将GET重定向到POST处理）1114.3.1微信小程序与JavaWeb通信（清单14-1WeChatServlet.java）3/3*注意：实际生产环境应根据RESTful规范区分GET/POST语义*/@OverrideprotectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//将GET请求委托给doPost方法处理（适用于简单测试场景）doPost(request,response);}}1214.3.1微信小程序与JavaWeb通信上述代码创建了一个Servlet类，名称为WeChatServlet，具有以下特点：继承HttpServlet，配置注解。在doGet()或者doPost()方法中处理微信小程序的请求。设置响应头，允许跨域访问，因为微信小程序通常部署在不同的域上。接收微信小程序传递的参数，并处理业务逻辑。返回数据给微信小程序。【注意】在生产环境中，Access-Control-Allow-Origin应设置为微信小程序的特定域名，使用*通配符存在安全风险。1314.3.1微信小程序与JavaWeb通信微信小程序前端实现访问微信开发者官网，如图14-2所示，下载“微信开发者工具”安装包，并参照安装界面说明进行安装。/miniprogram/dev/devtools/download.html图14-2微信开发者工具下载页面1414.3.1微信小程序与JavaWeb通信配置微信小程序项目◆在微信开发者工具中创建一个新的小程序项目，名称为ch14_2。◆选择AppID，如果没有，可以单击“注册”按钮生成AppID，或者直接单击“使用测试号”。◆选择JS-基础模板”，其他配置选项如图14-3所示。图14-3创建微信小程序项目1514.3.1微信小程序与JavaWeb通信编写页面代码◆在小程序的页面中，编写发送请求到Servlet后端的代码。◆使用wx.request()方法发送HTTP请求到Servlet的URL。◆在请求的success回调中处理返回的数据。将项目中index目录下的index.js修改为清单14-2所示的代码，另外，对应的index.wxml和index.wxss文件不需要修改。1614.3.1微信小程序与JavaWeb通信（清单14-2index.js）1/4//默认头像URL（当用户未上传头像时使用）constdefaultAvatarUrl='/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'//页面配置对象Page({//页面初始数据data:{responseData:{},//存储服务器响应数据motto:'HelloWorld',//页面显示的标语文本userInfo:{//用户信息对象avatarUrl:defaultAvatarUrl,//用户头像URL（默认头像）nickName:'',//用户昵称（初始为空）},hasUserInfo:false,//是否已获取用户信息的标志//检测微信版本是否支持新APIcanIUseGetUserProfile:wx.canIUse('getUserProfile'),//是否支持获取用户信息接口canIUseNicknameComp:wx.canIUse('input.type.nickname'),//是否支持昵称输入组件},//发送网络请求方法sendRequest:function(){wx.request({url:'http://localhost:8080/ch14_1/wechat',//请求地址（需替换为实际服务器地址）1714.3.1微信小程序与JavaWeb通信（清单14-2index.js）2/4method:'POST',//请求方法data:{//发送的数据username:'testUser',password:'testPassword'},header:{//请求头配置'content-type':'application/x-www-form-urlencoded'//与后端接收格式匹配},//请求成功回调（使用.bind(this)保持上下文）success:function(res){console.log('Response:',res.data);this.setData({motto:res.data.message//更新页面标语为服务器返回的消息});}.bind(this),//请求失败回调fail:function(err){console.log('Requestfailed:'+err.errMsg);}});},//页面加载生命周期函数1814.3.1微信小程序与JavaWeb通信（清单14-2index.js）3/4onLoad:function(){console.log("loading...");this.sendRequest();//页面加载时自动发送请求},//点击事件处理（跳转到日志页面）bindViewTap(){wx.navigateTo({url:'../logs/logs'})},//头像选择事件处理onChooseAvatar(e){const{avatarUrl}=e.detail//从事件对象中获取新头像URLconst{nickName}=this.data.userInfothis.setData({"userInfo.avatarUrl":avatarUrl,//更新用户头像//更新用户信息完整状态（需要同时有昵称和有效头像）hasUserInfo:nickName&&avatarUrl&&avatarUrl!==defaultAvatarUrl,})},//昵称输入变化事件处理onInputChange(e){1914.3.1微信小程序与JavaWeb通信（清单14-2index.js）4/4constnickName=e.detail.value//获取输入框的值const{avatarUrl}=this.data.userInfothis.setData({"userInfo.nickName":nickName,//更新用户昵称//更新用户信息完整状态hasUserInfo:nickName&&avatarUrl&&avatarUrl!==defaultAvatarUrl,})},//获取用户信息按钮点击处理getUserProfile(e){//微信官方推荐使用此接口获取用户信息（需用户主动触发）wx.getUserProfile({desc:'展示用户信息',//声明获取用户信息的用途（会显示在授权弹窗）success:(res)=>{//箭头函数自动绑定外部thisconsole.log(res)this.setData({userInfo:res.userInfo,//更新用户信息对象hasUserInfo:true//设置用户信息已获取标志})}})},})2014.3.1微信小程序与JavaWeb通信上述一段小程序JS代码在页面加载完成时(onLoad)，调用了sendRequest方法。sendRequest方法的核心是wx.request()，这是微信小程序提供的用于发起HTTP请求的API，功能类似于AJAX。它向WeChatServlet的地址（/wechat）发送了一个POST请求，并指定content-type为表单格式，同时携带了data数据。在success回调中，res.data接收到Servlet返回的JSON字符串（已被小程序自动解析为对象）。最后，通过this.setData将返回的消息更新到WXML视图中，完成了前后端的数据交互。部署与测试◆部署JavaWeb项目将JavaWeb项目部署到Tomcat上。确保服务器能够正常访问，并且Servlet的URL路径配置正确。2114.3.1微信小程序与JavaWeb通信◆测试微信小程序在微信开发者工具中运行小程序。观察控制台输出，检查请求是否成功发送到Servlet后端，并检查小程序界面显示的返回数据是否符合预期。如图14-4所示，小程序成功从后端获取JSON数据，并在模拟器界面渲染出“Hello,testUser!”的欢迎信息。图14-4微信小程序运行结果2214.3.1微信小程序与JavaWeb通信注意事项◆跨域问题：由于微信小程序通常部署在不同的域上，因此需要确保Servlet后端设置了正确的跨域响应头。另外，如图14-5所示，在微信小程序开发工具的“详情”设置界面中，找到“本地设置”中的“不校验合法域名...”选项进行勾选。◆安全性：在实际应用开发过程中，需注意安全性问题，如防止SQL注入、验证用户身份等。◆数据格式：确保微信小程序前端发送的数据格式与Servlet后端接收的格式匹配。◆错误处理：在Servlet后端和微信小程序前端都添加适当的错误处理逻辑，以便在出现问题时能够给出明确的提示信息，例如网络连接失败、密码错误和输入非法等。图14-5微信小程序“详情”配置界面2314.3.2微信小程序智能客服本实例的项目运行结果如图14-6所示，通过在微信小程序中实现智能客服聊天功能，使用SpringMVC框架作为后端语言支持，采用WebSocket进行长连接通信，软件界面友好，开发简单。图14-6在线智能客服主界面2414.3.2微信小程序智能客服◆创建SpringMVC项目参考上一章实例项目ch13_1，创建一个名称为ch14_3的SpringMVC项目。需要注意的是，本节项目WebSocketService.java类中，引入了fastjson库，因此，需要在ch13_1的基础上添加fastjson依赖，完整的依赖信息如清单14-3所示。2514.3.2微信小程序智能客服（清单14-3pom.xml）1/3…<dependencies><dependency><groupId>jakarta.servlet</groupId><artifactId>jakarta.servlet-api</artifactId><version>6.1.0</version><scope>provided</scope></dependency><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter-api</artifactId><version>${junit.version}</version><scope>test</scope></dependency><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter-engine</artifactId><version>${junit.version}</version><scope>test</scope></dependency><!--Springdependencies--><dependency>2614.3.2微信小程序智能客服（清单14-3pom.xml）2/3<groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>6.2.0</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>3.4.1</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>6.2.0</version></dependency><!--SpringTransactionManagement--><dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>6.2.0</version></dependency><dependency><groupId>org.springframework</groupId>2714.3.2微信小程序智能客服（清单14-3pom.xml）3/3<artifactId>spring-aspects</artifactId><version>6.2.0</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aop</artifactId><version>6.2.0</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>2.0.53</version></dependency></dependencies>…2814.3.2微信小程序智能客服◆编写MVC配置类参考上一章实例项目ch13_1，编写SpringInitializer、SpringRootConfig和SpringWebConfig三个Java类，上述三个类的代码与ch13_1基本相同，只是对应的包名不同。下面列出这些Java类的具体代码，见清单14-4、清单14-5和清单14-6。2914.3.2微信小程序智能客服（清单14-4SpringInitializer.java）1/3packagecom.example.ch14_3.springmvc;importjakarta.servlet.Filter;importorg.springframework.web.filter.CharacterEncodingFilter;importorg.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;/***SpringMVC初始化器（替代传统web.xml配置）*继承自AbstractAnnotationConfigDispatcherServletInitializer*/publicclassSpringInitializerextendsAbstractAnnotationConfigDispatcherServletInitializer{/***配置根应用上下文（非Web层的Bean配置）*通常包含：*-数据源配置*-事务管理配置*-服务层组件*-仓库层组件*/@OverrideprotectedClass<?>[]getRootConfigClasses(){returnnewClass[]{SpringRootConfig.class};}/**◆SpringInitializer类3014.3.2微信小程序智能客服（清单14-4SpringInitializer.java）2/3*配置Servlet应用上下文（Web层相关Bean配置）*通常包含：*-控制器配置*-视图解析器配置*-拦截器配置*-参数解析器配置*/@OverrideprotectedClass<?>[]getServletConfigClasses(){returnnewClass[]{SpringWebConfig.class};}/***配置DispatcherServlet的映射路径*"/"表示处理所有请求（等价于web.xml中的<url-pattern>/</url-pattern>）*/@OverrideprotectedString[]getServletMappings(){returnnewString[]{"/"};}/***配置Servlet过滤器链*这里添加字符编码过滤器解决中文乱码问题3114.3.2微信小程序智能客服（清单14-4SpringInitializer.java）3/3*/@OverrideprotectedFilter[]getServletFilters(){//创建字符编码过滤器实例CharacterEncodingFiltercharacterEncodingFilter=newCharacterEncodingFilter();//设置统一使用UTF-8编码characterEncodingFilter.setEncoding("UTF-8");//强制请求（request）和响应（response）都使用UTF-8编码//true表示同时覆盖请求和响应的编码设置characterEncodingFilter.setForceEncoding(true);returnnewFilter[]{characterEncodingFilter};}}3214.3.2微信小程序智能客服（清单14-5SpringRootConfig.java）◆SpringRootConfig类packagecom.example.ch14_3.springmvc;importorg.springframework.context.annotation.EnableAspectJAutoProxy;importorg.springframework.transaction.annotation.EnableTransactionManagement;@EnableAspectJAutoProxy(proxyTargetClass=true)@EnableTransactionManagementpublicclassSpringRootConfig{}3314.3.2微信小程序智能客服（清单14-6SpringWebConfig.java）1/2◆SpringWebConfig类packagecom.example.ch14_3.springmvc;importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotation.ComponentScan;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.ViewResolver;importorg.springframework.web.servlet.config.annotation.EnableWebMvc;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;importorg.springframework.web.servlet.view.InternalResourceViewResolver;importorg.springframework.web.socket.server.standard.ServerEndpointExporter;/***SpringMVC配置类（Java配置方式）*@ComponentScan指定组件扫描的基础包路径*@EnableWebMvc启用SpringMVC注解驱动功能*@Configuration声明这是一个配置类*/@ComponentScan(basePackages="com.example.ch14_3")//自动扫描指定包下的组件（@Controller,@Service等）@EnableWebMvc//启用SpringMVC的注解驱动功能@Configuration//标识为配置类，替代传统XML配置publicclassSpringWebConfigextendsWebMvcConfigurationSupport{/***配置视图解析器（ViewResolver）*@Bean注解表示该方法会生成一个由Spring管理的Bean3414.3.2微信小程序智能客服（清单14-6SpringWebConfig.java）2/2*InternalResourceViewResolver用于解析JSP视图*/@BeanpublicViewResolverviewResolver(){System.out.println("viewResolver()...");//调试输出//创建JSP视图解析器实例InternalResourceViewResolverresolver=newInternalResourceViewResolver();//设置视图文件的前缀路径（对应WEB-INF/views/目录）resolver.setPrefix("/views/");//设置视图文件的后缀名（对应.jsp文件）resolver.setSuffix(".jsp");returnresolver;}@BeanpublicServerEndpointExporterserverEndpointExporter(){returnnewServerEndpointExporter();}}3514.3.2微信小程序智能客服◆编写WebSocket服务类清单14-7所示的代码是基于WebSocket的实时客服系统服务端实现类，通过@ServerEndpoint注解建立WebSocket连接端点，维护活跃会话集合和预设问答知识库，能够处理客户端的连接建立、消息接收、连接关闭和异常处理，实现简单的智能问答功能。3614.3.2微信小程序智能客服（清单14-7WebSocketService.java）1/4packagecom.example.ch14_3.service;importcom.alibaba.fastjson.JSON;importjakarta.websocket.*;importjakarta.websocket.server.ServerEndpoint;importorg.springframework.stereotype.Component;importjava.io.IOException;importjava.util.*;/***WebSocket服务端实现类*@ServerEndpoint注解定义WebSocket访问端点，URL模板中的{userId}可用于区分不同用户*@Component注解将该类声明为Spring组件，由Spring容器管理生命周期*/@ServerEndpoint("/imserver/{userId}")@ComponentpublicclassWebSocketService{//使用线程安全的Set保存所有活跃的客户端会话（支持并发访问）privatestaticSet<Session>sessions=Collections.synchronizedSet(newHashSet<>());//问答知识库（key:用户问题，value:预设答案）privatestaticMap<String,String>dialogMap=newHashMap<>();//静态初始化块，预加载常见问题答案static{//示例数据，实际项目应接入AI问答系统3714.3.2微信小程序智能客服（清单14-7WebSocketService.java）2/4dialogMap.put("你们的公司在哪里","广州");dialogMap.put("客服几点上班","AM8:00");}/***客户端连接建立时的回调方法*@paramsession客户端会话对象*/@OnOpenpublicvoidonOpen(Sessionsession){System.out.println("新连接建立，会话ID："+session.getId());sessions.add(session);//将新会话加入管理集合}/***接收客户端消息的回调方法*@parammessage客户端发送的JSON格式消息*@paramsession当前会话对象*/@OnMessagepublicvoidonMessage(Stringmessage,Sessionsession)throwsIOException{System.out.println("收到消息："+message);//解析JSON消息（示例格式：{"content":"用户的提问"}）Map<String,Object>map=JSON.parseObject(message,Map.class);3814.3.2微信小程序智能客服（清单14-7WebSocketService.java）3/4Stringcontent=(String)map.get("content");//从知识库查找答案Stringanswer=dialogMap.get(content);//构造响应消息Stringresponse=(answer!=null)?answer:"我不明白您的意思哦。";//发送响应给当前客户端session.getBasicRemote().sendText(response);}/***连接关闭时的回调方法*@paramsession关闭的会话对象*/@OnClosepublicvoidonClose(Sessionsession){System.out.println("连接关闭，会话ID："+session.getId());sessions.remove(session);//从管理集合中移除}/***通信发生异常时的回调方法3914.3.2微信小程序智能客服（清单14-7WebSocketService.java）4/4*@paramthrowable异常对象*/@OnErrorpublicvoidonError(Throwablethrowable){System.err.println("通信发生异常：");throwable.printStackTrace();}}4014.3.2微信小程序智能客服上述代码中，@ServerEndpoint("/imserver/{userId}")注解将其注册为WebSocket端点，{userId}是路径参数，允许区分不同用户。@Component则将其交给Spring管理。它包含三个核心的生命周期注解：*@OnOpen：当小程序端调用wx.connectSocket成功连接时触发，用于“握手”和将会话（Session）存入sessions集合。*@OnMessage：当小程序端调用wx.sendSocketMessage发送消息时触发。它解析JSON消息，从dialogMap中查找答案，并使用session.getBasicRemote().sendText()将回复发送回客户端。*@OnClose：当连接断开时触发，用于清理会话。4114.3.2微信小程序智能客服创建微信小程序◆如图14-7所示，打开微信开发者工具主程序，创建一个小程序项目，项目名称为ch14_4。具体设置方法参见项目ch14_2。图14-7微信小程序创建主界面4214.3.2微信小程序智能客服◆如图14-8所示，在项目的pages目录中，修改原来的index首页文件夹下面的index.wxml、index.wxss和index.js文件，实现聊天对话框界面。图14-8微信小程序项目结构4314.3.2微信小程序智能客服（清单14-8index.wxml）1/2<!--index.wxml--><viewclass="container-chat"><scroll-viewclass="scroll-view"scroll-y="true"><viewwx:for="{{chatList}}"wx:for-index="index"wx:for-item="item"class="chat-item"wx:key="index"><!--左边：对方用户--><viewclass="message-contentother-user-message"wx:if="{{item.id!=userInfo.id}}"><view><imagesrc="{{item.url}}"class="avatar"/></view><viewclass="bubble"><text>{{item.content}}</text></view></view><!--右边：当前用户--><viewclass="message-contentcurrent-user-message"wx:else><viewclass="bubble"><text>{{item.content}}</text></view><view><imagesrc="{{item.url}}"class="avatar"/></view>4414.3.2微信小程序智能客服（清单14-8index.wxml）2/2</view></view></scroll-view></view><!--底部输入框及发送按钮--><viewclass="input-container"style="bottom:{{bottomBtn}}px;"><inputclass="input-box"bindinput="handleInput"bindconfirm="sendContent"value="{{inputValue}}"/><buttonclass="send-button"bindtap="sendContent">发送</button></view>4514.3.2微信小程序智能客服（清单14-9index.wxss）1/4/*index.wxss*//*对话窗口容器*/.container-chat{padding-bottom:100rpx;}/*滚动视图*/.scroll-view{overflow-y:auto;/*允许垂直滚动*/}/*消息列表项*/.chat-item{padding-top:30rpx;/*第一个项目有顶部内边距*/}.chat-item:not(:first-child){padding-top:0rpx;/*除了第一个项目外，其他没有顶部内边距*/}/*消息内容*/.message-content{display:flex;4614.3.2微信小程序智能客服（清单14-9index.wxss）2/4align-items:flex-start;margin-bottom:10rpx;padding:10rpx;}/*对方用户消息*/.other-user-message{margin-left:0;}.other-user-message.avatar{width:80rpx;height:80rpx;border-radius:4rpx;}.other-user-message.bubble{padding:15rpx20rpx;border-radius:010rpx10rpx10rpx;background-color:#eee;margin-left:3rpx;}/*当前用户消息*/.current-user-message{justify-content:flex-end;4714.3.2微信小程序智能客服（清单14-9index.wxss）3/4}.current-user-message.bubble{padding:15rpx20rpx;margin-right:3px;background-color:#7e66f6;border-radius:10rpx010rpx10rpx;color:#ffffff;}.current-user-message.avatar{width:80rpx;height:80rpx;border-radius:4rpx;}/*底部输入框及发送按钮*/.input-container{position:fixed;width:96%;background-color:#fff;margin:02%;height:80rpx;display:flex;justify-content:space-around;4814.3.2微信小程序智能客服（清单14-9index.wxss）4/4align-items:center;padding-bottom:30rpx;}.input-box{height:80rpx;width:75%;margin-right:4rpx;border:1rpxsolid#ccc;border-radius:10rpx;padding:012rpx;}.send-button{height:80rpx;background-color:#7e66f6;color:#fff;border:none;border-radius:4rpx;}4914.3.2微信小程序智能客服（清单14-10index.js）1/6//index.jsconstdefaultAvatarUrl='/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';letsocket=null;constapp=getApp();Page({data:{windowHeight:0,windowWidth:0,bottomBtn:0,userInfo:{id:2},inputValue:'',chatList:[{createTime:'2024-12-2409:10:00',url:defaultAvatarUrl,content:'您好,',id:1},{createTime:'2024-12-2411:15:30',5014.3.2微信小程序智能客服（清单14-10index.js）2/6url:defaultAvatarUrl,content:'我是智能客服小JO，有什么可以帮到您？',id:1}]},handleInput:function(e){this.setData({inputValue:e.detail.value})},getTelIptHeight(e){console.log("getTelIptHeight"+e);if(e.type=='blur'){this.setData({bottomBtn:0})}else{this.setData({bottomBtn:e.detail.height})}},5114.3.2微信小程序智能客服（清单14-10index.js）3/6onLoad(options){letthat=this;letwindowInfo=wx.getWindowInfo();console.log("getWindowInfo()..