基于react/vue开发一个专属于程序员的朋友圈应用

时间 2021-02-14

标签 javascript css html 前端 vue java node react webpack ios 栏目 React 繁體版

原文原文链接

前言

今天原本想开源本身写的CMS应用的，可是因为五一期间笔者的mac电脑忽然崩溃了，全部数据没法恢复，致使部分代码丢失，但庆幸的是cms的打包文件已上传服务器，感兴趣的朋友能够在文末连接中访问查看。javascript

今天要写的H5朋友圈也是基于笔者开发的cms搭建的，我将仿照微信朋友圈，带你们一块儿开发一个能发布动态（包括图片上传）的朋友圈应用。有关服务端部分笔者在本文中不会细讲，后续会在cms2.0中详细介绍。css

你将收获

使用umi快速建立一个H5移动端应用
基于react-lazy-load实现图片/内容懒加载
使用css3基于图片数量动态改变布局
利用FP建立一个朋友圈form
使用rc-viewer查看/旋转/缩放朋友圈图片
基于axios + formdata实现文件上传功能
ZXCMS介绍

应用效果预览

朋友圈列表

查看朋友圈图片

发布动态
html

正文

在开始文章以前，笔者想先粗略总结一下开发H5移动端应用须要考虑的点。对于任何移动端应用来讲，咱们都要考虑以下问题：前端

首屏加载时间
适配问题
页面流畅度
动画性能
交互友好
提供用户反馈

这些不只仅是前端工程师须要考虑的问题，也是产品经理和交互设计师考虑的范畴。固然还有不少实际的考虑点须要根据自身需求去优化，以上几点大体解决方案以下：vue

提升首屏加载时间 能够采用资源懒加载+gzip+静态资源CDN来优化，而且提供加载动画来下降用户焦虑。
适配问题 移动端适配问题能够经过js动态设置视口宽度/比率或者采用css媒介查询来处理，这块市面上已经有很是成熟的方案
页面流畅度 咱们能够在body上设置-webkit-overflow-scrolling:touch;来提升滚动流畅度，而且能够在a/img标签上使用 -webkit-touch-callout: none来禁止长按产生菜单栏。
动画性能 为了提升动画性能，咱们能够将须要变化的属性采用transform或者使用absolute定位代替，transform不会致使页面重绘。
提供用户反馈 提供友好的用户反馈咱们能够经过合理设置toast，modal等来控制

以上介绍的只是移动端优化的百里挑一，有关前端页面性能优化的方案还有不少，笔者在以前的文章中也详细介绍过，下面咱们进入正文。java

1. 使用umi快速建立一个应用

笔者将采用umi做为项目的前端集成解决方案，其提供了很是多了功能，使用起来也很是方便，而且对于antd和antd-mobile自动作了按需导入，因此熟悉react的朋友能够尝试一下，本文的方案对于vue选手来讲也是适用的，由于任何场景下，方法和思惟模式都是跨语言跨框架的。node

目前umi已经升级到3.0，本文所使用的是2.0，不过差别不是很大，你们能够放心使用3.0. 具体使用步骤以下react

// umi2.0
// 新建项目目录
mkdir friendcircle
// 建立umi项目
cd friendcircle
yarn create umi
// 安装依赖
yarn
yarn add antd-moblie

这样一个umi项目就建立好了。webpack

2. 基于react-lazy-load实现图片/内容懒加载

在项目建立好以后，咱们先分析咱们须要用到那些技术点：

笔者在设计时研究了不少懒加载实现方式，目前采用react-lazy-load来实现，好处是支持加载事件通知，好比咱们须要作埋点或者广告上报等功能时很是方便。固然你们也能够本身经过observer API去实现，具体实现方案笔者在几个很是有意思的javascript知识点总结文章中有所介绍。
具体使用方式：ios

<LazyLoad key={item.uid} overflow height={280} onContentVisible={onContentVisible}>
    // 须要懒加载的组件
    <ComponentA />
</LazyLoad>

react-lazy-load使用方式很是简单，你们不懂的能够在官网学习了解。

3. 使用css3基于图片数量动态改变布局

目前在朋友圈列表页有个核心的需求就是咱们须要在用户传入不一样数量的图片时，要有不一样的布局，就像微信朋友圈同样，主要做用就是为了让用户尽量多的看到图片，提升用户体验，以下图所示例子：

咱们用js实现起来很方便，可是对性能及其不友好，并且对于用户发布的每一条动态的图片都须要用js从新计算一遍，做为一个有追求的程序员是不可能让这种状况发生的，因此咱们用css3来实现，其实有关这种实现方式笔者在以前的css3高级技巧的文章中有详细介绍，咱们这里用到了子节点选择器，具体实现以下：

