缘起

编程这种货色，必须要实践加实战，能力真正把技能学到。所以，笔者就想着通过一些实战利用来感受一下 Vue3 的设计哲学以及作者们的劳动结晶。那么，做点啥好呢？忽然想到当初大家都不怎么爱发微信朋友圈了，毕竟微信这样一个体量的超级 APP，里边都是你的亲戚，共事，老板啥的，有点牢骚话，也不好意思发呀。既然如此，那么就做一个匿名的朋友圈吧，这样，不想让熟人圈子看到的货色，不就有中央藏了吗哈哈哈（想想都有点小冲动了！）

撸码

说干就干，笔者迅速的就初始化了工程，开始了搬砖之旅。开发该我的项目应用的操作系统是 MBP，技术栈是 Vue3 + Vue Router + Axios 这套罕用组合，UI 组件库抉择了 Vant，另外，应用了 dayjs 进行日期解决，也用了 lodash 库，便于间接应用一些工具函数。

登录

既然是发朋友圈，那必定是须要登录态的，为了不想有繁冗的登录注册流程，笔者打算间接接入微信公众号的 JSSDK, 实现微信的受权登录。当然，这里边坑还是有点多，笔者已另写文章用以记录。感兴趣的人可空降至 Vue 微信开发中受权登录的优雅实现。笔者在本我的项目中，接入的是微信静默受权形式，这种受权登录形式用户简直无感知，但也无奈获取用户微信的昵称和头像，不过既然咱主打的是匿名，那不正好匹配了需要嘛（本人当产品的感觉真难受，需要说砍就砍了，哈哈哈哈）

获取不到用户的头像和昵称，在显示上，是不是会显的过于空洞了呢？是的，笔者思考到了。这个问题好说，间接在服务端生成一个昵称库，每来一个用户就随机调配一个不就能够啦！至于头像嘛，本想着也按昵称那样，弄一个头像库的。后果在一次因缘偶合下，笔者发现了这样一个我的项目：

boringavatars
github

这个我的项目能够依据一串随机 hash 值来生成一个对应的头像图片，贼有意思，应用也非常简单，相似如下：

import Avatar from "boring-avatars";<Avatar  size={40}  name="Maria Mitchell"  variant="marble"  colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}/>;

我怅然的在我的项目中应用了它。

公布动静

用户登录后，第一件事天然是公布动静了。发动静这个性能其实不简单，也就是填写表单后提交到服务端。界面我参考了一下微信发朋友圈的设计，而后减少了一个标签，大略如下：

这里波及到了文件上传，思考到服务器带宽无限，笔者应用了七牛云存储作为动态资源服务器，通过客户端直传的形式实现了图片上传。客户端直传祺事很简略，不论是七牛云还是其余云厂商的文件治理服务，都能够应用表单上传的形式（也就是 间接 post 申请传递 formdata 的形式）上传，下边是笔者应用 Axios 进行上传的示例：

const formData = new FormData();formData.append("file", file); // file对象formData.append("token", token); //通过服务端获取的上传凭证formData.append("key", key); //资源名，能够自行设定规定生成const uploadUrl = "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.log(res.data);  });

图片上传其实波及的细节很多，包含上传体验优化啊，图片压缩啊，加水印啊，批量上传，断点续传，分片上传，拜访鉴权啊等等。因为工夫关系，笔者临时没去一一实现，下次笔者肯定独自具体分享下对于图片上传性能的各种细节。

动静列表

动静列表也很简略，在应用了 vant 组件库的状况下，很快就能开发出一个能够下拉刷新，上滑加载更多的信息流列表。大略逻辑实现如下：

<template>  <van-pull-refresh    v-if="feedList.length"    v-model="refreshing"    :pull-distance="200"    @refresh="onRefresh"  >    <van-list      v-model:loading="isLoading"      :finished="finished"      finished-text="没有更多了"      @load="fetchData"    >      <template v-for="feed in feedList" :key="feed.id" class="feed-list">        <FeedItem :data="feed"></FeedItem>      </template>    </van-list>  </van-pull-refresh></template><script lang="ts">import { useAxios } from "@/hooks/useAxios";import { defineComponent } from "vue";import { PullRefresh, List } from "vant";import FeedItem from "./FeedItem.vue";export default defineComponent({  name: "FeedList",  components: {    [PullRefresh.name]: PullRefresh,    [List.name]: List,    FeedItem,  },  data() {    return {      feedList: [],      refreshing: false,      isLoading: false,      finished: false,      page: 1,      apiUrl: "/api/foo/bar", // 申请接口      params: {}, //申请参数    };  },  mounted() {    this.onRefresh();  },  methods: {    fetchData() {      const limit = 10;      // 刷新      if (this.refreshing) {        this.feedList = [];        this.page = 1;        this.refreshing = false;      }      const params = {        p: this.page,        limit,        ...this.params,      };      useAxios.get(this.apiUrl, params).then((res) => {        this.isLoading = false;        this.feedList = [...this.feedList, ...res];        this.page++;        if (res.length < limit) {          // 到最初了          this.finished = true;        }      });    },    onRefresh() {      this.finished = false;      this.isLoading = true;      this.fetchData();    },  },});</script>

最初，笔者再加了一个 tab 组件，用来展现所有动静和我的动静，实现成果如下：

写在最初

匿名朋友圈尽管只是很简略的一个小我的项目，但其实实现起来，还是真的有蛮多细节的。笔者除了实现了公布动静和刷动静以外，也实现了点赞和评论等性能，后续的迭代中，我会持续分享其余性能点的实现细节，心愿能对读者有所启发。当然，也心愿有大佬能够一起交换（给予领导）。笔者已将我的项目部署到服务器上，能够复制该链接到微信中关上拜访，也能够扫码拜访：

对于笔者

一个长期在初创团队单打独斗的家养程序员，用PHP/Python做过服务端开发，现次要做前端Web开发。做过一阵子前端开发后，笔者发现开发效率和性能复用性，是咱们前端编程最外围的两大痛点。所以笔者始终在思考如何解决这两大痛点，而后争取早日脱离996，赢取白富美，走上人生巅峰（嘿嘿嘿～）。欢送有气味相投之士和我探讨，增加笔者微信whitney1289。