关于vue3:为了学习-Vue3我做了一个微信匿名朋友圈

1次阅读

共计 3317 个字符，预计需要花费 9 分钟才能阅读完成。

编程这种货色，必须要实践加实战，能力真正把技能学到。所以，笔者就想着通过一些实战利用来感受一下 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。

正文完