- 博客(141)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 create-react-app 中配置便捷路径@
1.安装和初始化$ npm install customize-cra2.在src根目录新建config-overrides.js自定义webpack配置const { override, addWebpackAlias } = require('customize-cra’);const path = require('path')module.exports = override( addWebpackAlias({ '@': path.resolve(__di
2020-12-28 17:24:23
860
1
原创 React 集中配置式路由---React Router Config
npm地址：https://www.npmjs.com/package/react-router-config安装：npm install —S react-router-config react-router-domrouters文件import Layout from '../pages/layout/index'import Child from '../pages/child/index'import Err404 from '../pages/err404/index'const
2020-12-28 17:22:10
1077
原创 React Hooks中父组件中调用子组件方法
子组件import {useState, useImperativeHandle,forwardRef} from 'react';// props子组件中需要接受reflet ChildComp = (props,ref) => { // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用 useImperativeHandle(ref, () => ({ // changeVal 就是暴露给父组件的方法
2020-12-28 17:19:34
5255
4
原创 警告：React Hook useEffect has a missing dependency: ‘click‘
在使用useEffect时，当我们将函数的声明放在useEffect函数外面时，会报eslint警告React Hook useEffect has a missing dependency: 'clickshow'. Either include it or remove the dependency array react-hooks/exhaustive-deps解决方法:1.使用 // eslint-disable-line react-hooks/exhaustive-depsuseE
2020-12-28 17:17:23
19381
原创 manifest.json不能随意删除
create-react-app文件夹中的manifest.json不能随意删除，否则会报错：Manifest: Line: 1, column: 1, Syntax error on Chrome browser不小心误删，可以看看是不是在public文件夹中没有manifest.json文件。我通过添加生成默认值manifest.json来解决它create-react-app报错：{ "short_name": "CloseWeUI", "name": "The front-end U
2020-12-28 17:12:16
4175
原创 React中设置样式
1. 行内样式<div style={{fontSize:'100px'}}></div>2.className在react中设置class时使用className，然后引入对用的css文件<div className="red”></div>3.classnamesNpm地址：https://www.npmjs.com/package/classnames方便我们在react中使用className，可以想vue一样进行动态的类型设置4.
2020-12-28 17:07:01
1418
1
原创 React img标签引入图片的几种方式
React src里面引入图片的几种方式es6不支持在<img />标签内直接写图片的路径，即<img src="../images/photo.png”/>方法1.import imgURL from './../images/photo.png';<img src={imgURL } />方法2.requirerequire方法 这种方法需要注意的是，require里只能写字符串，不能写变量。<img src={require('./../imag
2020-12-28 16:55:13
3261
原创 h5返回循环的问题
有时我们会遇到这样的需求：A 点击跳到 B, B点击跳到 C，C因为业务逻辑的原因，只能通过window.location.href的方式从C跳到B,这样B返回A时的方式就需要注意了：可以通过这样的方式（这里是vue）：let Backlen = history.length - 1;this.$router.go(-Backlen)...
2020-12-28 16:48:39
439
原创 解决nuxt引入插件在IE中的兼容问题
1.pc页面在IE11报错最近在做PC端的页面，引入了three.js（3d动画）和vue-baidu-map（百度地图）以及vue-awesome-swiper（定制轮播，采用了高版本的swiper），在chrome浏览器和edg是没有问题的，但是在ie11以及下是不行的，并且因为报错阻塞了页面一些业务逻辑的运行。先来看一下在IE11中的报错（这里只举例引入vue-awesome-swiper引发的错误）看到错误信息：2.错误原因可以看到是因为引入swiper（vue-awesome-swi
2020-12-23 13:41:48
3970
1
原创 h5监听页面返回
在移动端我们常常需要监听页面的返回，例如用户点击返回按钮时，我们需要给一个提示框，提醒用户是否真的要返回。但是ios以及许多的安卓手机可以左滑返回上一页，所以我们需要监听页面的返回if (window.history && window.history.pushState) { pushHistory(); window.addEventListener("popstate", (e)=> { alert('页面要返回了') }, false);}functio
2020-11-30 16:48:39
3403
原创 react的create-react-app移动rem端适配
1. 安装：npm install lib-flexible postcss-pxtorem -S 2. 引入在项目入口文件index.js引入lib-flexibleimport 'lib-flexible';3. 修改webpack.config.js3.1 初始化配置run eject如果报错可以先提交代码或者显示先删除git3.2. 修改webpack.config.js先引入：const pxtorem = require('postcss-pxtorem')然后找
2020-09-24 11:15:19
1150
1
原创 React跨域
1.安装http-proxy-middleware$ npm install http-proxy-middleware2. 创建setupProxy.js在react项目的src目录下创建setupProxy.jsconst { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use( createProxyMiddleware('/a
2020-09-10 17:33:52
224
原创 create-react-app 按需引入 antd-design
1. 安装和初始化$ npm install -g create-react-app# 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖$ npx create-react-app my-app$ cd my-app$ npm start打开 http://localhost:3000/ 访问你的应用。2. 安装 antd$ npm install --save antd3. 按需加载引入CSS形式，实际上是加载了全部的antd组件样式，再使用其中的部分组件
2020-09-10 14:53:15
1114
原创 pc端获取浏览器内核和版本
function getBroswer(){ var sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/edge\/([\d.]+)/)) ? sys.edge = s[1] : (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1] : (s = ua.match(/msie ([\d.]+)/)
2020-07-14 17:41:45
547
原创 同样line-height下ios和Android显示不一致的问题
问题：当我们设置文字垂直居中时，一般会设置line-heigh于box的高度一致，这是我们很难看出有什么差别。当我们设置icon和文字同时上下居中时，同样的line-height，会发现ios和Android显示不一致，Android会显得偏高原因：这个问题通过css是无法解决的，即使解决了也是一种通过微调来实现的hack方法，因为文字在content-area内部渲染的时候已经偏移了，而c...
2020-04-29 17:28:40
3201
原创 个别手机在微信内无法长按识别二维码
1.问题:在微信中打开H5页面，页面中有一个二维码，长按识二维码关注公众号在大部分手机都是可以实现的，但是目前发现在华为一些型号和iphone11中长按会提示保存图片，而不是识别.2.原因google了很久也没有发现原因，猜想可能是微信的原因3. 解决方法提供以下几种方法，我试了前几中不好用，最后一种可行扩大二维码的图片大小，160*160最合适 （不行）二维码图片放在项目的静态...
2020-04-24 16:16:45
1780
原创 new Date(string)在IE不兼容
问题对于 '2020-02-04' '2020.04.04' 这样的字符串日期，在new Date时在IE中会有将有兼容性问题，会出现new Date('2020-02-04') 为invalid date解决方法将日期字符串中的分隔符替换成“/”，例如'2020/02/04' `...
2020-04-21 23:20:49
320
原创 秀米的编辑的图片无法显示
因为采用秀米的编辑器编辑页面，然后粘贴到自己的富文本编辑器上，再返给前端，在前端显示。所以使用的图片是放置在秀米的服务器上的。这样我们加载页面的时候，图片可能会无法加载。情况1： 403因为我们的域名和秀米的不同，所以访问的时候referrer是不被秀米允许的，就会拒绝吗，导致403解决方法：请求时不发送请求的域名<meta name="referrer" content="no-...
2020-04-14 10:58:19
15633
2
原创 spy-debugger页面调试、抓包工具
站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。mac和window是一样的1.安装npm install -g spy-debugger建议使用淘宝的缘来安装2.运行spy-debugger会输出// 这是我的IP地址机在当前网络下的IP地址为：192.168....
2020-03-12 20:49:36
1728
原创 form表单提交、ajax、fetch、formdata，以及跨域
一.form表单提交1.1 简单的介绍<!-- form 表单post提交，默认会刷新到 action 页面 --> <form action="www.baidu.com" method="POST" name="post提交"> <p>name: <input type="text" name="username"><...
2020-03-12 14:43:36
2140
原创 正则表达式
可以参考老姚的JS正则表达式完整教程因为写的标号，已经出书了，下载地址，建议收藏，为防止万一下载不了，网盘地址链接:https://pan.baidu.com/s/1SECWF9NrXUFu8G0o0CWJEA 密码:yvt1MDN的正则表达式...
2020-03-08 10:32:40
186
原创 babel的认识
一.简介：babel官网：https://www.babeljs.cn/githup：https://github.com/babel/babelBabel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。我这里只是介绍基本的使用方法，详细的可以到官网查看。1.1基本实现的...
2020-03-06 12:12:58
307
原创 vue实现详情页返回列表页，数据不加载且页面原有位置不变
常见的需求：列表页 ====>点击跳转到列表详情页面 ======> 返回列表页(希望页面不重新加载，且保留原来浏览的位置)。1.实现页面的不重新加载使用vue的keep-alive<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，也就是所谓的第一次进入页面加载，返回等第二次进入页面不加载app.vue： <ke...
2020-03-03 23:10:30
7276
2
原创 在移动端使用VConsole调试面板
1.VConsole是什么？作为前端而言，通常习惯在PC通过F12使用调试面板，进行调试或者查看接口信息等。在移动端我们可以使用VConsole来实现相同的功能。它是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。VConsole的git地址：https://github.com/WechatFE/vConsole以下内容直接 copy 了项目的...
2019-11-26 14:08:09
3909
1
原创 二.浏览器的实现原理和API---总概
1. 什么是浏览器大家可以参考我之前的文章浏览器内核，如果大家想查看关于浏览器对象模型BOM的相关内容可以查看。2. 概论
2019-10-14 18:57:53
247
原创 ios的软键盘bug
1.ios高版本多次收放软键盘导致页面卡死问题： ios高版本，如12，点击输入框，软键盘弹起，可以正常输入回退，但是同一输入框软键盘按收起键收起键盘，再次输入时会导致页面卡死。原因当页面超过一屏，软键盘会导致页面上移，软键盘收起后页面没有复原，导致页面卡死。解决方法在blur时，使页面回到最顶端const isIos = () => { var u = navigator...
2019-05-21 18:42:05
1003
原创 npm包和项目文件冲突
项目中：引用appJsBridge.js! function (e) { ..... function () { Array.prototype.slice.apply(arguments).forEach(function (i) { ... }('appInit', 'goBack', 'getStatusBarHeight', 'checkPerm...
2019-05-21 17:43:33
862
原创 h5中返回上一页常见的问题
1.返回上一页获取的数据不正确需求：A --> B页面，B页面操作数据，返回A页面，A页面刷新数据并显示问题在pc的浏览器中B使用window.history.go(-1)实现页面的回退，回退后发现A页面请求数据，但是为老的数据，并不是新的数据，但是在NetWork中发现确实请求了，重新刷新A页面后，数据就是新的了原因ajax缓存了，可以在请求的header中加上'Cach...
2019-05-21 17:25:44
4802
转载 6.javascript对象:面向对象还是基于对象
1.什么是面向对象我们先来说说什么是对象，因为翻译的原因，中文语境下我们很难理解“对象”的真正含义。事实上Object（对象）在英文中，是一切事物的总称，这和面向对象编程的抽象思维有互通之处。中文的“对象”却没有这样的普适性，我们在学习编程的过程中，更多是把它当作一个专业名词来理解。但不论如何，我们应该认识到，对象并不是计算机领域凭空造出来的概念，它是顺着人类思维模式产生的一种抽象（于是面...
2019-05-06 18:09:35
216
转载 1.javascript类型中你不知道的细节
基本数据类型：Undefined；Null；Boolean；String；Number；Symbol；Object。1. undefined 和 null1.1 为什么有的编程规范要求用void 0代替undefined？Undefined类型表示未定义，它的类型只有一个值，就是undefined。任何变量在赋值前是 Undefined 类型、值为 undefined，一...
2019-05-06 17:22:49
274
原创 ios的webview下input点击多次才会出现软键盘
在webview中有input框，在Android下是有效的，在pc中也是好的，但是在ios中需要点击多次或者长按才会弹出软键盘。探索原因，可能与fastclick有关，以及与ios的版本有关1.fastClick是什么？先来看fastClick解决了什么问题：click 300ms延迟：浏览器click会比touch延迟300ms触发click穿透现象：当两个div同处一个posit...
2019-05-06 14:24:45
2179
原创 常用的js方法
1.对日期和时间进行处理 /* 1. 时间处理 使用方法例如： new Date().format('yyyy-MM-dd hh:mm:ss:S') */ Date.prototype.format = function (fmt) { // author: meizz let o = { 'M+': this.getMo...
2019-05-05 10:42:04
169
原创 关于在mac下tree的使用
tree命令可以以树形结构显示文件目录结构，它非常适合于我们给别人介绍我们的文件目录的组成框架，同时该命令使用适当的参数也可以将命令结果输出到文本文件中1. Mac下安装tree1.1写入~/.bash_profilemac下默认是没有 tree命令的，我们将命令写到~/.bash_profile里，以后直接运行tree命令就更方便了:1.打开~/.bash_profile文件vim ...
2019-02-25 18:01:58
8669
原创 设计模式-----3.代理模式
代理模式：一个对象不能直接引用另一个对象，需要代理对象在这两个对象中起到中介的作用。1.代理的例子——小明追小红小明决定给小红送一束花来表白，小明决定让小红的闺蜜小兰来代替自己完成送花这件事情。先看看不用代理模式的情况:var Flower = function () { };var ming = { sendFlower: function (target) { var...
2019-01-24 11:40:17
226
原创 设计模式-----2.策略模式
策略模式：将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定的独立性，不会随客户端的变化而变化。1. 使用策略模式计算奖金我们以年终奖的计算为例进行介绍。很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为 S 的人年 终奖有 4 倍工资，绩效为 A 的人年终奖有 3 倍工资，而绩效为 B 的人年终奖是 2 倍工资。假设财务部要求我们提供一段代码，来方便...
2019-01-22 16:23:43
195
1
原创 第一章.设计原则-----开放-封闭原则
在面向对象的程序设计中 ，开放-封闭原则 (OCP)是最重要的一条原则。很多时候，一个程序具有良好的设计，往往说明它是符合开放-封闭原则的。它的定义如下:软件实体(类、模块、函数)等应该是可以扩展的，但是不可修改。...
2019-01-21 11:21:56
408
原创 第一章.设计原则-----最少知识原则
最少知识原则也叫迪米特法则(Law of Demeter，LoD)，“迪米特”这个名字源自 1987 年美国东北大学一个名为“Demeter”的研究项目。许多人更倾向于使用迪米特法则这个名字，也许是因为显得更酷一点。但本书参考 Head First Design Patterns 的建议，称之为最少知识原则。一是因为这个名字更能体现其含义，另一个原因 是“法则”给人的感觉是必须强制遵守，而原则只...
2019-01-02 11:10:10
510
HTML5移动开发指南
2017-09-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人