像编程这样的东西，一定要理论和实践相结合，才能真正学到技能。因此，笔者想通过一些实际应用来感受一下Vue3的设计理念和作者们的劳动结晶。那么该怎么办？突然想到，大家不喜欢发朋友圈了。毕竟微信这么大的超级app，里面全是你的亲戚、同事、上司等等，你也不好意思发什么牢骚。既然如此，那我们就做一个匿名的朋友圈吧。这么一来，不想让熟人圈子看到的东西就没有地方藏了吗？笔者很快就初始化了项目，开始了搬砖之旅。本项目开发使用的操作系统为MBP，技术栈为Vue3+VueRouter+Axios的常见组合。UI组件库选择Vant。另外，日期处理使用了dayjs，也使用了lodash库，方便直接使用。工具功能。由于登录是发朋友圈，所以必须先登录。为了不出现复杂的登录注册过程，笔者打算直接访问微信的JSSDK公众号，实现微信的授权登录。当然这里还是有很多坑，笔者另外写了一篇文章记录一下。有兴趣的可以空投Vue微信开发授权登录的优雅实现。在本项目中，笔者接入了微信静默授权方式。这种授权登录方式对用户来说几乎是无感的，但是也无法获取到用户的微信昵称和头像。但是，由于我们主要关注匿名性，因此并不完全符合需求。嗯（做产品的感觉真的很舒服，有求必应，哈哈哈哈）如果拿不到用户的头像和昵称，会不会在展示中显得太空？是的，我已经考虑过了。这道题说起来容易，直接在服务器端生成一个昵称库，给每个用户随机分配一个就行了！至于头像，我想我会像昵称一样创建一个头像库。结果机缘巧合下，笔者发现了这样一个项目：boringavatarsgithub这个项目可以根据一串随机的hash值生成对应的头像图片，非常有趣，使用起来也非常简单，类似如下：importAvatar来自"boring-avatars";;我很高兴在我的项目中使用它。发布动态用户登录后，首先要做的就是发布动态。发布新闻的功能其实并不复杂，就是填好表格后提交给服务器。界面我参考了微信朋友圈的设计，然后加了个标签，大致如下：这里涉及到文件上传。考虑到服务器带宽有限，笔者使用七牛云存储作为静态资源服务器，直接通过客户端上传。图片上传的实现方式。客户端直接转账非常简单。无论是七牛云还是其他云厂商的文件管理服务，都可以使用表单上传的方式（即直接post请求传递表单数据的方式）上传。下面是笔者使用axios上传的例子：constformData=newFormData();formData.append("文件",文件);//文件对象formData.append("token",token);//上传通过服务器获取的凭据formData.append("key",key);//资源名称，可以自己设置规则生成constuploadUrl="http://up-z2.qiniu.com";axios.request({url:uploadUrl,method:"post",onUploadProgress(progressEvent){//上传进度},data:formData,timeout:0,headers:{"Content-Type":"multipart/form-data"},}).then((res)=>{//上传文件信息console.日志(res.data);});图片上传其实涉及到很多细节，包括上传体验优化、图片压缩、加水印、批量上传、断点续传、分片上传、访问认证等等。由于时间关系，笔者暂时没有一一实现。下一次，笔者将单独分享图片上传功能的各种细节。动态列表动态列表也很简单。在使用vant组件库的情况下，可以快速开发一个可以下拉刷新，上滑加载更多信息流的列表。大概图现实如下：最后，笔者再添加了一个选项卡组件来显示所有动态和我的动态。实现效果如下：虽然只是最后在匿名朋友圈写的一个很简单的小项目，但其实实现的细节还是蛮多的。除了作者完成发帖和发帖更新外，还实现了点赞评论等功能。在后续的迭代中，我会继续分享其他功能点的实现细节，希望能对读者有所启发。当然也希望有大佬一起交流（指导）。作者已经将项目部署到服务器，可以复制链接到微信打开访问，也可以扫码访问：长期以来，一直用PHP/Python做服务器端开发，主要做前端web开发。在做了一段时间的前端开发之后，笔者发现开发效率和功能复用性是我们前端编程的两大核心痛点。所以笔者一直在思考如何解决这两大痛点，然后争取早日走出996，拿下白富美，走上人生巅峰（呵呵呵呵~）。欢迎志同道合者与我讨论，加作者微信imwty2023。
