- 博客(23)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 微信或系统字体放大缩小,html页面布局错乱问题
前言手机可以调整字体大小的地方:1、手机QQ、微信、部分Android内置浏览器等非自己开发的App都支持字体大小的调整(我只介绍微信);2、iOS、Android系统本身也可以调整字体大小,导致自己开发的App的WebView的页面布局错乱。调整字体大小后对页面的影响:我先说一下系统自带调整字体大小功能对自己开发的App中的WebView页面的布局的影响:在iPhone系统设...
2018-07-25 11:53:43
15510
2
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 网页h5适配iPhoneX
前言如上图所示:对比iPhone8,iPhoneX的屏幕高度增145px,上下新增高度如图二所示。对于相对底部 fixed 定位的元素浏览器的展现都是有问题的。对于底部,如下图是适配前后的对比图(如果是底部导航栏会很明显,导航栏、tab栏会和home小条重合,适配会显得尤为重要)。 关于适配的几个知识点1、安全区域(Safe area ):确保不会被设备圆角(corners),传感器外壳(s...
2018-05-07 20:14:45
1063
转载 搜索自动提示功能JS优化
转载:点击查看原文 搜索自动提示功能JS优化直奔主题,google和百度的搜索框都会有这种自动提示关联词条的功能,自己最近接触的项目也有多个地方要做这个功能,后台开发咱不懂,所以从前端JS方面来说说这个功能的主要两点性能优化。首先这个搜索框如果要触发自动提示的词条,肯定是每次keyup(咱们老大说keyup事件在某些浏览器里有问题,建议用keydown,但是我没发现问题,而且...
2018-09-11 17:31:27
935
1
原创 vue移动端适配--rem
前言无需引入任何js,实现vue移动端适配,代码写px自动编译为rem。需要安装的依赖lib-flexible 和 px2rem-loader实现过程,参考下面这两篇文档,只需简单的配置,亲测有效,项目已上线。这两篇文档讲的很清楚了,我就不重复了。参考一:基于vue-cli配置移动端自适应项目参考二:vuejs使用lib-flexible适配利用px2remLoader进行...
2018-08-31 21:25:24
2393
转载 SEO的8个常用知识点
转载:https://mp.weixin.qq.com/s/FD2dJDogJdvcatIfkqQacgSEO 工作的目的seo 的工作目的是为了让网站更利于让各大搜索引擎抓取和收录,增加产品的曝光率。SEO 注意事项1. 网站 TDK 标签的设置。title,description,keywords,根据产品业务,概括出核心关键 词作为 TDK 的内容,每个页面都不一样。如果每个...
2018-07-25 11:14:42
7224
原创 react-router-dom示例讲解(十)——路由配置
前言:1、{...props}、{...route}用到了扩展运算符,具体可点此了解,扩展运算符2、核心组件是RouterWithSubRoutes。const RouterWithSubRoutes = (route) => ( <Route path={route.path} render={props => ( <route.component {...p...
2018-07-01 13:26:00
1895
原创 react-router-dom示例讲解(九)——模糊匹配
前言:这是一个很简单的例子,类似与之前讲的URL路径匹配。倘若你对路由没有任何了解,我感觉这个例子很适合学习路由。实现效果:代码如下:const About = () => <h2>About</h2>const Company = () => <h2>Company</h2>const User = ({match}) => ...
2018-07-01 13:05:23
376
原创 react-router-dom示例讲解(八)——侧边栏
前言:1、react定义组件有两种方式:1)、用class即定义类的形式,这种形式我们前面用到好多次了。class WillMatch extends Component{ render(){ return( <h1> Matched </h1> ) }}2)、函数定义组件,这种方式是一中简便的定义组件的方...
2018-07-01 12:54:47
676
原创 react-router-dom示例讲解(七)——路径递归
前言:该例子涉及到的知识点并没有新增(看过之前的例子的前提),只是它逻辑理解起来可能会费点劲。我们先看效果图及代码然后在对它进行分析。实现效果:代码如下:const persons = [ { id: 0, name: 'Michelle', friends: [1, 2, 3] }, { id: 1, name: 'Sean', friends: [0, 3] }, { id: 2, na...
2018-07-01 10:21:27
646
原创 react-router-dom示例讲解(六)——未匹配(用于404页面)
前言:倘若一个页面不存在,它就会跳到404页面,针对react即:1、用一个没有path属性的Route(即404页面)去匹配任何路径;2、Switch返回第一匹配成功的Route,只渲染第一个与当前访问地址匹配的<Route>或<Redirect>;实现效果:涉及代码:class App extends Component{ render() { return...
2018-06-29 18:03:19
2763
原创 react-router-dom示例讲解(五)——阻止导航
前言:这个例子主要讲的是Prompt组件的用法。该组件主要用于用户离开当前页面时给出提示。属性有:message:当用户离开当前页时设置的提示信息;其可以时一个字符串也可以是一个函数;如下:<Prompt message="确定要离开?" /><Prompt message={location => ( ` 确定要离开${location.pathname}`)} /...
2018-06-29 17:46:51
1070
原创 react-router-dom示例讲解(四)——自定义链接
前言:这个例子主要用到Route组件的三大render methods(render、component、children)之一children;有小编说children不同于component的作用是:有时候你可能只想知道访问地址是否被匹配,然后改变下别的东西,而不仅仅是对应的页面。我还不是很能体会到这句话的意思,不过这些不重要,你把它当成component或render完全可以理解。效果如下:...
2018-06-26 23:20:11
336
原创 react-router-dom示例讲解(三)——认证
前言:这个例子的难点在于他涉及到多个页面之间的公共数据(即全局变量),实际项目中会用redux管理全局变量,但是考虑到例子的理解难度,我这里采用了本地存储localStorage来管理数据。这样这个例子就好理解了很多。实现效果:实现思路:这个项目里有一个变量是isLogin,判断用户是否登录,只有登录的用户才可以访问Protected Page,该变量是该程序的核心。我们先来看一下App.js:i...
2018-06-26 22:54:24
854
原创 react-router-dom示例讲解(二)——URL参数
这个例子比较简单,可以加深我们对路由三大组件BrowserRouter、Route、Link认识。项目中我们肯定会涉及到传入参数不同但调入相同的页面。例如新闻列表与新闻详情页、产品列表与产品详情的关系,这些都需要我们传入参数,同时在子页面获取参数。该例子很好的解决了这一问题。实现效果多个Link都对应这child这个组件,路径匹配通过path='/:id'来实现。class App extends...
2018-06-25 16:16:13
1434
原创 react-router-dom示例讲解(一)——基本使用
针对react路由的讲解我这边会给出十个例子,这十个例子参考与react-router-dom官网。官网中的例子为了讲解方便会将一个例子中涉及的代码放在一个js文件中,没有按照企业项目规范放置代码,我这里会将代码按常规的写法重构,方便理解。前言:1、倘若读者对react-router-dom还是一个小白,我建议读者在遇到一些基础问题(例如:该组件什么意思、作用是什么,属性什么意思诸如此类)时可以点...
2018-06-25 15:56:35
10931
1
转载 react-router和react-router-dom的区别
转载自:react-router和react-router-dom的区别react-router-v4,我称之为“第四代react-router”,react-router和react-router-dom的区别是什么呢?为什么有时候我们看到如下的写法:写法1:import {Swtich, Route, Router, HashHistory, Link} from 'react-router-...
2018-06-19 20:04:39
34394
5
原创 git提交警告Warning: Permanently added the RSA host key for IP address '13.250.177.223' to the list of
遇到的问题:git push时返回警告,如下图:虽然不处理一样可以提交代码,没有任何影响,但还是看着很不舒服。倘如想修改就按下面的方式处理。相关知识介绍:hosts文件的位置:1、Mac:/etc/hosts2、Windows: 在Windows 98系统下该文件在Windows目录,在Windows 2000/XP系统中位于X:\Winnt\System32\Drivers\Etc(或X:\Wi...
2018-06-19 17:57:55
12628
2
原创 react 默认端口修改
前言:对package.json的认识首先我们应该对package.json有一个认识:它包含了整个项目所依赖的模块以及项目的配置信息。下面我们说一下package.json中重要的几个属性:1、scripts: 通常它指定了npm命令行的缩写,比如start指定了运行npm run start时,要执行的命令。下面的设置分别指定了start、build、test、eject要执行的命令。2、d...
2018-06-11 18:01:50
20845
原创 js判断undefined、null
前言if (!undefined) { console.log('undefined is false');}// undefined is falseif (!null) { console.log('null is false');}// null is falseif (!0) { console.log('0 is false');}// null i...
2018-05-21 18:27:46
1614
原创 js更高效的实现斐波那契数列
前言:斐波那契数列数列:0 1 1 2 3 5 8 13...,用数学公式表示为:fn(n) = fn(n-1) + fn(n-2), n>1; fn(0) = 0; fn(1) = 1; 简单的来说就是后一项是前两项只和。js实现斐波那契数列的三种方式:方法一:递归一提到斐波那契数列估计很多人和我的第一反应是一样的,那便是递归。用递归的方式实现一下,代码如下: function fa...
2018-05-14 21:26:42
1808
转载 从 40029 和 state 来说说微信网页授权的安全问题
转载:https://yii.im/posts/the-security-about-wechat-web-oauth/本文其实有一点标题党,因为微信网页授权本身并没有什么安全问题,有安全问题的是一些不恰当的打开姿势。主要围绕授权过程中 40029 报错和 state 参数的使用方式来展开讨论,如果你在开发中也遇到过这类似的问题,或许这篇文章可以帮到你。认识微信网页授权微信网页授权(官方文档)是公...
2018-05-08 17:53:00
8778
4
原创 gulp静态资源缓存问题(css、js、img)
我不得不先吐槽一下csdn,这篇博客是我前几天就写的,当时是写完的,但今天发现发布出去的内容只有前面几行文字,其余内容都删掉了,小编也是很无奈呀,无奈之举我只能重写一遍,不知其他小编是否也遇到同样的事情,怀疑以后每次发布之前是不是都要提前复制一份出来了。。。-----------------------------------------------------------------------...
2018-04-26 18:45:55
999
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人