MUI中实现im-chat聊天为自动发送和接收指定文字消息

最新推荐文章于 2024-04-24 10:08:03 发布
最新推荐文章于 2024-04-24 10:08:03 发布
阅读量1.4k 收藏 4
点赞数
分类专栏： 前端 文章标签： im-chat聊天 接收指定文字消息 mui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ohdajing/article/details/104995024
版权

mui的官方demo是点击进入聊天界面后，在对话框输入消息，系统接入图灵api每天返回有次数限制。

现在要做的功能是1、列表页面有几条数据，点击则跳转聊天界面，自动发送该条点击的数据，机器人自动回复设置好的消息。类似于以前QQ设置离线时，对方给你发送消息，自动提示您好不在线上。

效果图如下：

2、直接点击聊天界面，发送任意消息，调用接口在数据库查询，有值就返回相应内容，否则提示您说的话听不懂。

参考文档：https://www.jianshu.com/p/3ef8ff92d3f8   每个方法作用讲解得比较详细

CSS大同小异，直接上JS部分吧。

先贴所有代码上来：

<script type="text/javascript" charset="utf-8">
			(function($, doc) {
				var MIN_SOUND_TIME = 800;
				$.init({
					gestureConfig: {
						tap: true, //默认为true
						doubletap: true, //默认为false
						longtap: true, //默认为false
						swipe: true, //默认为true
						drag: true, //默认为true
						hold: true, //默认为false，不监听
						release: true //默认为false，不监听
					}
				});
				template.config('escape', false);
				if(mui.os.ios) {
					// 解决在ios上fixed元素focusin时位置出现错误的问题 
					document.addEventListener('DOMContentLoaded', function() {
						var footerDom = document.querySelector('footer');

						document.addEventListener('focusin', function() {
							footerDom.style.position = 'absolute';
						});
						document.addEventListener('focusout', function() {
							footerDom.style.position = 'fixed';
						});
					});
				}

				$.plusReady(function() {
					plus.webview.currentWebview().setStyle({
						softinputMode: "adjustResize"
					});
					var showKeyboard = function() {
						if($.os.ios) {
							var webView = plus.webview.currentWebview().nativeInstanceObject();
							webView.plusCallMethod({
								"setKeyboardDisplayRequiresUserAction": false
							});
						} else {
							var Context = plus.android.importClass("android.content.Context");
							var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
							var main = plus.android.runtimeMainActivity();
							var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
							imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
							//var view = ((ViewGroup)main.findViewById(android.R.id.content)).getChildAt(0);
							imm.showSoftInput(main.getWindow().getDecorView(), InputMethodManager.SHOW_IMPLICIT);
							//alert("ll");
						}
					};
					var record = [{
						sender: 'zs',
						type: 'text',
						content: '欢迎使用智能语音福宝，您有什么问题可以问我！'
					}];
					var ui = {
						body: doc.querySelector('body'),
						footer: doc.querySelector('footer'),
						footerRight: doc.querySelector('.footer-right'),
						footerLeft: doc.querySelector('.footer-left'),
						btnMsgType: doc.querySelector('#msg-type'),
						boxMsgText: doc.querySelector('#msg-text'),
						boxMsgSound: doc.querySelector('#msg-sound'),
						btnMsgImage: doc.querySelector('#msg-image'),
						areaMsgList: doc.querySelector('#msg-list'),
						boxSoundAlert: doc.querySelector('#sound-alert'),
						h: doc.querySelector('#h'),
						content: doc.querySelector('.mui-content')
					};

					ui.h.style.width = ui.boxMsgText.offsetWidth + 'px';
					//alert(ui.boxMsgText.offsetWidth );
					var footerPadding = ui.footer.offsetHeight - ui.boxMsgText.offsetHeight;
					var msgItemTap = function(msgItem, event) {
						var msgType = msgItem.getAttribute('msg-type');
						var msgContent = msgItem.getAttribute('msg-content')
						if(msgType == 'sound') {
							player = plus.audio.createPlayer(msgContent);
							var playState = msgItem.querySelector('.play-state');
							playState.innerText = '正在播放...';
							player.play(function() {
								playState.innerText = '点击播放';
							}, function(e) {
								playState.innerText = '点击播放';
							});
						}
					};
					var imageViewer = new $.ImageViewer('.msg-content-image', {
						dbl: false
					});
					//绑定消息节点
					var bindMsgList = function() {
						ui.areaMsgList.innerHTML = template('msg-template', {
							"record": record
						});
						var msgItems = ui.areaMsgList.querySelectorAll('.msg-item');
						[].forEach.call(msgItems, function(item, index) {
							item.addEventListener('tap', function(event) {
								msgItemTap(item, event);
							}, false);
						});
						imageViewer.findAllImage();
						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;
					};
					bindMsgList();
					window.addEventListener('resize', function() {
						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;
					}, false);
					var Question,
						Answer;

					function GetTitle() {
						mui.Validation_Api("irr/fag/answerList", {
							"faqQuestion": decodeURI(mui.GetQueryString("_faqQuestion"))
						}, function(data) {
							if(data.respCode == "200") {
								if(data.data.rows != 0) {
									Question = data.data.rows[0].faqQuestion;
									Answer = data.data.rows[0].faqAnswer;
									record.push({
										sender: 'self',
										type: 'text',
										content: Question
									});

									record.push({
										sender: 'zs',
										type: 'text',
										//机器人返回的数据
										content: Answer
									});
									bindMsgList();
								}

							} else {
								mui.toast("错误：" + data.message);
							}
						});
					}
					GetTitle();

					//发送对象声明
					var send = function(msg) {
						//将消息内容体push进record
						record.push(msg);
						//绑定消息节点
						bindMsgList();
						toRobot(msg.content);
					};

					var toRobot = function(info) {
						mui.Validation_Api("irr/fag/answerList", {
							"faqQuestion": info
						}, function(data) {
							if(data.respCode == "200") {
								if(data.data.rows.length == 0) {
									record.push({
										sender: 'zs',
										type: 'text',
										//机器人返回的数据
										content: "您说什么我听不懂！问福宝点别的东西吧 "

									});
									bindMsgList();
								} else if(data.data.rows.length == 1) {
									Answer = data.data.rows[0].faqAnswer;
									record.push({
										sender: 'zs',
										type: 'text',
										//机器人返回的数据
										content: Answer

									});
									bindMsgList();
								} else {
									var area_val = "";
									Answer = data.data.rows[0].faqAnswer;
									for(var i = 1; i < data.data.rows.length; i++) {
										area_val += "<div class=\"listtext1\"></div><div class=\"listtext2\" attrtext=" + data.data.rows[i].faqAnswer + ">" + data.data.rows[i].faqQuestion + "</div></br>"
									}

									record.push({
										sender: 'zs',
										type: 'text',
										//机器人返回的数据
										content: "<div style=\"padding-bottom:10px\">" + Answer + "</div><div class=\"listtext\">您可能想了解：</div>" + area_val

									});
									bindMsgList();
								}

							} else {
								mui.toast("错误：" + data.message);
							}
						});
					};
					mui('body').on('tap', '.listtext2', function() {

						record.push({
							sender: 'self',
							type: 'text',
							content: this.innerHTML
						});
						record.push({
							sender: 'zs',
							type: 'text',
							//机器人返回的数据
							content: this.getAttribute("attrtext")
						});
						bindMsgList();
					});

					function msgTextFocus() {
						ui.boxMsgText.focus();
						setTimeout(function() {
							ui.boxMsgText.focus();
						}, 150);
					}
					//解决长按“发送”按钮，导致键盘关闭的问题；
					ui.footerRight.addEventListener('touchstart', function(event) {
						if(ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
							msgTextFocus();
							event.preventDefault();
						}
					});
					//解决长按“发送”按钮，导致键盘关闭的问题；
					ui.footerRight.addEventListener('touchmove', function(event) {
						if(ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
							msgTextFocus();
							event.preventDefault();
						}
					});
					//长按离开屏幕时触发
					ui.footerRight.addEventListener('release', function(event) {
						//当是文字时
						if(ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
							//showKeyboard();
							ui.boxMsgText.focus();

							setTimeout(function() {
								ui.boxMsgText.focus();
							}, 150);
							send({
								sender: 'self',
								type: 'text',
								content: ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '<br/>')

							});
							ui.boxMsgText.value = '';
							$.trigger(ui.boxMsgText, 'input', null);
						}
						//当是语音时
						else if(ui.btnMsgType.classList.contains('mui-icon-mic')) {
							ui.btnMsgType.classList.add('mui-icon-compose');
							ui.btnMsgType.classList.remove('mui-icon-mic');
							ui.boxMsgText.style.display = 'none';
							ui.boxMsgSound.style.display = 'block';
							ui.boxMsgText.blur();
							document.body.focus();
						}
						//当是文本状态时
						else if(ui.btnMsgType.classList.contains('mui-icon-compose')) {
							ui.btnMsgType.classList.add('mui-icon-mic');
							ui.btnMsgType.classList.remove('mui-icon-compose');
							ui.boxMsgSound.style.display = 'none';
							ui.boxMsgText.style.display = 'block';
							//--
							//showKeyboard();
							ui.boxMsgText.focus();
							setTimeout(function() {
								ui.boxMsgText.focus();
							}, 150);
						}
					}, false);
					ui.footerLeft.addEventListener('tap', function(event) {
						var btnArray = [{
							title: "拍照"
						}, {
							title: "从相册选择"
						}];
						plus.nativeUI.actionSheet({
							title: "选择照片",
							cancel: "取消",
							buttons: btnArray
						}, function(e) {
							var index = e.index;
							switch(index) {
								case 0:
									break;
								case 1:
									var cmr = plus.camera.getCamera();
									cmr.captureImage(function(path) {
										send({
											sender: 'self',
											type: 'image',
											content: "file://" + plus.io.convertLocalFileSystemURL(path)
										});
									}, function(err) {});
									break;
								case 2:
									plus.gallery.pick(function(path) {
										send({
											sender: 'self',
											type: 'image',
											content: path
										});
									}, function(err) {}, null);
									break;
							}
						});
					}, false);
					var setSoundAlertVisable = function(show) {
						if(show) {
							ui.boxSoundAlert.style.display = 'block';
							ui.boxSoundAlert.style.opacity = 1;
						} else {
							ui.boxSoundAlert.style.opacity = 0;
							//fadeOut 完成再真正隐藏
							setTimeout(function() {
								ui.boxSoundAlert.style.display = 'none';
							}, 200);
						}
					};
					var recordCancel = false;
					var recorder = null;
					var audio_tips = document.getElementById("audio_tips");
					var startTimestamp = null;
					var stopTimestamp = null;
					var stopTimer = null;
					//按住说话时候触发
					ui.boxMsgSound.addEventListener('hold', function(event) {
						recordCancel = false;
						if(stopTimer) clearTimeout(stopTimer);
						audio_tips.innerHTML = "手指上划，取消发送";
						ui.boxSoundAlert.classList.remove('rprogress-sigh');
						setSoundAlertVisable(true);
						recorder = plus.audio.getRecorder();
						if(recorder == null) {
							plus.nativeUI.toast("不能获取录音对象");
							return;
						}
						startTimestamp = (new Date()).getTime();
						recorder.record({
							filename: "_doc/audio/"
						}, function(path) {
							if(recordCancel) return;
							send({
								sender: 'self',
								type: 'sound',
								content: path
							});
						}, function(e) {
							plus.nativeUI.toast("录音时出现异常: " + e.message);
						});
					}, false);
					//监听drag（拖动中）事件 上滑;下滑事件
					ui.body.addEventListener('drag', function(event) {
						//console.log('drag');
						if(Math.abs(event.detail.deltaY) > 50) {
							if(!recordCancel) {
								recordCancel = true;
								if(!audio_tips.classList.contains("cancel")) {
									audio_tips.classList.add("cancel");
								}
								audio_tips.innerHTML = "松开手指，取消发送";
							}
						} else {
							if(recordCancel) {
								recordCancel = false;
								if(audio_tips.classList.contains("cancel")) {
									audio_tips.classList.remove("cancel");
								}
								audio_tips.innerHTML = "手指上划，取消发送";
							}
						}
					}, false);
					//长按离开录音节点时执行
					ui.boxMsgSound.addEventListener('release', function(event) {
						//console.log('release');
						if(audio_tips.classList.contains("cancel")) {
							audio_tips.classList.remove("cancel");
							audio_tips.innerHTML = "手指上划，取消发送";
						}
						//
						stopTimestamp = (new Date()).getTime();
						if(stopTimestamp - startTimestamp < MIN_SOUND_TIME) {
							audio_tips.innerHTML = "录音时间太短";
							ui.boxSoundAlert.classList.add('rprogress-sigh');
							recordCancel = true;
							stopTimer = setTimeout(function() {
								setSoundAlertVisable(false);
							}, 800);
						} else {
							setSoundAlertVisable(false);
						}
						recorder.stop();
					}, false);

					//阻止浏览器默认的事件冒泡
					ui.boxMsgSound.addEventListener("touchstart", function(e) {
						//console.log("start....");
						e.preventDefault();
					});
					//监听用户输入时触发
					ui.boxMsgText.addEventListener('input', function(event) {
						ui.btnMsgType.classList[ui.boxMsgText.value == '' ? 'remove' : 'add']('mui-icon-paperplane');
						ui.btnMsgType.setAttribute("for", ui.boxMsgText.value == '' ? '' : 'msg-text');
						ui.h.innerText = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '\n-') || '-';
						ui.footer.style.height = (ui.h.offsetHeight + footerPadding) + 'px';
						ui.content.style.paddingBottom = ui.footer.style.height;
					});
					var focus = false;
					//监听用户点击发送时触发
					ui.boxMsgText.addEventListener('tap', function(event) {
						ui.boxMsgText.focus();
						setTimeout(function() {
							ui.boxMsgText.focus();
						}, 0);
						focus = true;
						setTimeout(function() {
							focus = false;
						}, 1000);
						event.detail.gesture.preventDefault();
					}, false);
					//点击消息列表，关闭键盘
					ui.areaMsgList.addEventListener('click', function(event) {
						if(!focus) {
							ui.boxMsgText.blur();
						}
					})

				});
			}(mui, document));
		</script>

