💒 结婚撸个相册 🎈🎉💖💗💕💘
本文特别提示：当前内容发表在个人博客，禁止任何形式的转载、被收录、二次演绎或大范围传播，本段声明覆盖文末内容分享协议! 如果造成恶意传播、隐私泄露、名誉侵害、权利侵害等，作者将使用法律手段维护权益。
第一眼看到她穿婚纱的样子的时候，说不出来的惊奇，真的太美好了，心里砰砰柔软的感觉，兴奋又激动的情绪，想不起来去拍照，只想盯着她的样子刻在脑海里。她漂亮好看的时候很多，每次我都能找到词形容，但是此时此刻心里那么多情绪，却没办法表达出来，只是牵起了她的手，红了眼眶。
最终效果可以到：预览页面
刚收到结婚照的时候就感觉太漂亮了，尤其是爱人穿上婚纱非常好看的样子，第一时间分享给家人，但是高清图几十兆，微信一个个发真的太南了，放到网盘什么的很不放心，婚礼纪之类的没有相册功能，于是想做一个在线相册，包括电子请柬、加上祝福墙感觉会很不错，老本行能用上了。
电子请柬说白了就是幻灯片嘛，也就是页面切换加上元素动画，具体实现上，监听滑动的事件，根据滑动距离来处理翻页的事情，我这边图快找了一个翻页的库，直用了进来。
可惜不是 TypeScript 的，不过够用了，而且 2.4k after gzipped。
相当于内置七十多种动画效果实现元素进入
最后简单封装一个 AniBlock: 简单用参数控制一张图片的进场，然后就能拼出来全部的动画效果了。
<AniBlockeffect="rotateInDownRight"width={66.5}height={56}left={14.5}top={208.5}delay={800}><img src="images/flower-1.png" /></AniBlock>
这里的动画设置可以将位置、时间、延迟作为可视化的一个变量，然后做一个可视化的动画编辑器。
当然幻灯片部分也可以自己实现，滑动的过程中用 touchstart、touchmove、touchend、transitionend 事件来控制位置和动画，transform translate3d 样式属性来控制移动实现幻灯片的部分。
这个是做的主要目的，也是最简单的，需求就是把一两百张高清照片放到网页中，点击可以查看高清图，可以放大拖动查看。
原图几十兆的大小在网上传输不太现实，几兆的大小已经足够清晰了，所以本地压缩了 60% 才上传到腾讯云存储 COS 上的，平均大小 1-5 兆也够一般人的加载等待时间。
另一方面是预览图压缩质量，如果预览图也直接放原图的话，即使加上懒加载，一下十几兆的大小也不现实，所以预览图需要单独处理，好在 COS 的资源支持免费处理，可以按照质量和大小来输出图片，能达到 1M 以内，甚至 100-200KB 的图片，加上 CDN 缓存，速度也完全能够接受。
这个组件能够实现瀑布流的布局形式：
再根据滚动条位置，实现一个懒加载的逻辑即可。
useEffect(() => {const handleScroll = (e: MouseEvent) => {let scrollY = wrapBoxEl.current.scrollTopif (wrapBoxEl.current.offsetHeight + scrollY >=wrapBoxEl.current.scrollHeight - 50) {loadMorePhotos()}}wrapBoxEl.current.addEventListener("scroll", handleScroll)return () => wrapBoxEl.current.removeEventListener("scroll", handleScroll)})
gallery 自带一个 LightBox 组件，但是不能放大拖动，而且图片数量多了会出现卡顿性能问题。
自己单独又找到了一个点击放大的组件，接到了点击事件上，可以做到单机放大和拖动查看的功能。
但是加上多张图片之后，一方面是懒加载问题，另一方面一百多张图片的动画着实卡顿，所以最后去除了多图片滑动切换的功能，仅能查看点击图片，效果还是不错的。
这个功能原本是打算使用微信公众平台或者开放平台，获取用户的头像和昵称，发表评论，最好再加上打赏的功能。想象很美好，显示很打脸。
最后实现的效果就只有一个弹幕墙，可以评论，打赏功能变成了打赏二维码。
弹幕功能使用的是：
这个组件稍微修改了一些，更符合整个相册的风格。
一个祝福墙，涉及到用户输入，如果需要注册登录就太麻烦了，不需要登录注册的话，万一有人想要恶心或者使坏，发布点脏话什么的，没法控制。
使用的手段是 【匿名登录】 + 【评论关键词过滤】：
匿名登录：使用的 BaaS LeanCloud 的数据存储系统，里面包含了匿名登录的逻辑，匿名登录后基本上能拿到一些很基本的信息，限制单用户发布频率，配合 UA、IP 收集，也可以将多次发布的祝福联系起来，至少知道特定的某个人发了哪些，一个单页这样的手段也足够了。
评论关键词：在网上找了一个简单的敏感词库，一千多个脏话、色情、政治等敏感词，然后用快扫的形式判断用户输入是否有禁用词，如果有的话保存的时候设为不可用，这样就不会显示在祝福墙上了，后续如果存在这些数据还能看到和哪个匿名账号相关联，简单判断是谁不安好心。
项目本身用了几天时间，用了很多第三方的库，加上 COS 和 LeanCloud 后端服务的配合，整个开发流程没那么复杂。
最有感觉的是每次调试的画面都是自己和爱人的美照，感觉还是很不一样的。
大部分的传播都在微信上，所以原本想在祝福墙上使用微信的数据，至少拿到昵称和头像，让亲人都有点参与感，但是最后的结果很让我感觉个人开发者的无力。
曾经用过微信公众号和小程序，可能是忘了怎么被支配的了。刚开始的简单搜索技术文档阶段，各个文档如果花了几个小时，你至少还能摸到门道，明白【服务号、订阅号、小程序、企业微信】和【微信公众平台】、【开放平台】、【小程序平台】、【小游戏平台】的区别。
然后个人注册账号的时候为什么每个平台都要单独用没有关联过其他平台甚至不能关联个人微信的账号注册，尝试了三四个邮箱才注册成功。
然后再翻翻官方文档几个小时，大概明白我需要的几个接口在哪，需要后台服务器、安全域名、安全 IP、回调 URL 等，明白 access_token、OpenID、UnionID、scope、jsapi_ticket 的签名算法。最后的最后，尝试编程的时候还注意到你必须获得接口权限，不然都没办法修改一个分享链接。
我能够看到官方有多努力让整个开发者的体验更好，但是可能是平台确实很大、开发者太多、管理起来比较困难，导致整个体验一言难尽。再加上大大小小的公司整天照着这些文档，发着各种各样的国内特色的教程，导致想要解决问题非常曲折。
最后各种方法，都要求您的账号必须认证，企业主体的认证费用 300 块，个人主体没办法认证！！！我请问如果个人开发者没办法认证，没办法获取到那些权限，这个开发者平台是干嘛给个人注册的呢？？意思就是用用测试账号呗？
公众号平台的开发者账号只能发发文章。开放平台的个人开发者账号一点用没有。
浪费了生命中的很多个小时才弄清这个事情，最后微信 jssdk 一点也没法用，修改下分享出来的链接的图标都不可能，一个按照标准 web 规范做的页面，在微信里面像是一个三无的山寨网站，非常让人气愤无语。
感谢您的阅读，本文由 Ubug 版权所有。如若转载，请注明出处：Ubug（https://ubug.io/blog/marry）
