比来不断在捣鼓Next项目，Next.js是一个基于React.js的办事端ssr衬着框架，可以让你的react页面拥有SEO功用。
Next.js的star高达58.8K+。一款十分受开发者喜爱的React SSR框架。
https://www.nextjs.cn/https://github.com/vercel/next.js项目简介Next-WebChat基于next.js+react+redux+antd+rlayer等手艺开发的PC桌面端聊天实例。实现了发现动静/脸色gif、图片/视频预览、弹窗菜单、红包/伴侣圈等功用。
手艺实现手艺框架：Next.js+React.js+ReduxUI组件库：Antd（蚂蚁金服PC桌面端组件库）弹框组件：RLayer字体图标：阿里iconfont字体图标库动态图片：next-images（通过require动态引入当地图片）效果预览
react自定义弹窗组件项目顶用到的所有弹窗功用均是本身开发的RLayer.js弹出框组件。
前段时间有分享过一篇关于react.js实现自定义弹窗组件，感兴趣的能够去看看。
React.js PC桌面端自定义弹出框组件
react自定义虚拟滚动条组件项目顶用到的滚动条均是基于react.js构建的轻量级美化滚动条组件RScroll。撑持原生滚动条、能否主动隐藏、滚动条尺寸/层级/颜色等功用。
因为之前有过一篇分享文章，那里就不做过多的介绍了。
React.js轻量级虚拟滚动条组件
Next.js公共规划next.js中自定义公共规划模板，在layouts目次下的index.js页面。
function Layout(props) {// console.log(props)const router = useRouter()// 登录验证拦截useEffect(() => {// ...}, [])return (<>{/* 设置装备摆设公共头部信息 */}<Head><title>Next.js聊天室title><linkrel="icon"href="/favicon.ico"/><metaname="keywords"content="Next.js|React.js|Next.js聊天室|Next.js仿微信|React聊天实例">meta><metaname="description"content="Next-WebChat 基于Next.js+React+Redux构建的办事端衬着聊天应用法式">meta>Head><divclassName="next__container flexbox flex-alignc flex-justifyc"><divclassName={utils.classNames(next__wrapper,props.isWinMaximize&&maximize)}style={{backgroundImage:`url(${props.skin})` }}><divclassName="next__board flexbox">{/* 右上角按钮 */}<WinBar{...props} />{/* 侧边栏 */}<Sidebar{...props} />{/* 中间栏 */}<Middle/>{/* 主体规划 */}<divclassName="nt__mainbox flex1 flexbox flex-col">{props.children}div>div>div>div>)}Head组件里设置装备摆设一些页面头部信息，如：题目、关键词、描述及图标等信息。
Next.js聊天模块聊天编纂器区域零丁抽离了一个组件，用来停止聊天输入处置。
// react实现contenteditable功用return(<divref={editorRef}className="editor"contentEditable="true"dangerouslySetInnerHTML={{__html:state.editorText}}onClick={handleClicked}onInput={handleInput}onFocus={handleFocus}onBlur={handleBlur}style={{userSelect:text,WebkitUserSelect:text}}>div>)编纂器撑持多行文本输入、光标处插入脸色、粘贴截图发送、输入链接等功用。
如上图：视频播放是基于rlayer弹窗实现。
handlePlayVideo =(item, e) =>{rlayer({content: (<divclassName="flexbox flex-col"style={{height:100%}}><divclassName="ntDrag__head"style={{color:696969,padding:060px015px,lineHeight:42px}}><iclassName="iconfont icon-bofang">i>视频预览div><divclassName="ntMain__cont flex1 flexbox flex-col">{/* 视频video */}<videoclassName="vplayer"src={item.videosrc}poster={item.imgsrc}autoPlaypreload="auto"controlsx5-video-player-fullscreen="true"webkit-playsinline="true"x-webkit-airplay="true"playsInlinex5-playsinline="true"style={{height:100%,width:100%,objectFit:contain,outline:none}}/>div>div>),layerStyle: {background: f6f5ef},opacity: .2,area: [550px, 450px],drag: .ntDrag__head,resize: true,maximize: true,})}聊天区域还撑持拖拽发送图片功用。
handleDragEnter =(e) =>{e.stopPropagation()e.preventDefault()}handleDragOver =(e) =>{e.stopPropagation()e.preventDefault()}handleDrop =(e) =>{e.stopPropagation()e.preventDefault()console.log(e.dataTransfer)this.handleFileList(e.dataTransfer)}// 获取拖拽文件列表handleFileList =(filelist) =>{letfiles = filelist.filesif(files.length >=2) {rlayer.message({icon:error,content:暂时撑持拖拽一张图片,shade:true,layerStyle: {background:ffefe6,color:ff3838}})returnfalse}for(leti =0; i < files.length; i++) {if(files[i].type !=) {this.handleFileAdd(files[i])}else{rlayer.message({icon:error,content:目前不撑持文件夹拖拽功用,shade:true,layerStyle: {background:ffefe6,color:ff3838}})}}}handleFileAdd =(file) =>{if(file.type.indexOf(image) ==-1) {rlayer.message({icon:error,content:目前不撑持非图片拖拽功用,shade:true,layerStyle: {background:ffefe6,color:ff3838}})}else{letreader =newFileReader()reader.readAsDataURL(file)reader.onload =function(){letimg =this.resultconsole.log(img)}}}各人若是感兴趣的话，能够试一试。
好了，今天就分享到那里。希望对各人有所帮忙哈！
基于Nuxt.js+Vue仿微信App聊天实例
评论列表