- 博客(23)
- 收藏
- 关注
RSS订阅
原创 微信或系统字体放大缩小，html页面布局错乱问题
前言手机可以调整字体大小的地方：1、手机QQ、微信、部分Android内置浏览器等非自己开发的App都支持字体大小的调整（我只介绍微信）；2、iOS、Android系统本身也可以调整字体大小，导致自己开发的App的WebView的页面布局错乱。调整字体大小后对页面的影响：我先说一下系统自带调整字体大小功能对自己开发的App中的WebView页面的布局的影响：在iPhone系统设...
2018-07-25 11:53:43
15510
2
原创 网页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关注的人