当前位置：首页 > 后端技术 > Node.js

作为一个前端，如何自己设计喜帖

时间：2023-04-03 16:46:10 Node.js

Prelude一个前端，结婚的时候需要一张喜帖。是用网上哪些网站（婚庆、一期秀）生成的。风格和动画效果都很好，但是公司logo、广告弹窗、加载速度、自定义布局都让我这个工作（qiang）业（po）前端（zheng）端（huanzhe）感觉这需求肯定不会通过产品验收。除了这是一个简单的喜帖结构，这更多的是前端H5性能优化的开胃菜。查看效果，打开手机浏览器点击：演示demo仓库地址：邀请函-Demo图片均来自网络，如有侵权请联系删除；架构设计框架选择市面上哪些低代码输出邀请函基本都是基于juery；对于像我这样没有经历过juery和IE摧残的年轻前端，基本没有jquery架构设计；原生JS，那也是不可能的；React是我最好的Solution，写起来简单，积累最多；基本纯react，不依赖任何其他第三方库，增加了React-Router和动画库；架构设计传统设计，如婚礼、一期秀等，大多采用基于锚点的单页设计，这与SPA不同。或者滚动显示一个或多个页面，让代码更直观。<正文><标题>123这是第一页

这是第二页

这是第firstpagePage3

Thisispage4

当我点击2时，会跳转到第2页，当我点击3时，我会跳到3页，id在这里作为一种描述性标记。SPA也是hash，只是锚点换了一种不同的玩法。每次hash切换时动态卸载和重新挂载一个节点上的内容，不存在内容同时存在的情况。与上面的单页相比：缺点：页面之间的切换不是那么流畅，如果不做特殊处理，切换会显得很生硬；优点：更符合现代前端开发习惯交互差异：锚页面切换，更多是上下滑动；而spa的切换可以是上下，也可以是左右，这取决于开发者的处理方式；所以你可以在框架选择部分看到我总共有5个页面，为了平滑地切换页面，我使用了react-transition-group组件来处理我的页面转换。另外，为了让邀请函更像邀请函，我采用了幻灯片式的自动播放，播放后支持手动滑动。autoPlay=async()=>{//开始自动播放；awaitwait(()=>{this.props.history.push('/bridge');},WAIT_TIME);awaitwait(()=>{this.props.history.push('/bridgeRoom');},WAIT_TIME);awaitwait(()=>{this.props.history.push('/guide');},WAIT_TIME);awaitwait(()=>{this.props.history.push('/next');},WAIT_TIME);awaitwait(()=>{this.props.history.push('/location');},WAIT_TIME);//添加滑动操作指示箭头touchArrow.create({startHash:['/','/home'],endHash:'/location'});//开启滑动touchManage(this.props.history);}所以在这些基本上我写邀请函的时候，可以像写普通的前端应用一样随意写。另外，由于邀请函是要自动制作和播放的，所以音乐是必不可少的，否则邀请函的代入感会大打折扣。播放音乐其实是一个非常简单的操作。在这个版权为王的时代，下载自己喜欢的歌曲是最难的。另外，为了少引入第三方库，减小包体积，我使用纯手写的js和css来实现滑动手势操作检测和加载动画。风格优化作为结婚请柬，除了选择新人的精美图片外，网页本身的风格也需要精心设计。基本的风格布局和构图可以参考《嫁姬》和《人形怪兽》上的一些现成作品。毕竟别人都是靠这个吃饭的，我也只好在设计上低头了。翻页动画在架构设计和设计部分已经讨论过了。spa的页面切换如果没有特殊处理，切换的时候会显得很生硬，所以引入了react-transition-group组件。组件设计非常全面。你可以根据自己的需要，自定义转场动画；组件使用非常简单，自定义css动画即可。图片入口动画因为图片，我在页面加载的时候做了压缩处理和prelaod，所以基本上不用考虑图片加载的问题，只考虑入口的问题，做过ppt的都知道，入场动画可以提高你的演讲水平，请柬也一样。一般来说，我们使用默认字体。作为邀请函，整个页面的效果会比较生硬。所以，最好的办法就是自己去网上选一个适合自己的字体，然后在css中设置；@font-face{font-family:special;src:url('./font.ttf');}body{font-family:special;}加载优化网如果在githubpages中打包静态资源，这样肯定会很慢。所以，有钱的话，买个好点的静态资源服务，或者oss，这里强烈推荐阿里云，有中奖的话，可以直接架CDN加速。我个人使用集成部署。所有静态资源都部署在阿里云服务器上，图片等媒体资源放在oss上。另外，我的域名启用了http2。这个配置基本可以保证首屏秒开。Preloading因为我所有的资源都放在oss上，整体结构是翻页设计的，所以使用preload来提前加载。这个方法基本可以保证下一页，图片不会加载，秒打开。图片处理一般是婚纱照，图片大小在8M以上，如果直接用这个加载，别人打开指定的时候你的邀请函会乱码，所以图片大小压缩很重要，这里推荐一个网站，前端必备最爱：squoosh，基本上图片尺寸可以缩小80%以上。加上之前的preload，基本可以保证图片秒开；字体处理因为字体源文件是5M，加载肯定会很慢，所以使用font-spider进行压缩处理，处理后一般文件大小在100kb左右；操作步骤：全局安装font-spider插件npmifont-spider-gfont-spider的字符压缩实际上是根据html页面的字符和字体样式进行压缩的，所以目前的开发方式（html内容都是用js写的),字符压缩作用不大；所以只能把js中的内容提取出来，放到一个空的html中，然后再压缩；为了简化这个项目，我写了一个命令，你只需要运行一个命令就可以完成压缩：运行命令npmrunfont自动提取字符的思路，可以在我的仓库查看代码。others这里是最重要的提醒，因为我们大部分的邀请函都是通过微信发给亲戚朋友的，一定要先通过腾讯的安全破解。记忆中需要做两件事：1、最好的域名是https，而且是国内的；2、域名根路径包含腾讯发布的序列化文件。刚发出邀请函的时候，发现无法访问，于是确定是诈骗，后来又和对方邮箱沟通，然后解封：至此，终于写完什么了我计划在5个月前写。希望分享给你，对你有一点帮助。自己写邀请函，虽然折腾，但是自己做，能充分表达自己，老婆也很满意，感觉很值得。

上一篇：node版本管理神器-nvm

下一篇：前端模块——ES6和commonJS的区别

作为一个前端，如何自己设计喜帖相关文章

最新推荐

猜你喜欢