分类： 前端技术

前言 在前端获取视频资源的信息有下面的两种方式： 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…

swiper中文API：https://www.swiper.com.cn/api/index.html 1、实现下面的布局(主要看左右两边的) 上面的例子看出，中间部分居中在页面水平中央，两边显示一小部分,下面是关键代码： const newsSwiper = new Swiper('#newsSwiper', { // 循环展示 loop: true, // 一秒钟换一次 number: 10…

因为webpack4有很多吸引人的特性，在开发的时候能能提高效率，所以将团队项目的webpack3升级到了webpack4； 新特性 对Node.js版本必须>=8.9.4； 支持WebAssembly； 支持多种模块类型； 通过mode来处理开发环境和线上环境优化； 更简单配置的拆包功能； 更快的热加载功能； 零配置模块打包（output:./dist/main.js；entry:./sr…

需求来源 对于小的项目或者单文件的网页，我们将css文件和js文件可以直接内联插入到html中，可以实现单文件部署（使用场景：例如在一些可视化编辑器上直接粘贴生成的html代码就可以运行了）；当然比较大的项目我们可以注入一些公共的样式和js文件的到html中； 我们使用html-webpack-plugin的插件 https://github.com/DustinJackson/html-webp…

现象 在开发活动时，有一个转盘抽奖的功能，要求抽到每个奖项的时候显示不同的图片，我们内心是这样想的； 然而现实却是这样，图片去哪里了啊，原来是图片比较大（之前没有做优化）加载比较慢，所以我们看到了文本，但是没有看到背景。 因为红包组件是动态替换背景图片的，所以图片没有缓存时，都需要立即发请求，所以就导致了加载慢的问题； 示例代码：​ <div className={'redpack-…