- 博客(125)
- 收藏
- 关注
RSS订阅原创 React Native Web 安卓h5 Touchable onPress 触发两次问题解决
在维护基于 React Native Web 的 h5 项目时，遇到这样的一个 bug，在部分安卓 h5 页面一些点击事件会稳定触发两边，这样的问题在 iOS 和 pc 调试 h5 都是好的，甚至同一机型只要另外换一个浏览器可能也会有不同的效果。在调试阶段，发现只要把 TouchableHighlight 等组件都干掉，换成 div，点击事件也从 onPress 改到 onClick，就全部是好...
2019-12-24 16:17:38
1106
原创 React Native 布局 padding 失效问题解决
1. 问题产生在新项目开发过程中，发现了一个 View 组件 padding 失效的问题，这里记录一下问题和解决方案首先在布局一个文本溢出的 Text 组件，效果很正常，外部左右设置的 padding 均正常显示可是加了一个 icon 后，却产生问题左侧的文本和右侧的 icon 全部左右顶格显示，设置的左右 padding 失效这是正常显示的效果：开启元素审查调试，可以看到其实 ...
2019-12-23 16:05:20
3565
原创 Charles 两种常用 mock 请求方法
知道如何去 mock 请求都很有利于不论是翻新老的项目还是开始新项目的研发，借助 Charles 我们就可以做到如何 mock 我们想要的请求。1. mock 请求到本地文件这里使用 Charles 的 Map Local 功能，可以在 [Tools — Map Local] 找到我们将使用到的数据在本地存储成一个 json 文件然后 Add 我们想要的请求，配置想要匹配的请求的路径参数...
2019-12-23 09:51:57
1983
转载 原生 js 获取 dom 元素 css 样式的四种方法及对比
在动态操作 dom 元素时，如果我们要获取或设置一个元素的宽高、top、left 等样式时，jq 中的 .css 是常见的方法，那么在原生 js 中呢？首先想到的就是 element.style 方法，这个方法虽然可以获取也可以设置 dom 元素的样式，但也很有局限性，下面总结一下原生 js 获取 dom 元素样式的几种方法与区别~1. HTMLElement.stylemdn 传送门HTM...
2019-11-21 18:14:57
8334
原创 sass 中如何使用 calc 计算变量
问题描述问题很简单，在计算 vh 和 px 时，需要使用 calc() 函数例如，设置一个容器高度：height: calc(100vh - 60px);然而在开发过程中，一些有特殊意义的数字还是尽可能赋给 sass 变量，便于其他文件可以共用，比如上面的 60px 是个底部导航栏的高度，这就很多地方可能用上了，设一个 $tabbar-height然后改一下上面设置高度的语句：heig...
2019-11-21 17:54:14
5675
原创 Xcode Could not locate device support files 怎么解决
每次在更新手机 iOS 系统之后，xcode 连真机调试的时候总会提示如下错误 Could not locate device support files根据提示，很快可以得知当前版本的 Xcode 不支持手机的新版本了，解决方案是更新 Xcode 版本不过对于非专业的 iOS 开发者来说，更新 Xcode 版本也有一定的风险，可能会有些新的坑要踩所以对我而言，如果有不更新 Xcode 版...
2019-11-19 17:30:22
2712
1
原创 React Native 安卓人民币符号显示异常问题解决
在项目中经常会发现人民币符号 ￥ 在安卓机下的显示异常（只显示一横如下图），而 h5、iOS 均无误这是因为全角半角的原因，全角 ￥ 会受系统影响，而半角 ¥ 则基本不受影响那么知道原因之后，我再来介绍两种解决方案：全角 ￥，一般是输入法切换至中文输入法 shift + 4 得到，而半角 ¥ 在 mac 上可以用 option + Y 敲出来使用 HTML 特殊符号，￥ 改写为 &am...
2019-11-11 18:48:42
1114
原创 从零构建 React 开发环境(一) —— hello world，麻雀虽小五脏俱全~
此系列更多的是个人对环境构建的一些记录，纯属个人的自娱自乐顺便做个分享，可以当做一个 React 的入门练习。文末tip：–save 与 --save-dev 区别**注：**需要注意的是此类讲步骤的文章由于第三方库的升级更新，具有一定的时限性，仅做参考。本人也会不定期更新最新的一些步骤和新的坑吧~目标命令行键入 npm start，访问 localhost:8080 可以访问到一个 ...
2019-10-26 14:52:25
394
原创 解决 vscode GitLens 无法使用问题
问题复现最近在项目中，vscode 的 GitLens 突然失效，并在选项卡中显示 No source control providers registered. 如下图：解决方案按照这里的步骤，可以顺利解决此问题在 File -> Perferences -> Settings 中搜索 git.path 编辑 settings.json，加上如下配置{ "git....
2019-10-24 15:07:33
11571
3
原创 react-native run-ios 找不到 simulator 解决方案
实际问题react-native run-ios 脚本却会抛出如下错误：Could not find iPhone X simulator在网上也能找到一些解决方案，比如下面这个：react-native run-ios returns Error: Could not find iPhone X simulator上面文章的解决方案是将 /node_modules/react-nat...
2019-10-22 13:34:02
1994
原创 h5页面适配 iPhoneX
h5页面如何适配 iPhoneX 的刘海屏与底部操作栏也变成了移动端开发所需要了解的常用知识，下面分享一篇 网页适配 iPhoneX 的经典好文网页适配 iPhoneX，就是这么简单使用 viewport-fit 和 env()、constant() 两种方法均能有效解决方案，可以根据项目的实际情况进行选择...
2019-10-08 19:54:23
460
原创 常见设计稿字体对应字重font-weight大小
在拿到 UI 设计稿时，可以经常看设计稿中常见的字体有 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold，并不会直接给我们 font-weight 的值。在这我们就需要知道常见字体和 font-weight 的对应关系详细可以看 font-weight 的介绍 传送门font-weight 属性执行字体中字形的重量，这取决于黑度等级或...
2019-08-27 19:57:39
12573
原创 如何真机调试微信h5页面
最近在项目中接手微信环境h5页面的开发，主要的是使用微信 JS-SDK 做原有项目部分功能在微信环境下的适配。目前项目暂时告一段落，希望可以用几篇文章记录并分享这些天来学习、开发微信h5页面的心得、体会~由于微信环境、sdk的限制，在微信环境下如何有更加良好的调试体验还是有一些坑的，本篇将主要介绍本人在实际业务开发中使用到的微信环境下h5页面的三种调试方法（由于没有苹果手机，所以在开发自测...
2019-08-04 14:00:04
10536
原创 如何清空 React Native 编译时的缓存
在开发 React Native 项目时，修改了部分模块的路径或名称时，直至 react-native run-ios 也都能顺利跑通，可每次都倒在了最后的 npm start这在删除 node_modules/、package-lock.json 重新npm install；删除 Pods/、Podfile.lock 重新 pod install；删除 build/ 重新 react-nati...
2019-07-12 09:54:40
5816
原创 微信 js-sdk config:invalid signature
在调用微信 js-sdk 开发页面时，经常会遇到 config:invalid signature 的错误在官方手册是这么解释此类错误，并提供了自查顺序：因为在项目中，获取签名的后端接口是经过线上环境验证无误的，在前端可能出问题的只有第 2、3、4、6 步。第 2、4 步只要对照验证一下就可以很快排错，所以真正有可能出问题的是第 3、6 步。将第 3、6 步总结一下是，如果我们需要在页面...
2019-07-08 13:29:39
1350
原创 解决阿里云ECS服务器 git clone 速度慢
有些时候远程的ECS服务器 git 的速度会很慢，常维持在 10k/s 左右解决方案vim /etc/ssh/ssh_config编辑 /etc/ssh/ssh_config，找到 GSSAPIAuthentication no 这行，删掉前面的注释，然后保存退出然后就可以看到从远程仓库 git clone 的速度已经涨到 3m/s 了...
2019-07-02 20:10:35
22262
15
原创 Mac 在阿里云ECS服务器部署前端项目流程分享
ps: 这不是一个详细完整的教程，只是本人对学习如何将本地部署到远程服务器的记录并做个分享因为各人的项目不同、系统不同、环境不同，用下面的这套流程不一定能跑的通，不喜勿喷，如有不同见解可在评论区处讨论交流~下面附本人环境系统：本地系统 macOS，远程服务器系统 centos 7，要部署的是 react + koa 的项目1. SSH 远程连接服务器首先进入终端，输入 sudo su...
2019-06-29 14:13:00
2080
原创 git mv 解决文件名大小写不敏感问题
在将项目部署到 linux 环境下，报了许多由于文件名大小写不敏感而疏忽的问题，然而在本地系统（Mac）改变了文件名后，同样出现了由于git对文件名大小写不敏感的原因，git status 却找不到变化文件的状况。通过查询网上的解析，得知可以利用 git mv 来解决此类问题，语句具体使用方法如下：git mv 旧文件名 新文件名举个例子，我要将 app/components/modal ...
2019-06-29 14:12:02
1332
原创 vim 操作出现 Found a swap file by the name "xxxx
引起的问题有时在 vim 操作文件时，会弹出如下的提示：6个选项的含义在提示信息中，我们可以看到有6个选项供我们选择，接下来我会介绍下这6个选项的含义[O]pen Read-Only 以只读模式打开文件，只能查看无法编辑；(E)dit anyway 会以正常的方式打开文件，不会载入暂存文件内容；(R)ecover 加载暂存文件的内容(类似文件备份作用)，比如系统突然故障重启，可以借...
2019-06-29 12:12:33
1123
原创 npm install Error: EACCES: permission denied 问题解决
在 npm 安装一些软件时，尤其是在全局安装的情况下，偶尔就会提示下面的问题：Error: EACCES: permission denied直接列出解决方案：sudo npm install -g electron(你要装的软件) --unsafe-perm=true --allow-root...
2019-06-28 16:02:05
8325
原创 Mysql 解决 Your password has expired.
直接给出解决方法首先敲下下面的指令输入密码，进入 mysql 控制台：mysql -u root -p然后在mysql命令行里 运行下面的命令ALTER USER `root`@`localhost` IDENTIFIED BY '你的密码', `root`@`localhost` PASSWORD EXPIRE NEVER;方案来源：https://stackoverflow.c...
2019-06-28 14:23:04
8170
原创 如何在VSCode设置/取消隐藏文件
在学习 Husky 的时候，想要在 VSCode 里面查看 .git 文件夹下的 hooks 文件夹，却连 .git 文件夹也找不到。后面才知道是因为 VSCode 的用户设置将某些文件夹给隐藏显示了（里面就包括了 .git 文件夹）在VSCode设置/取消隐藏文件首先进入 VSCode 的设置页面搜索 files.exclude，就可以看到当前隐藏的文件夹了，可以在这里添加新的需要隐藏的...
2019-06-26 15:13:23
28986
原创 Android 模拟器无法连接 localhost 及 Debugger 不显示 Network 解决方案
最近在学习 React Native，遇到了在 Android 模拟器中无法连接 localhost 本地服务，在浏览器上都是ok的问题起初认为是 React Native 的问题，后又觉得可能是调用的方式不对，最后才找出这是 Android 的一个问题解决方案方法很简单将 localhost 改为 10.0.2.2 就好了或者将 localhost 改为本机的 ip 地址这是为什么...
2019-04-18 09:41:12
1857
原创 React Native 关闭黄色错误警告提示
在 React Native 开发中，经常会出现许多的黄色错误提示遮盖屏幕，需要手动点击 dismiss 按钮会影响开发效率 —— 7.X 版本升级
Babel 7 已于去年发布，作为 Babel 的使用者，是不能停止对它的新版本的学习和研究的，首先来看一下 Babel 7 作出了哪些重大的改变1. 废除 stage-x presetsstage-x 原本是对应于 ECMA Script 提案的不同阶段，不同阶段有着不同的特性，stage-x 预设事实上就是对应这些特性转译的插件集合，比如我们最常用的 babel-preset-stage-...
2019-04-09 13:52:01
1724
原创 Babel 踩坑总结(二) —— babel-polyfill、babel-runtime 的选择
此篇来解决上篇提出的问题，官方给出babel-polyfill 和 babel-runtime 两种解决方案来解决这种全局对象或全局对象方法不足的问题1. babel-polyfill官方手册babel-polyfill 会在应用中模拟一个 es2015+ 的环境，对新语法需要的新对象进行补全使用 babel-polyfill 后，可以使用内置对象如 Promise、WeakMap，静...
2019-04-09 12:55:10
11153
原创 Babel 踩坑总结(一) —— 6.X 版本配置及概念理解
今天闲来无事试着从头构建一个前端项目，光 babel 就遇到不少问题，尤其是在 babel 升级到 7.X 版本之后，许多之前的配置都要发生一些变化，在这里做一个踩坑总结1. 6.X 版本配置方法npm install babel-loader@7 babel-core babel-preset-react babel-preset-env babel-preset-stage-0 -D下...
2019-04-09 12:53:27
2058
原创 webpack 编译图片配置及 url-loader、file-loader 区别
webpack 编译图片配置通过翻阅官方手册，我们发现可以借助 url-loader 或是 file-loader完成对 webpack 编译图片的配置。下面我先分别介绍两种 loader 的配置方法(大家按需求选择其一)，然后再简单介绍下两者的区别。url-loader 配置说明npm install file-loader url-loader -Durl-loader 依赖于 f...
2019-03-27 16:38:23
3760
原创 ant-design 引入样式及配置 babel-plugin-import 按需加载
1. ant-design 引入样式的几种方式1.1 全局引用js代码引入 ant-design 的 Button 组件import React, { Component } from 'react';import Button from 'antd/lib/button';import './App.css';class App extends Component { rend...
2019-03-26 16:21:17
15118
2
原创 Mac 查看端口占用情况及杀死进程
在开发中经常会遇到端口占用问题，例如下面，npm start 报的错误：1. 查看端口占用情况命令lsof -i tcp:8080输出结果：字段说明：字段名说明COMMAND进程名称PID进程标识符USER进程所有者FD文件描述符，应用程序通过文件描述符识别该文件TYPE文件类型，文件 REG、目录 DIR、字符 CHR、块设备...
2019-03-25 15:55:23
18027
原创 webpack——devtool配置及sourceMap的选择
官方手册传送门 官方对devtool配置的定义很简单：选择一种 source map 格式来增强调试过程，不同的值会明显影响到构建build和重新构建rebuild的速度。不过，什么是source map，官方用提供了许多种的source map，其中的区别是什么，我们在开发中应该怎么选择，都是我们要学习的。1. 什么是 source map现在的前端代码会通过babel编译或者各类的...
2019-03-23 12:13:08
6721
原创 React Native 样式表指南
React Native 的样式基本上是实现了 CSS 的一个子集，针对 iOS、Android 阉割了一些功能，并且部分属性名不完全一致，下面是 React Native 所有的 CSS 样式。下为0.58的正式版本Text样式属性属性名取值描述color<color>对应 CSS color 属性fontFamilystring对应 C...
2019-03-18 15:35:32
944
原创 React Native alignItems: baseline 在 Android 下失效解决方案
问题在项目中，把不同 font-size 的字放在一起，是一个很常见的需求，我们可以这样：import React, { Component } from 'react';import { Text, View } from 'react-native';export default class App extends Component { render() { retur...
2019-03-15 17:49:03
1535
1
原创 测试必学——charles 抓包真机APP小程序
此处做一次搬运工，下面两篇文章做了很好的讲解，一步一步下来基本都能跑下来基本步骤：APP 抓包和微信小程序抓包-Charles 的精简使用教程设置 https 证书：charles抓取微信小程序数据(抓取http和https数据)在最后给手机安装 https 证书时，从 chls.pro/ssl 得到的是 .pem 文件，某些手机（比如小米、一加）无法识别 .pem，需要转换为 .crt 的...
2019-02-14 18:05:22
1743
3
原创 Mac OS 查看 ip 地址及 DHCP 各 addr 含义
Mac OS 查看 ip 地址及 DHCP 各 addr 含义查看 ip 地址是一件很基础的事情，不过在 Mac OS 上与 Windows 的操作略有不同Windows在 cmd 中，执行 ipconfig，查看电脑 IP：Mac OS不过在 Mac 上，键入 ipconfig，返回的是这样的：这里需要键入 ipconfig getpacket en0 可以获取完整的 DHCP ...
2019-02-14 17:29:02
7846
原创 React Native Text 组件显示不全解决方案
github上此问题的讨论 传送门BUG 体现效果(左出问题安卓真机，右ios模拟器)设置 minWidth 无法自动撑开 View，除非 minWidth 设置得大些发生场景这个解决方法不一定能够解决所有的问题，有必要说下我遇到的场景。发生在某些安卓机上，比如我的OnePlus而在另外的手机上又是正常的在 ios 上 ok在设置 fontWeight 字体粗细后产生的...
2019-01-25 11:45:09
9118
1
原创 使用 brew services 管理后台服务(MacOS)
在编写项目的时候，时常需要开启一些诸如 nginx、mysql、redis 等后台服务，然而每次开机都要重新手动去开启这些服务，而且有些还要保留一些终端窗口去维持服务。这时我们可以用到 brew services 来管理这些后台服务。查看 services 列表brew services list会返回一个表格，可以查看本地下载好的服务。NameStatusUserPl...
2018-12-05 13:32:39
13240
1
原创 CSS 文本溢出省略显示
实现文本显示单行或多行，超出部分用省略号显示是一个很常见的需求，在这里做个分享记录。(文末有 demo 演示~)单行溢出缩略下面是单行缩略的实现：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;注：要在块级元素设置单行缩略很简单，唯一比较生疏的是 text-overflow: epllipsis;下面关于...
2018-11-21 17:15:24
540
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人