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…
Antd3中的受控表单组件封装实例
展示效果 要求：左边是可以可以搜索的select，搜索结果点击搜索按钮执行搜索操作； 代码实现 import React, { memo, useState } from 'react' import { Button, Input, Select } from 'antd' import _ from 'lodash' import {…
网页切到后台恢复后刷新数据
使用场景 商品促销的时候，购买完成后需要恢复原价（就是刷新页面），但是支付不是当前页面完成的，是跳转到了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, // 一秒钟换一次 …
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…