文章

为scrollTo添加平滑滚动降级方案

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

服务器端Cookie的常见操作

HTTP Cookie(也叫 Web Cookie 或浏览器 Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据。浏览器会存储 cookie 并在下次向同一服务器再发起请求时携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器——如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。 — MDN – H…

RN开发常见问题

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

webpack抽取项目中的less文件

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

升级react-scripts支持less

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

网页切到后台恢复后刷新数据

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

使用html2canvas实现截图下载

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

使用Node.js快捷读取谷歌表格数据

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

前端使用Facebook和Line等分享

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

使用DefinePlugin改变打包流程

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

React-Router4升级之路

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

Nginx反向代理并支持解析php

前言 接口联调时,有一些场景,我们需要给本地的服务(webpack,gulp等启动的服务)使用域名访问,例如: 1、第三方登录回调地址不支持localhost2、使用cookie作为认证的接口 我们需要修改本地的hosts文件,将能跨域访问的域名指向我们的服务。 对于同一个业务的多个项目,所以我们启动服务器的时候一般会从80端口上运行才能保证访问的时候不加端口。如果我们使用webpack-dev-…

swiper常见使用以及问题整理

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

webpack4升级指南

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

Webpack输出资源内容到html文件

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

Web页面图片预加载方案

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