mui写聊天界面_浅尝MUI-详解im-chat源码

写在前面

因最近项目需要制作一个聊天界面，对比后感觉MUI源码内的im-chat.html文件对各种情况的处理比较的全面，因此，将整个页面的逻辑从头到尾理了一遍，希望有需求的小伙伴可以少走弯路，通过这个模板，可以根据我们自己需要的功能进行定制，如果不是很清楚(用词不当)的地方，还请小伙伴们提出来，做相关修改，谢谢！

ps：理这种逻辑性的东西需要耐心，所以希望小伙伴能够静下心来慢慢理，任何代码都是根据需求实现。所以，可以结合实际操作来看相关模块。最后，求一波关注，哈哈！

相关引用

这个聊天框架基于MUI开发，正常引入相关文件后，还需引入如下文件：

图片预览的mui.imageviewer.css样式文件，

处理图片浏览的mui.imageViewer.js文件，

模板渲染的arttmpl.js文件；

代码详解

chat (聊天窗口)

点击播放

按住说话

!

手指上滑，取消发送

(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);

//$.plusReady=function(fn){fn();};

$.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: 'Hi，我是 MUI 小管家！'

}];

var ui = {

body: doc.querySelector('body'),

footer: doc.querySelector('footer'),

footerRight: doc.querySelec