文章

随着网页内容的丰富化，我们使用自定义字体来处理漂亮个性化的网页呈现，所以我们会在网页中使用自定义字体，但是也伴随着给我们带来了一些问题，那就是自定义字体比较大，尤其是中文字体，随便就是好几兆，会给用户一种网页加载很慢的感觉，所以针对上述的问题需要做一部分优化： 下面是我项目使用的一些字体的大小： 1、设置 font-display: swap 我们需要在美观和性能之间做一个取舍和平衡点，查看MDN…

一、视频播放 支持的格式：https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Video_codecs webm,mp4,3gp,quicktime,ogg 体验优化 显示封面：有些浏览器不支持poster，我们需要使用div模拟一个层遮罩上去，点击的时候隐藏； 自动播放：大多数浏览器都是将自动播放禁用的，除非你使用的静音状态； 设…

场景描述 下图所示表单有三个字段，“跳转文案”和“跳转链接”只要填写了其中一个这两个字段就要变成必填，反之，两个都为空的时候两个字段都变成非必填；简单描述就是要吗都填写，要吗都不填写。 如下图所示，校验规则是要基于两个字段的值动态的生成的；也就包含了自己修改了也要动态的修改自己是否为必填； 解决方案 尝试过使用下面的方案 在state存储上面的两个字段的值，然后计算是否必填然后赋值给表单的校验规则…

前言 在前端获取视频资源的信息有下面的两种方式： 1、使用FileReader读取为base64，然后赋值给视频的src属性； 2、使用URL.createObjectURL创建一个临时的url地址给视频的src属性； FileReader实现 对比上面的两种方式，FileReader随着读取文件的变大会导致读取到的base64是空的，也比较慢（因为需要完成整个文件的读取，尤其是在低配置的电脑更加…

一直在使用antd（Ant Design），因为其丰富的组件库给管理后台开发带来了很多的便利性，让我们只需要关注业务。里面也有很多实现方案值得借鉴，本文就以Popconfirm的实现做个介绍。 我们先看是如何使用的，下面是官方给出的例子： import { Popconfirm, message } from 'antd'; function confirm(e) { consol…

一、使用本地canvas截取 我们在网页上传视频后，如果能给视频设置一个封面图，用户体验会比较好，但是如果使用video标签的默认实现，部分浏览器会显示视频的第一帧，有些浏览器则怎么都不会展示； 通过创建canvas标签，利用其context.drawImage() 方法在画布上绘制该视频，然后运用canvas.toDataURL方法转换canvas上的图片为base64格式，并将base64格式…

1、禁止一个容器上所有的鼠标事件 例如我们不想删除事件重新注册事件的时候很有用； .box{ pointer-events: none; } 2、禁止用户选择某个容器下的文本； .box{ user-select: none; } 3、设置非absolute的元素的z-index 如果相同父容器下面还有absolute的元素，可以设置比较大的z-index，放在absolute上层展示； .box…

Element.scrollTo 是一个dom元素上的方法，可以将元素滚动到指定的坐标位置，使用方法如下： element.scrollTo(x-coord, y-coord)element.scrollTo(options) 参数说明： x-coord 是期望滚动到位置水平轴上距元素左上角的像素。 y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。 options 是一个ScrollT…

1、Text文本超出使用省略号 numberOfLines为1，1行超出就省略了，设置2，就是超出2行就会省略； <Text style={styles.raceTitle} numberOfLines={1}> {data.match_name} </Text> 2、Text同一行文本显示不同的样式 使用嵌套的文本会继承样式；例如一行有一部分是高亮；单个文本标签就会换行例…

前言 在项目中我一般喜欢一些预处理css处理器来开发代码，首先是因为灵活，其次就是能很好的处理样式的命名空间，防止样式冲突。 场景 在React相关的项目开发中，我们的开发方式是每一个组件中会有一个单独的less文件，如果需要让分散在项目中的less文件全部抽取到一个统一的css文件中，就需要用到extract-text-webpack-plugin插件实现样式的抽取。 该插件是webpack 4…

在react-scripts中默认是不支持less的，但是由于less的很多优点，我们在项目中做一些修改。 升级版本 原版本： "react-scripts": "0.9.x", 升级后版本： "react-scripts": "^4.0.1", 支持less文件编译 要支持less，就需要安装less和less-lo…

展示效果 要求：左边是可以可以搜索的select，搜索结果点击搜索按钮执行搜索操作； 代码实现 import React, { memo, useState } from 'react' import { Button, Input, Select } from 'antd' import _ from 'lodash' import { apiSe…

使用场景 商品促销的时候，购买完成后需要恢复原价（就是刷新页面），但是支付不是当前页面完成的，是跳转到了App的收银台进行的操作，等收银结束后返回到商品页面，页面没有刷新，所以还是显示的以前的价格； 我们要做的就是收银台关闭之后要重新请求一下接口完后，完成数据的更新； 问题分析 尝试监听过pageshow事件，但是pageshow事件是在页面切走之后（一般是解决跳转之后页面返回的问题），再切回来才…

场景 有时候我们会将我们的网页保存为截图，供离线观看和传播。相对于直接保存一个网页，图片有着不易修改，单独文件的好处，所以实现网页的截图还是还有必要的。 方案 经过在网上找一些插件，其中html2canvas插件用的人比较多，比较好的还有dom-to-image，这两个插件都可以实现网页的截图生成canvas功能。此处就以html2canvas为例记录一下笔记。 这两个插件都提供了npm包，所以可…

前言 随着谷歌表格API升级到第四个版本以后，虽然提供了更快的表格数据读取API，但是还有就是需要授权才能读取到数据，即使是发布到网络的表格。所以我们在做这一升级的时候，尝试了很多的方法，也走过了很多的坑，下面我就简单总结一下。 方案 首先我找到了读取表格数据的API 接口： https://developers.google.com/sheets/api/reference/rest/v4/sp…

前言 我们在做开发的时候，需要将自己开发的网页分享到facebook、telegram、line等页面。然后需要在分享到的社交软件或者是朋友圈的时候，展示一些和链接相关的文案和图片（也就是富媒体展示）。在国内的一些社交网站上可以调用SDK或者url使用传递参数的方式来展示分享的内容。 方案 一、生成数据源 社交平台获取链接相关的信息时，一般都是通过抓取链接响应的meta标签来实现的（可以理解成我们…

前言 基于webpack开发的时候，我们有些代码只需要在开发时期来运行，例如打印详细的错误或警告信息。 有些代码我们需要在线上运行的时候在执行。例如数据埋点，如果在开发的时候就运行，会导致线上埋点的结果不是很准确，失去了分析的意义。 实现 今日我通过查看部分库的源代码，里面用到了webpack的 DefinePlugin，这个插件可以定义一个webpack打包时的全局变量，在我们的代码中可以通过判…

最近将React升级到了16.2，也将项目的React-Router升级了v4，我主要说一下我的升级之路。 React 16 新特性 1、render支持了多种的返回类型，例如数组和代码片段等； 2、更好的错误处理，新增componentDidCatch钩子 ； 3、支持自定义DOM属性，属性会透传； 4、体积更小（比15减少了32%），删除了内置的类型检查React.PropTypes； 5、P…