继续向前~-CSDN博客

原创 Ract父组件调用子组件方法

useRef，useImperativeHandle,forwardRe会用到这3个hooks。

2023-08-31 17:44:35 160

一、ant-design Input 组件取消自动显示输入历史Form默认开启 aotuComplete 功能，当submit 时会记录输入历史，取消自动补充功能，只需在Form 上加autoComplete=“off”即可关闭自动提示输入历史 (这里的Complete的C需要大写)<Input placeholder="请输入验证码" autoComplete="off"/>如果是原生 js 的 input 框则增加属性: autocomplete=“off” (这里的complet

2021-07-05 14:31:38 3637 1

原创 git提交失败报错running pre-commit hook:lint-staged

新项目，在git提交报如下错这句话的意思，大概是有一个钩子，提交前检查项目代码的规范，eslint的检查。提交失败的原因：项目中error过多，导致检测未通过，提交失败。来个简单粗报见效快的解决方法不进行检查删除掉pre-commit hook，具体在项目文件夹.git\hooks目录下，找到文件pre-commit...

2021-03-25 09:55:44 1294

原创 Ant design pro formItem validator报警告 `callback` is deprecated. Please return a promise instead.

最近做表单校验时遇到一个警告 `callback` is deprecated. Please return a promise instead.原因 :新版的antd使用了React的hooks，表单中的字段效验方法进行了一些修改。原来的回调方法改成返回一个Promise对象原来的写法 const NameValidator = (rule, value, callback) => { if (value) { const nameLength = getText

2021-02-25 10:04:04 6620 4

转载 react 解决antd之Cascader级联标签、Select标签无法动态修改defaultValue的属性值的办法

在antd的Cascader级联标签中，想要用变量来控制默认值的显示，经过尝试发现默认值只能写死某个数，Select标签也是一样。例如： <Cascader key={aabbcc} options={this.state.activeStoreCategoryList} expandTrigger="hover" defaultValue={[440,442,626]} onChange={this.categoryChange} />解决办法：为

2021-02-05 11:02:34 2331

转载 antd Design中关于Form表单 setFieldsValue 的使用

最近项目使用的是antd Design 4.x 版本，碰到个需要加载后端数据并展示，并且用户可以进行修改的需求，前端采用的是antd的Form表单来实现form表单要回填数据一般会想到的是initialValues，但是这是适用于初始化值的时候，官方文档的原话：“initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新” 。搜索一番setFieldsValue的使用，基本上都是：this.props.form.setFieldsValue, props

2021-02-05 10:58:16 7198 4

原创解决 nginx 启动错误“nginx: [emerg] host not found in upstream “

解决 nginx 启动错误"nginx: [emerg] host not found in upstream "利用nginx进行反向代理的时候，我们会配置proxy_pass。在启动nginx的时候，会报如下错误：其实nginx配置语法上没有错误的,只是系统无法解析这个域名,所以报错.解决办法就是添加dns到/etc/resolv.conf 或者是/etc/hosts,让其能够解析到IP。类似windows下的hosts文件的修改。具体步骤如下：vim /etc/hosts //修改ho

2020-08-06 17:16:47 3682

原创处理iOS系统h5页面长按二维码图片不识的问题

问题环境测试设备：手机：iphoneXR,系统：iOS13.4.1微信版本：7.0.12问题：二维码图片，长按不识别，且图片浮在屏幕上然后会出现菜单提示保存图片iOS系统中，点按图片，图片会浮在屏幕上方，图片下方会出现iOS系统默认的共享等菜单。这种情况，无法实现长按识别问题。同一版本的微信iphone系统低版本没问题解决方法，设置图片样式，阻止默认行为： img { -webkit-touch-callout: none; }...

2020-06-04 17:50:16 1691

原创微信小程序未授权的用户获取openId

首先微信小程序在用户未授权的情况下是否可以获取用户的openId呢，这个答案是肯定的，能！那怎么在用户未授权的情况下获取用户的openid呢看一下微信小程序获取openId的API我们应该会一目了然js_code的值需要前端通过调wx.login获取前端代码wx.login({ success (res) { if (res.code) { ...

2020-03-03 11:15:32 5034 1

转载移动端H5页面禁止长按复制和去掉点击时高亮

/*设置IOS页面长按不可复制粘贴，但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:auto;*/ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-sele...

2019-12-09 14:38:34 383

原创安利一款h5页面生成海报的插件---html2canvas

html2canvas会将HTML内容写入Canvas生成图片html2canvas官网在开始使用脚本之前，需要了解一些有关脚本及其某些限制的知识。**介绍**html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。浏览器兼容性它不需要来自服务器任...

2019-10-23 17:35:29 2042

转载 React中constructor(props){ } super() 、super(props)究竟是什么

定义class组件，为什么需要加上 super() ？1.我们尝试去掉 super() 看看编译的结果：constructor() { this.state = {searchStr: ''}; this.handleChange = this.handleChange.bind(this);}编译错误：提示少写了super()，导致 Reference Errorcla...

2019-10-23 17:06:15 374

原创针对小程序单独的页面生成二维码 - 踩坑

首先看小程序官方API，有三种生成二维码的形式，可以根据产品需求业选择不同的生成方式，文档里写的很清楚，这里不再多阐述。获取access_tokenhttps://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=秘钥请求生成二维码 (json数据去请求）,我...

2019-09-02 15:05:07 4693

原创 JavaScript超长数字问题总结

最近在做项目的时候遇到2个超长数字的问题在这里总结下问题一： app里的内嵌h5页面, IOS系统，超长数字颜色会变成蓝色在iPhone 手机上默认值是（电话号码显示为拨号的超链接）<meta name="format-detection" content="telephone=yes"/>可将telephone=no，则手机号码不被显示为拨号链接<meta ...

2019-08-22 11:37:26 2135 1

原创内嵌在app里的h5页面实现分享

今天在做项目的时候，有一个功能是内嵌在app里的h5页上有一个按钮，点击按钮要呼起微信的通讯录，进行分享，分享完成之后调后端接口记录分享次数。如下图，呼起微信通讯录的界面是这样子：由于微信限制，首先可以确认的一点是，直接呼起微信通讯录，就记为分享成功（不管是选择联系人去分享还是直接点击页面上的关闭按钮都会识别为分享成功）。实现分享，并且分享后有其他操作，所以app要提供一个协议供h...

2019-07-03 17:25:12 10757 4

转载 css - 3D旋转

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D旋转</title> <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></...

2019-07-01 15:58:03 227

原创 git husky预提交失败的解决办法

今天git合并test分支有冲突，解完冲突后提示代码，有以下报错git -c diff.mnemonicprefix=false -c core.quotepath=false -c credential.helper=sourcetree commit -q -F /var/folders/gv/sxmmvh_s4l9bfrb6mjsl0v800000gn/T/SourceTreeTem...

2019-07-01 15:46:44 6754 3

原创关于APP内嵌H5页返回按钮的问题

用h5做了一个简单的攻略页，浏览页面20s后自动发放一个攻略红包，当浏览页面不到20s 点击页面顶部的返回按钮要先清定时器，然后再返回上一页，h5页面是react单页面这个h5页是被内嵌在微信小程序和ios、安卓的app里，首先在小程序里用web-view把h5页引进来，顶部的返回是小程序原生的就可以完成这个功能，点击返回的时候，页面就会销毁， react页面销毁会执行componen...

2019-07-01 10:56:16 8228 1

转载解决因为手机设置字体大小导致h5页面在webview中变形的BUG

解决因为手机设置字体大小导致h5页面在webview中变形的BUG首先，我们做了一个H5页面，在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局，通过JS来动态计算网页的视窗宽度，动态设置html的font-size，一切都比较完美。这时候，你自信满满的将h5地址交给了APP工程师，做了一个WEBVIEW嵌套，然后就顺利交工了。测试组在一堆手机中测试APP，突然，在某个手机上打开，...

2019-06-28 10:00:38 3508

原创 CSS -webkit-box-orient: vertical 属性编译后丢失问题详解

最近在写项目的时候遇到一个问题，需求是标题只显示2行，超出显示...代码如下overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidd...

2019-06-17 16:51:56 25233 3

原创 h5页面跳转微信小程序页面

// 判断环境是否在微信小程序里 function isMiniProgram(){ var ua = navigator.userAgent.toLowerCase(); var envType='#'; if(ua.match(/MicroMessenger/i) == 'micromessenger...

2019-05-15 17:33:37 41668 8

转载 Mac之zip unzip 命令（压缩）

最通俗的用法zip -q -r -e -m -o myfile.zip someThing-q 表示不显示压缩进度状态 -r 表示子目录子文件全部压缩为zip；这部分比较重要，不然的话只有something这个文件夹被压缩，里面的没有被压缩进去 -e 表示你的压缩文件需要加密，终端会提示你输入密码的；还有种加密方法，这种是直接在命令行里做的，比如zip -r -...

2019-04-02 09:02:52 2646

原创 git 解决每次更新代码都要输入用户名密码

使用git pull或者git push每次都需要输入用户名和密码很繁琐，耽误时间，下边这一条命令实现保存用户名和密码不用再输入git config --global credential.helper store之后再执行git push操作的时候会提示输入用户名和密码（密码正常输入即可光标不会跟着走）这一步输入的用户名密码会被记住, 下次再push代码时就不用输入用户名密码 !...

2019-02-27 18:22:56 1196

原创 node 启动服务报错 Error: listen EADDRINUSE :::17290

这个错误主要是8080端口已被使用。解决方法是换个端口或者杀掉占用的8080端口的进程。查找占用端口的进程lsof -i tcp:17290杀掉进程kill -9 1972然后再重启服务就可以正常运行了...

2019-02-22 14:24:30 340

原创 sublime 安装插件时报错there are no packages available for installation

点击 ctrl+`打开控制台后，发现是因为http://packagecontrol.io/channel_v3.json 获取失败，分析原因发现，在利用sublime进行插件下载时，sublime会调用channel_v3.json文件，点击Preferences->Package Setting->Package Control ->Setting De...

2019-02-18 18:21:51 483 1

转载 Styled-Components

Styled-Components它是通过JavaScript改变CSS编写方式的解决方案之一，从根本上解决常规CSS编写的一些弊端。通过JavaScript来为CSS赋能，我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。尽管像SASS、LESS这种预处理语言添加了很多用用的特性，但是他们依旧没有对改变CSS的混乱有太大的帮助。因此组织工作交给了像 BEM这样的方法，虽然比...

2019-02-13 18:42:29 1008

原创箭头函数与class函数使用Antd Form组件中 Form.create()的方法

经 Form.create() 包装过的组件会自带 this.props.form 属性一、class函数使用Form.create():class CustomizedForm extends React.Component {...代码} CustomizedForm = Form.create({})(CustomizedForm);官网有详细介绍比较完整的代码段cons...

2019-02-12 11:43:50 31346 4

原创 nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory)

每次电脑开机后重新启动nginx后都会报错nginx: [error] open() “/usr/local/var/run/nginx.pid” failed (2: No such file or directory)第一种解决方法：sudo nginx -c /usr/local/etc/nginx/nginx.conf(/usr/local/etc/nginx/nginx.conf...

2019-01-22 14:58:14 15866

转载 mac 解决Nginx出现403 forbidden的方法

项目是nginx+node+reactnode服务启动好之后在浏览器里访问页面遇到Nginx出现403 forbidden的问题试了好几种方法，最后看到这篇文章后解决了&amp;amp;gt;403 就是权限问题在nginx.conf开始加一行user root;没用报nginx: [emerg] getgrnam(“root”) failed in xxx:1继续搜索发现有人这样做在/usr/...

2019-01-21 16:15:52 3004 1

原创 css自定义select右侧下拉箭头

去掉select默认样式去掉select右侧黑色实心三角样式 appearance: none;select{ width: 90%; height: 100%; font-size: .28rem; font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif; outline: 0; b...

2019-01-21 14:22:06 2391 1

转载 devDependencies和dependencies的区别

–save-dev 和 –save 的区别我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如：–save-dev 安装的插件，被写入到 devDependencies 对象里面去， dev是develop（开发）的简写–save 安装的插件，被写入到 dependencies 对象里面去package.json ...

2019-01-15 17:03:02 237

原创基于react和swiper4实现无缝轮播组件中间显示主图左右显示部分图

子组件 commonSwiper.jsimport React, {Component} from 'react'import ImportedImage from '../../../common/components/importedImage'import '../../../common/sass/swiper'import Swiper from '../../../commo...

2019-01-14 15:44:09 3539

原创利用js+css3实现弹幕的淡入淡出效果

html <div className={ashow ? `barrage-wrapper on` : `barrage-wrapper off`}> <div>{toastTxt}</div> </div>css}/* 利用对opacity的控制实现淡入淡出 */.barrage-wrapper { ...

2019-01-14 14:06:11 818

转载 CSS3 animation 帧动画 steps详解

我们知道CSS3的Animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-modeanimation-timing-functionanimation默认以...

2019-01-11 18:31:29 1029

原创 css 实现空心三角形

html &lt;div className="box"&gt; &lt;div className="arrow"&gt;&lt;/div&gt; &lt;/div&gt;css.box{ width: 100%; position: re

2019-01-10 19:24:38 1022

转载 react中将带标签的字符串转义为html解析

使用 dangerouslySetInnerHTML={{ __html: htmlString}}return ( &lt;div&gt;{props.record.contents.map(value =&gt; ( &lt;div className={styles.expendBlock}&gt; &lt;p dan...

2019-01-08 19:27:53 2601

原创 h5页面在真机上绑定事件失效

前2天在做项目的时候遇到一个问题功能是这样的，点击页面上任意地方，关闭页面的浮层 document.addEventListener('click', function(){ // dosomething })然而这样的，在浏览器的模拟器上没有问题，在ios真机上会失效原因：是在ios系统中，例如document,div,body这些本身并没有可以被点击的属性的元素不能作为托...

2019-01-07 10:43:02 762

原创 swiper实现无缝轮播中间显示主图两边显示部分

现在有很多轮播的效果都是中间显示主图，两边显示部分图片的效果，用swiper实现其实很容易，先上效果图css实时很简单给swiper-wrapper宽度设置成100%；swiper-slide设置成80%就可以两边显示部分了html <div id="slide"> <div cl...

2019-01-04 19:32:14 16718 6

原创 nginx 出现504 Gateway Time-out的奇葩问题

元旦刚回来上班第一天遇到的问题，也就是2019年的第一个问题，值得记录下~该问题是发生的mac下上班第一天，打开电脑，启动nginx，每次启动nginx总是报一个错nginx: [error] open() “/usr/local/var/run/nginx.pid” failed (2: No such file or directory)发生这个问题的原因是就是每次重新启动，系统...

2019-01-03 19:19:07 1040

原创利用js实现页面关闭时发送http请求

最近在做项目的时候，有这样一个功能，当用户在填写表单之后，或是填写了部分表单，但并没有点击提交，而且是离开了页面，这时需要前端做一个事，就是发个请求到后端保存用户填写的表单数据。一、在做这件事件之前需要弄清楚beforeunload和unload的区别1.onunload事件是已经从服务器读取到了数据，在替换到当前页面之前执行的。2.onbeforeunload事件是正要去服务器读...

2019-01-03 18:49:06 5881 1

空空如也

export报错SyntaxError: Unexpected token export