乐趣区

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

缘起

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

退出移动版