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> <link rel="icon" href="/favicon.ico" /> <meta name="keywords" content="Next.js|React.js|Next.js谈天室|Next.js仿微信|React谈天实例"></meta> <meta name="description" content="Next-WebChat 基于Next.js+React+Redux构建的做事端渲染谈天运用程序"></meta> </Head> <div className="next__container flexbox flex-alignc flex-justifyc"> <div className={utils.classNames('next__wrapper', props.isWinMaximize&&'maximize')} style={{ backgroundImage: `url(${props.skin})` }}> <div className="next__board flexbox"> {/ 右上角按钮 /} <WinBar {...props} /> {/ 侧边栏 /} <Sidebar {...props} /> {/ 中间栏 /} <Middle /> {/ 主体布局 /} <div className="nt__mainbox flex1 flexbox flex-col"> {props.children} </div> </div> </div> </div> </> )}Head组件里配置一些页面头部信息，如：标题、关键词、描述及图标等信息。
Next.js谈天模块谈天编辑器区域单独抽离了一个组件，用来进行谈天输入处理。
// react实现contenteditable功能return (<div ref={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: (<div className="flexbox flex-col" style={{height: '100%'}}><div className="ntDrag__head" style={{color:'#696969',padding:'0 60px 0 15px',lineHeight:'42px'}}><i className="iconfont icon-bofang"></i> 视频预览</div><div className="ntMain__cont flex1 flexbox flex-col">{/ 视频video /}<video className="vplayer" src={item.videosrc} poster={item.imgsrc} autoPlay preload="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) => {let files = filelist.filesif(files.length >= 2) {rlayer.message({icon: 'error', content: '暂时支持拖拽一张图片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})return false}for(let i = 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 {let reader = new FileReader()reader.readAsDataURL(file)reader.onload = function() {let img = this.resultconsole.log(img)}}}大家如果感兴趣的话，可以试一试。
好了，本日就分享到这里。希望对大家有所帮助哈！
基于Nuxt.js+Vue仿微信App谈天实例
