前言本来想开源今天写的CMS应用，但是因为5月1号期间我的mac电脑突然死机，所有数据无法恢复，导致部分代码丢失，幸好cms的打包文件已经上传到服务器，感兴趣的朋友可以在文末链接访问查看。今天要写的H5朋友圈也是基于笔者开发的cms。我将模仿微信的朋友圈，带大家开发一个可以发消息（包括上传图片）的朋友圈应用。server部分作者本文不再赘述，后面cms2.0中会详细介绍。你会收获回报使用umi快速创建一个H5移动应用基于react-lazy-load实现图片/内容的懒加载使用css3根据图片数量动态改变布局使用FP创建朋友圈form使用rc-viewer查看/旋转/缩放朋友圈图片是基于axios+formdata实现文件上传功能。ZXCMS介绍应用效果，预览朋友圈列表。查看朋友圈图片，发布动态文字。对于任何一款移动应用，我们都要考虑以下问题：首屏加载时间适配问题页面流畅度动画表现友好交互提供用户反馈这些不仅是前端工程师需要考虑的问题，产品经理和交互设计师也需要考虑.考虑范围。当然，还有很多实际的考虑，需要根据自己的需求进行优化。以上几点的一般解决方案如下：改善首屏加载时间。可以使用资源懒加载+gzip+静态资源CDN进行优化，并提供加载动画减少用户焦虑。适配问题移动适配问题可以通过js动态设置视口宽度/比例或者使用css媒体查询来处理。页面流畅度市场上已经有非常成熟的解决方案。我们可以在body滚动时设置-webkit-overflow-:touch;为了提高滚动流畅度，可以在a/img标签上使用-webkit-touch-callout:none来禁止长按生成菜单栏。动画性能为了提高动画性能，我们可以使用transform或者absolutepositioning来替换需要改变的属性。Transform不会导致页面重绘。提供用户反馈提供友好的用户反馈，我们可以通过合理设置toast、modal等来控制。以上介绍只是针对移动端优化的不多见。前端页面性能优化的解决方案有很多，我在上一篇文章中也有详细介绍，让我们继续文本。1、使用umi快速创建应用。笔者将使用umi作为项目的前端集成方案。它提供了很多功能，使用起来非常方便。它还会自动按需导入antd和antd-mobile，所以我很熟悉。React的朋友可以试一试。本文的解决方案同样适用于Vue玩家，因为在任何场景下，方法和思维方式都是跨语言、跨框架的。目前umi已经升级到3.0。本文使用的是2.0，不过区别不是很大。你可以放心使用3.0。具体步骤如下//umi2.0//新建工程目录mkdirfriendcircle//创建umi工程cdfriendcircleyarncreateumi//安装依赖yarnyarnaddantd-moblie这样就创建了umi工程。2、基于react-lazy-load实现图片/内容的懒加载项目创建好后，首先分析一下需要用到的技术点：笔者在设计时研究了很多懒加载的实现方式，目前使用的是react-lazy-load的好处是支持加载事件通知。比如我们需要做埋点或者广告上报等功能的时候就很方便了。当然你也可以通过观察者API自己实现。具体实现方案在几篇很有意思的javascript知识点总结文章中介绍。具体用法：//需要延迟加载的组件react-lazy-load使用起来非常简单，不懂的可以到官网学习了解。3.使用css3根据图片数量动态改变布局。目前朋友圈列表页有一个核心需求就是当用户传入不同数量的图片时，我们需要有不同的布局，就像微信朋友圈一样。主要功能是为了让用户看到尽可能多的图片，提高用户体验，如下图所示的例子：用js实现很方便，但是对性能极其不友好，而且对于每一个用户发布的动态图片，我们需要用js重新计算一遍。作为一个有追求的程序员，不可能让这种事情发生，所以我们使用css3来实现。其实笔者在之前的css3进阶技巧文章中已经详细介绍了这种实现方式。我们这里使用了子节点选择器，具体实现如下：.imgItem{margin-right:6px;底部边距：10px；&:nth-last-child(1):first-child{margin-right:0;宽度：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);高度：200px；溢出：隐藏；}&:first-child:nth-last-child(n+5),&:first-child:nth-last-child(n+5)~div{width:calc(33.33333%-6px);高度：150px；溢出：隐藏；}}上面的代码中，我们使用了一张图片，2-4张图片，5张以上的图片设置了不同的尺寸，这样我们的需求就可以实现了。另外需要注意的是，当用户上传不同尺寸的图片时，可能会出现高低不一致的情况，此时为了表现出一致性，我们可以使用img样式中的object-fit属性，即有点类似于背景nd-size，我们可以把img便利贴看成一个容器。如何用里面的内容填充容器完全是用object-fit设置的。具体属性如下：fill被替换的内容刚好填充元素的内容框，整个对象将完全填充这个框。如果对象的纵横比与内容框不匹配，对象将被拉伸以适应内容框。替换的内容将被缩放以在填充元素的内容框时保持其纵横比。整个对象在填充框的同时保持其纵横比，所以如果纵横比与框的纵横比不匹配，对象将被赋予“黑边”覆盖替换的内容在保持其纵横比的情况下填充整个内容框的元素。如果对象的纵横比与内容框不匹配，对象将被裁剪以适合内容框缩小内容的大小将与无或包含相同，具体取决于生成的对象大小将是两者中的哪一个beSmallernone被替换的内容会保持原来的大小所以为了保持图片的一致性，我们这样设置img标签的样式：img{width:100%;高度：100%；object-fit:cover;}4.使用FP创建朋友圈表单FP是笔者开源的一个表单配置平台，主要用于自定义分析各种表单模型。界面如下：通过该平台可以定制各种表单模板，分析表单数据。这里我们只需要配置一个简单的朋友圈发布功能，如下：由于笔者电脑数据丢失，部分代码丢失。如果你有兴趣，你可以了解一下。5.使用rc-viewer查看/旋转/缩放朋友圈图片朋友圈还有一个很重要的功能就是可以查看每张动态图片，类似微信朋友圈的图片查看器，这里我使用的是第三方开源库rc-viewer，具体代码如下：{item.imgUrls.map((item,i)=>{return