单个代码块详解：

1、列表页面有几条数据，点击则跳转聊天界面，自动发送该条点击的数据，机器人自动回复设置好的消息。

GetTitle()方法就是由外部数据点击进入聊天页面加载时调用的方法，调用后端方法获取到要显示的用户发送消息和机器人回复消息后，push进record中，这里重要的点在record.push方法上。

function GetTitle() {
						mui.Validation_Api("XXX/XXX/XXX", {   //调用后端方法
							"faqQuestion": decodeURI(mui.GetQueryString("_faqQuestion"))
						}, function(data) {
							if(data.respCode == "200") {
								if(data.data.rows != 0) {
									Question = data.data.rows[0].faqQuestion;
									Answer = data.data.rows[0].faqAnswer;
									record.push({
										sender: 'self',
										type: 'text',                         
										content: Question //设置用户主动发送的消息
									});

									record.push({
										sender: 'zs',
										type: 'text',
										//机器人返回的数据
										content: Answer
									});
									bindMsgList();//一定要记得绑定数据
								}

							} else {
								mui.toast("错误：" + data.message);
							}
						});
					}
					GetTitle();

2、直接点击聊天界面，发送任意消息，调用接口在数据库查询，有值就返回相应内容，否则提示您说的话听不懂。

		//发送对象声明
					var send = function(msg) {
						//将消息内容体push进record
						record.push(msg);
						//绑定消息节点
						bindMsgList();
						//输入框输入的消息
						toRobot(msg.content);
					};

					var toRobot = function(info) {
						mui.Validation_Api("XXX/XXX/XXX", { //把输入框的发送的消息传给后台接口
							"faqQuestion": info
						}, function(data) {
							if(data.respCode == "200") {
								if(data.data.rows.length == 0) { //如果后台返回的数据为0 表示未查询到数据  提示听不懂
									record.push({
										sender: 'zs',
										type: 'text',
										//机器人返回的数据
										content: "您说什么我听不懂！问福宝点别的东西吧 "

									});
									bindMsgList();
								} else if(data.data.rows.length == 1) { //如果后台返回的数据为1条说明只有单条信息 没有列表
									Answer = data.data.rows[0].faqAnswer;
									record.push({
										sender: 'zs',
										type: 'text',
										//机器人返回的数据
										content: Answer

									});
									bindMsgList();
								} else {   //返回多条信息  就加载猜您还想搜的列表
									var area_val = "";
									Answer = data.data.rows[0].faqAnswer;
									for(var i = 1; i < data.data.rows.length; i++) {
										area_val += "<div class=\"listtext1\"></div><div class=\"listtext2\" attrtext=" + data.data.rows[i].faqAnswer + ">" + data.data.rows[i].faqQuestion + "</div></br>"
									}

									record.push({
										sender: 'zs',
										type: 'text',
										//机器人返回的数据
										content: "<div style=\"padding-bottom:10px\">" + Answer + "</div><div class=\"listtext\">您可能想了解：</div>" + area_val

									});
									bindMsgList();
								}

							} else {
								mui.toast("错误：" + data.message);
							}
						});
					};
					//点击相应的猜您想搜列表 自动发送点击的消息和设置好的回答
					mui('body').on('tap', '.listtext2', function() {

						record.push({
							sender: 'self',
							type: 'text',
							content: this.innerHTML
						});
						record.push({
							sender: 'zs',
							type: 'text',
							//机器人返回的数据
							content: this.getAttribute("attrtext")
						});
						bindMsgList();
					});

 

