哥几个，今天我来掰扯掰扯之前捣鼓那个微信朋友圈生成器网页版的事儿。你们知道的，我平时就爱折腾点小玩意儿，尤其是有时候朋友之间开开玩笑，或者想模拟个朋友圈布局看看效果啥的，网上那些工具要不就是收费，要不就是广告满天飞，用起来很不爽。
本站为89游戏官网游戏攻略分站，89游戏每日更新热门游戏，下载请前往主站地址:www.gm89.icu
有一次，我一哥们儿突然跟我说，他想给他对象发个假的朋友圈，就那种“今天谁谁谁又给我送花”的，想看看他对象啥反应。当时我就一拍大腿，说这事儿我能帮你搞定！那时候我也没啥具体思路，就是嘴巴快了点。不过话都放出去了，总不能食言？
开始动手：怎么把想法变出来
我想着既然要模拟朋友圈，那得把朋友圈长啥样给琢磨透。我就打开自己微信，一个劲儿地刷朋友圈，看那些头像、昵称、发布时间、内容文字、图片，还有下面的点赞和评论区，都怎么排布的。
- 布局：我发现朋友圈最上面是头像，旁边是昵称，然后是发布的内容，内容里可能有纯文字，也可能带图片。图片的数量和排布方式也得考虑。再往下就是时间和那些小标志，才是点赞和评论。
- 元素：头像、昵称、正文、图片、发布时间、小标志、点赞图标、评论图标、点赞人列表、评论列表。这些都得有。
琢磨清楚这些后，我就开始上手了。我这个人，搞这些小东西就喜欢从最简单的搞起，直接HTML、CSS、JavaScript三件套。别的那些花里胡哨的框架、库，我觉得用不着，也没必要为了个小玩意儿去学新的东西，杀鸡焉用牛刀嘛
一步一步搭框架
是HTML，我拉了个大的`div`当成整个朋友圈的容器，然后里面又套了几个`div`，一个放头像和昵称，一个放正文，一个放图片区，一个放时间和操作区，放点赞评论区。
头像和昵称那个`div`里，我放了个`img`标签用来显示头像，旁边一个`span`放昵称。正文嘛直接用个`p`标签就行了，到时候把用户输入的内容塞进去。图片区稍微复杂点，我考虑让用户可以上传一张到九张图，所以搞了个循环，根据用户上传的图片数量动态生成`img`标签，再用CSS去控制它们的排列，一张图居中，两张图左右分，九宫格那种。图片这块儿，我一开始想直接用`background-image`，后来觉得直接用`img`标签更方便，也好处理点击放大啥的。
时间那里，我搞了个`input type="datetime-local"`，让用户自己能选个时间，模拟得更逼真。操作区嘛就是那几个小图标，用`span`放着，再加点儿假的点赞和评论图标。
评论区，我就做了个简易版的。先给个输入框，让用户自己输入评论内容和评论人，然后点个“添加评论”按钮，就把这条评论加到列表里。点赞也差不多，给个输入框输名字，然后点个“添加点赞”，就把名字加到点赞列表里。
让它动起来：JS的魔法
光有HTML骨架和CSS样式还不行，得让它活起来。这就轮到JavaScript出马了。
我给所有的输入框都加了`oninput`事件监听，这样用户每输入一个字，预览区就立马跟着变。比如昵称输入框一有变化，预览区的昵称`span`的`innerText`就跟着更新。内容输入框也一样。
图片上传这块儿，我用了`input type="file"`。用户选择图片后，我用`FileReader`把图片读出来，然后把读出来的`base64`编码的图片数据塞到预览区`img`标签的`src`属性里。多图上传就多读几次，动态添加`img`标签。
点赞和评论这块儿，我设置了两个数组，一个存点赞人名字，一个存评论内容和评论人。每当用户点击“添加”按钮，我就把输入框里的内容加到对应的数组里，然后更新预览区的点赞和评论列表。点赞列表就是把数组里的名字用逗号连起来显示，评论列表就是循环数组，每条评论都生成一个新的`div`显示出来。
的冲刺：怎么保存下来？
所有功能都搞定后，最关键的一步来了：怎么把这个模拟的朋友圈保存成一张图片发出去？我当时想过让用户自己截图，但那样太不酷了。后来我研究了下，发现有个叫`html2canvas`的库，能把HTML元素直接渲染成Canvas，然后就能导出图片了。
我引入了这个库，然后写了几行代码，就是找到我那个大容器`div`，调用`html2canvas`方法，它就会把整个`div`里的内容“画”到Canvas上。画好之后，再用Canvas的`toDataURL`方法把图片数据拿出来，创建一个临时的`a`标签，把图片数据设为`href`，再模拟点击下载，这样用户就可以直接把生成的朋友圈图片下载到本地了。
整个过程，从想到动手，再到实现导出，前前后后也就花了我两三个晚上。虽然功能挺简单的，但是完成那一刻，心里还是挺有成就感的。那个哥们儿用我的生成器搞了个“假朋友圈”发给他对象，结果他对象真信了，还吃醋了，搞得他还得费劲解释。哈哈，小小的恶作剧，却带来了不少乐子。
这就是我折腾这个微信朋友圈生成器网页版的全过程，挺有意思的一次实践。