.imgItem {
    margin-right: 6px;
    margin-bottom: 10px;
    &:nth-last-child(1):first-child {
      margin-right: 0;
      width: 100%;
    }
    &:nth-last-child(2):first-child,
    &:nth-last-child(3):first-child,
    &:nth-last-child(4):first-child,
    &:first-child:nth-last-child(n+2) ~ div {
      width:calc(50% - 6px);
      height: 200px;
      overflow: hidden;
    }
    &:first-child:nth-last-child(n+5),
    &:first-child:nth-last-child(n+5) ~ div {
      width: calc(33.33333% - 6px);
      height: 150px;
      overflow: hidden;
    }
}

以上代码中咱们对于一张图片，2-4张图片，5张以上的图片分别设置了不一样的尺寸，这样就能够实现咱们的需求了，还有一个要注意的是，当用户上传不一样尺寸的图片时，有可能出现高低不一致的状况，这个时候为了显示一致，咱们可使用img样式中的object-fit属性，有点相似于background-size，咱们能够把img便签看做一个容器，里面的内容如何填充这个容器，彻底用object-fit来设置，具体属性以下：

fill 被替换的内容正好填充元素的内容框。整个对象将彻底填充此框。若是对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框
contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，所以若是宽高比与框的宽高比不匹配，该对象将被添加“黑边”
cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。若是对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框
scale-down 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁获得的对象尺寸会更小一些
none 被替换的内容将保持其原有的尺寸

因此为了让图片保持一致，咱们这么设置img标签的样式：

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4. 利用FP建立一个朋友圈form

FP是笔者开源的一个表单配置平台，主要用来定制和分析各类表单模型，界面以下：

经过该平台能够定制各类表单模版并分析表单数据。这里朋友圈功能咱们只须要配置一个简单的朋友圈发布功能便可，以下：

因为笔者电脑数据丢失致使代码部分损失，感兴趣能够了解一下。

5. 使用rc-viewer查看/旋转/缩放朋友圈图片

对于朋友圈另外一个重要的功能就是能查看每一条动态的图片，相似于微信朋友圈的图片查看器，这里笔者采用第三方开源库rc-viewer来实现，具体代码以下：

<RcViewer options={{title: 0, navbar: 0, toolbar: 0}} ref={imgViewRef}>
  <div className={styles.imgBox}>
    {
      item.imgUrls.map((item, i) => {
        return <div className={styles.imgItem} key={i}>
          <img src={item} alt=""/>
        </div>
      })
    }
  </div>   
</RcViewer>

由上代码可知咱们只须要在RcViewer组件里写咱们须要的查看的图片结构就好了，其提供了不少配置选项但是使用，这里笔者在option中配置了title，navbar，toolbar均为0，意思是不显示这些功能，由于移动端只须要有基本的查看，缩放，切换图片功能便可，尽量轻量化。效果以下：

当咱们点击动态中的某一张图片时，咱们能够看到它的大图，并经过手势进行切换。

6. 基于axios + formdata实现文件上传功能

实现文件上传，除了采用antd的upload组件，咱们也能够结合http请求库和formdata来实现，为了支持多图上传并保证时机，咱们采用async await函数，具体代码以下：

const onSubmit = async () => {
    // ... something code
    const formData = new FormData()
    for(let i=0; i< files.length; i++) {
      formData.delete('file')
      formData.append('file', files[i].file)
      try{
        const res = await req({
          method: 'post',
          url: '/files/upload/tx',
          data: formData,
          headers: {
              'Content-Type': 'multipart/form-data'
          }
        });
        // ... something co
      }catch(err) {
        Toast.fail('上传失败', 2);
      }
    }

其中req是笔者基于axios封装的http请求库，支持简单的请求/响应拦截，感兴趣的朋友能够参考笔者源码。

7. ZXCMS介绍

ZXCMS是笔者开发的一个商业版CMS，能够快速搭建本身的社区，博客等，而且集成了表单定制平台，配置中心，数据分发中心等功能，后期会扩展H5可视化搭建平台和PC端建站平台，成为一个更加只能强大的开源系统。设计架构以下：

具体界面以下：

一个笔者配置的社区平台：

文章详情页：

社区支持评论，搜索文章等功能。如下介绍后台管理系统：

简单介绍一下，后期笔者会专门出文章介绍具体实现方式和源码设计。

8. 源码地址

因为笔者电脑数据丢失，只能找到部分源码，因此你们能够参考如下地址：

开源不易，欢迎支持～

最后

若是想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一块儿学习讨论，共同探索前端的边界。