h5聊天IM实例-仿微信语音-地图定位-抖动效果

前言相信大家都用过微信。微信产品真的设计的很好，简约而不简单。尤其是里面的摇一摇和语音功能，更是吸引了大量的用户。颠覆性的功能和设计，让微信稳坐社交宝座。介绍之前，由于项目需要，开发了一个简单的聊天项目，但是功能和UI都比较简单。最近在原有基础上进行了重大改造，开发了这款类微信界面的聊天IM系统——ChatwithweChatIM。技术架构/功能基于html5+css3+Zepto+swiper+wcPop+flex等技术开发，实现发送消息、表情（动图）、图片、视频预览、加好友/群聊、右键和长按菜单。此外，还增加了语音模块和地图定位模块。整体功能界面效果更接近微信聊天。介绍了这么多，来看看效果吧：怎么样，看了效果图，是不是感觉还不错，不错。css和js插件介绍如下：另外项目中使用的弹窗wcPop.js是自己开发的移动端弹窗组件，兼容所有移动设备（亲测),多种api调用方式和动画效果；不错，效果很统一，真不错。摇一摇功能，基于shake.js插件$("#J__popScreen_shake").on("click",function(){varshakePopIdx=wcPop({id:'wcim_shake_fullscreen',skin:'fullscreen',title:'shakeShake',content:$("#J__popupTmpl-shakeFriends").html(),position:'right',xclose:true,style:'background:#303030;',show:function(){//摇一摇功能var_shake=newShake({threshold:15});_shake.start();window.addEventListener("shake",function(){window.navigator.vibrate&&navigator.vibrate(500);//console.log("TriggerShake!");//...逻辑代码setTimeout(function(){$(".J__shakeLoading").fadeOut(300);$(".J__shakeInfoBox").html(shakeTpl);},1500);}，错误的）;}}）;}）;聊天模块代码片段//...滚动聊天区底部functionwchat_ToBottom(){$(".mescroll").animate({scrollTop:$("#J__chatMsgList").height()},0);}//...处理编辑器信息var$editor=$(".J__wdtEditor"),_editor=$editor[0];functionsurrounds(){setTimeout(function(){//chromevarsel=window.getSelection();varanchorNode=sel.anchorNode;if(!anchorNode)return;if(sel.anchorNode===_editor||(sel.anchorNode.nodeType===3&&sel.anchorNode.parentNode===_editor)){varrange=sel.getRangeAt(0);varp=document.createElement("p");range.surroundContents(p);范围。selectNodeContents(p);range.insertNode(document.createElement("br"));//chromesel.collapse(p,0);(functionclearBr(){varelems=[].slice.call(_editor.children);for(vari=0,len=elems.length;i/ig,"\r\n");html=html.replace(/<[^img].*?>/ig,"");HTML=HTml.replace(//ig,"");返回html.replace(/\r\n|\n|\r/,"").replace(/(?:^[\t\n\r]+)|(?:[\t\n\r]+$)/g,"")=="";}地图模块使用百度地图api//...选择位置varpoiPopIdx;$(".J__chooseWz").on("click",function(){poiPopIdx=wcPop({id:'wcim_local_fullscreen',title:'Location',skin:'fullscreen',content:$("#J__popupTmpl-location").html(),position:'right',xclose:true,style:'background:#f3f3f3;',//加载地图show:function(){$(".J__sendLatlng").show();$(".localMap").html('');}});});//...获取位置坐标点varpointArr;window.addEventListener('message',function(event){//接收位置信息，用户选择确认位置点后，选点组件会触发事件，返回用户的位置信息varloc=event.data;//防止其他该应用程序还将向该页面发布信息。需要判断模块是否为'locationPicker'if(loc&&loc.module=='locationPicker'){console.log('location',loc);pointArr=位置；}}，错误的）;