mui实现聊天功能（完整版）
weixin_45932157的博客
02-01 4099
前台页面代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-sc...
mui写聊天界面_html5+css+mui chat聊天窗口聊天气泡 调用相机 手机图册 聊天表情...
weixin_39851809的博客
12-20 408
【实例简介】html5+css+mui chat聊天窗口聊天气泡 支持调用相机 支持手机图册 聊天表情 支持聊天气泡宽度根据文字长度进行自适应 美观大方【实例截图】【核心代码】ChatDemo└── ChatDemo├── common│ ├── css│ │ ├── animate.css│ │ ├── iconfont.css│ │ ├── mui.css...
html5+css+mui chat聊天窗口聊天气泡 调用相机 手机图册 聊天表情
09-08
html5+css+mui chat聊天窗口聊天气泡 支持调用相机 支持手机图册 聊天表情 支持聊天气泡宽度根据文字长度进行自适应 美观大方
IMChat是一款基于Ajax无刷新技术的在线web聊天室
11-26
IMChat是一款基于Ajax无刷新技术的在线web聊天室
mui 实现聊天功能（2）
weixin_45932157的博客
02-01 580
上一篇以实现，内容太大，未能实现，现在看一下效果啊： 请链接上一篇： https://blog.csdn.net/weixin_45932157/article/details/104129580 实现效果如图：
mui初级入门教程（五）— 聊聊即时通讯（IM），基于环信 web im SDK
weixin_34126215的博客
06-15 490
文章来源：小青年原创发布时间：2016-06-15关键词：mui，环信 web im，html5+，im，页面传值，缓存转载需标注本文原始地址: http://zhaomenghuan.github.io... 写在前面 感觉自从qq、微信这种APP用多了，现在都没啥人发短信了，现在什么APP都想加入IM的功能，曾经有段时间在折腾自己...
探索即时通讯新领域：IMChat - 简单、高效且可定制化的聊天解决方案
gitblog_00027的博客
04-08 1220
探索即时通讯新领域：IMChat - 简单、高效且可定制化的聊天解决方案 去发现同类优质开源项目:https://gitcode.com/ 项目简介 是一个开源的、基于WebSockets的实时通信平台，由Softtanck团队开发。这个项目旨在为开发者提供一个易于集成、高度可定制的聊天框架，让构建自己的即时通讯应用变得轻而易举。 技术分析 架构设计 IMChat 使用了现代Web开发的主流技术栈...
类似mui中的chat（聊天窗口）实现uniapp-chat-master.zip
12-17
【标题】：“类似mui中的chat（聊天窗口）实现uniapp-chat-master.zip”指的是一个使用uni-app框架实现的聊天窗口功能，其灵感来源于mui的chat组件。这个项目可能为开发者提供了一个快速构建聊天应用界面的解决方案...
uniapp框架-类似mui中的chat（聊天窗口）实现-uni-app项目源码-vue语法格式.zip
最新发布
05-21
此外，UniApp拥有庞大的社区支持和插件生态系统，为开发者提供了丰富的资源和技术支持。从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续...
uniapp-chat:借助uni-app开发的 chat聊天界面
05-11
uniapp-chat 在mui中有chat界面的例子，升级到uni-app后，没有类似的模板，因此模仿写了一个。遇到了一些坑，在此一一记录下来。当然，由于是新手，可能有些坑可以避开。 scroll-view高度的设置 输入内容后，必然要...
aurora-imui-master.zip_android_imui设计_mui框架下的聊天程序
09-20
在Aurora IMUI项目中，MUI框架被用于构建聊天应用的前端部分，提供了一套统一的CSS样式和JavaScript组件，使得在不同平台间保持一致的界面风格。MUI框架的响应式设计使其能够适应各种屏幕尺寸，无论是在Android手机...
mui框架的聊天dome仅限APP使用
07-12
这是mui 聊天dome 可以共大家使用，做的不好的，后期会改善，希望大家多多提意见。
mui框架官方demo合集
08-21
mui框架官方demo合集。包含一个登录实例！
【web前端】聊聊MUI
Cherie
07-31 2888
MUI（Mobile User Interface）是一套基于Html5，用于手机端界面开发的框架，它追求性能致力于UI原生体验，不依赖任何第三方JS库。以前接触的EasyUI、BootStrap应用在网页中没有多大问题，但是一放到手机上单独使用问题就来了，所以很多技术结合起来用各取所长才是最好不过的。 UI组件是MUI的基础，以iOS 7为基础，补充部分Android特有控件。一般页面常用到的元素都包含在这部分，像按钮、消息框、图标、图文列表等等各种小部件。它们的特点是独立性，都是一个小
mui写聊天界面_GitHub - lxlyh/IM-MUI: IM-MUI----基于mui和H5+的IM聊天demo界面(基于mui官方demo的im-chat.html改进)，欢迎使用，欢迎补充...
weixin_39732018的博客
12-20 360
imedu介绍最近想做一个聊天的客户端，于是仿照微信界面做了一个基于mui和H5+的IM聊天demo的UI界面，实现录音视频图片原生调用(暂未接入IM服务)，喜欢的可以去看一下，在上面继续开发你的功能。也可以当做一个思路吧。功能目前实现的有：1.登录的页面UI；2.消息界面，仿微信界面，没有设计师，自己设计的很粗糙；3.联系人界面，仿微信字母选择；4.顶部tabbar,添加好友菜单；5.个人信息页...
高仿Telegram IM Chat 聊天软件 即时通讯 在线聊天加社群 纯静态UI架构介绍
tongtian2000的博客
03-02 1602
海量用户即时通讯是一种能够支持数百万或数千万用户同时在线并进行实时聊天的应用程序，它需要具备高性能、高可用、高扩展、高安全等特点。为了实现这些特点，通常采用以下几个方面的技术架构
探索IM-Chat-Cli：一款强大的命令行即时通讯工具
gitblog_00027的博客
04-24 461
探索IM-Chat-Cli：一款强大的命令行即时通讯工具 去发现同类优质开源项目:https://gitcode.com/ 项目简介 在快节奏的数字时代，即时通讯已经成为我们日常生活和工作中不可或缺的一部分。 是一个创新的项目，它提供了一种全新的方式——通过命令行界面进行实时通信。对于开发者、极客或者喜欢简洁高效工作流程的人来说，这是一个非常值得一试的新鲜体验。 技术分析 IM-Chat-Cli ...
MUI——聊天窗口
专注写bug
01-17 1953
文章目录前言聊天布局分析页面布局消息展示和消息输入框，发送按钮布局完整页面布局和逻辑分析注意事项获取详细库 前言 前段时间使用MUI做了个APP，客户提出想法，能否增加一个可以聊天的功能，用来保证工单系统中所有参与角色的交流。 好的，安排！ 聊天布局分析 需要实现一个可供聊天的窗口，需要优先分析其布局的构成。 参考QQ或者微信的聊天群，大致可以看出具有以下的共通点： 1、群聊窗口需要有信息展示窗口。 2、自己发送的消息显示在右边，别人发送的聊天消息显示在左边。 3、需要有一个触发软键盘的输入框，和一个发送
MUI的chat聊天模板头部标题栏不显示的解决方法，使用原生标题栏h5+即可解决
u012442504的专栏
06-24 981
问：在项目中使用文档中的chat代码后 在模拟器和真机上运行 页面的标题栏均不显示 但是在pc chrome浏览器调试 标题栏能显示。 官方对于这个问题的回答代码冗长的可怕。。。根本不需要那么复杂，几行代码就能搞定…… mui.openWindow({ url: webviewUrl, id: webviewId, styles: { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值