- 博客(100)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 前端知识体系-全栈系列（图谱+大纲）
前端知识体系（图谱）前端工程化体系node主流技术栈大纲ReactVueAngularJavaScriptTypeScript跨平台技术大纲跨端技术发展的三个阶段HybridReactNativeFlutterweex小程序快应用ionicCordova性能优化和监控前端知识体系（大纲）前端工程化体系基础设施规范化前端标准（基础）W3CSPADOMBOMXHTMLXMLJSONJSONPHTTP
2021-01-25 17:33:10
11528
6
原创 hexo+github+hexo-theme-matery搭建个人免费博客
前言GitHub page提供了免费的服务搭建免费域名 xxx.github.io xxx是你的GitHub用户名免费的代码存储空间全是静态文件，快速访问git版本管理，能快速回滚或者切换的某个版本准备工作注册GitHub账号（如果已拥有GitHub账号 无需重新注册）点击sign in 页面的Create an account注册页面信息填写：注册完成之后直接登录...
2019-09-11 10:40:59
6607
4
原创 echarts-for-react的使用详解
Echarts-for-react的使用示例一、安装npm install --save echarts-for-react//如果需要使用echarts的一些特殊方法需要安装npm install --save echarts二、使用import ReactEcharts from 'echarts-for-react';import echarts from 'echart...
2018-10-24 16:26:41
48565
3
原创 RN Image与ImageBackground
[个人博客](https://gongchenghuigch.github.io/2018/04/16/rnimage/)一、Image组件的基本用法1.1 从当前项目中加载图片要往App中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它：<Image source={require('./my-icon.png')} /> 即: ...
2018-04-16 15:58:14
16387
原创 JSON转换TypeScript
TypeScript（TS）是一种强类型的编程语言，由于在编译时便会发现代码存在的问题，被前端团队大量使用。TS使开发人员能够掌握各种组件的交互方式，并使代码重构变得更加容易；但对于需要准确定义的类型，在使用时会比较麻烦。特别是涉及数个及数十个后端接口数据的类型定义，会有大量的转换和的时间成本。通过VSCode插件实现一键生成TS声明，可以节省编程过程的开发成本。为了克服TS的变量类型声明过于繁琐的缺点，节约开发成本，推荐使用VSCode插件【Auto-ts-inline-types】。
2022-10-13 15:35:03
3917
1
原创 rollup配置及使用
前言业务线长期的积累产生了许许多多重复性的工具方法，业务功能模块等， 我们正好可以用 rollup 构建一个 npm 私服工具包，便于后期业务使用，减少重复性的代码编写。项目配置babel引入依赖首先运行以下命令安装babel相关：yarn add @babel/core @babel/cli @babel/preset-env -D配置babel.config.jsmodule.exports = { presets: [ [ "@babe
2021-12-26 11:54:13
2169
原创 RN TouchableOpacity点击事件不响应原因详解
问题 首先是整个页面布局如上：在实际开发中发现 如下红框中的所有区域点击事件均没有效果，不会触发 问题定位RN基本触摸组件尝试TouchableHighlight、TouchableNativeFeedback、 TouchableOpacity 、 TouchableWithoutFeedbackonPressIn：点击开始；onPressOut：点击结束或者离开；onPress：单击事件回调；onLongPress：长按事件回调。以上触摸事件无论怎么尝试在红框区域
2021-12-20 10:27:27
2903
原创 react-navigation(6.0.6版本)使用详解(基于RN0.65*版本)
命令安装// 安装基础包 ^6.0.6yarn add @react-navigation/native -S// 安装路由包 ^6.2.5yarn add @react-navigation/native-stack -S//RN版本0.65.1 React版本17.0.2"react": "17.0.2","react-native": "0.65.1",路由配置包引用import { NavigationContainer, useNavigation } from '@rea
2021-12-20 10:13:33
2441
原创 Xcode启动RN报错“`fsevents` unavailable“
fsevents unavailablemacOS fsevents unavailable (this watcher can only be used on Darwin)安装文件监听#清除本地原有的watchmannpm r -g watchman #英特尔MAC 安装brew install watchman #M1芯片 安装arch -arm64 brew install watchman 如果失败还可以使用如下命令 官网/bin/bash -c "$(curl -fsSL
2021-11-24 10:47:06
791
原创 git进阶（撤销pull、撤销merge、撤销add）
1、撤销本次pullgit reflogreset到某个版本git reset --hard 91ae6ad2、撤销本次merge如果merge了其他分支代码造成了大量的冲突 想撤销本次merge如果操作1、使用上面的reset命令撤销到上一个提交版本2、执行以下命令直接撤销了本地合并git merge --abort3、git log高阶用法查看每次提交的文件修改列表，和分支变化的图形信息git log --name-status --oneline --grap
2021-11-23 15:02:42
14274
原创 Flutter使用ScreenUtil获取屏幕宽高初始化报错
报错如下 原因我们在布局中使用ScreenUtil().screenWidth获取屏幕宽度是，在初始化未装载视图时，第一次获取时拿不到，会出现如上的崩溃。解决方案import 'package:flutter_screenutil/screenutil_init.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';@overrideWidget build(BuildContext context) { /
2021-11-17 11:48:38
3684
1
原创 Flutter时间轴（timeline）
组件在业务开发中经常会使用到timeline时间轴，来记录数据操作记录等，在这本人封装了一个相对较通用的时间轴组件。示例 参数参数类型必填说明timelineListList是时间轴数据lineColorColor是时间轴轴线颜色heightdouble否时间轴右侧容器高度（默认80）titleStyleTextStyle否时间轴标题样式（已定义初始值 如无特殊样式无需传参）subtitleStyleTextStyle否
2021-11-16 19:22:33
3980
1
原创 Flutter 页面滚动吸顶详解（NestedScrollView）
前言在业务开发中我们经常会有滚动吸顶的效果，目前Flutter也有很多种实现方式，这里介绍一下本人在开发中使用到的基于NestedScrollView实现的滚动吸顶组件；以及中间涉及的各种定位的布局操作；效果NestedScrollView首先了解一下NestedScrollView滚动组件；NestedScrollView：支持嵌套滑动的ScrollView；属性属性说明默认值controller滚动监听无scrollDirection滚动方向Axis.
2021-11-15 15:08:27
12668
转载 前端性能优化
性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。1. 减少 HTTP 请求一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP ：这是一个 HTTP 请求，请求的文件大小为 28.4KB。名词解释：Q
2021-04-29 15:42:50
497
转载 react-hooks原理
一 前言本篇文章主要从react-hooks起源，原理，源码角度，开始剖析react-hooks运行机制和内部原理，相信这篇文章过后，对于面试的时候那些hooks问题，也就迎刃而解了。实际react-hooks也并没有那么难以理解，听起来很cool，实际就是函数组件解决没有state，生命周期，逻辑不能复用的一种技术方案。Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。老规矩,????️????️????️我们
2021-04-29 14:39:52
7811
2
原创 一文读懂babel编译流程，再也不怕面试官的刁难了
前言Babel 是一个强大的 js 编译器。有了 Babel， 我们可以放肆的使用 js 的新特性，而不用考虑浏览器兼容性问题。不仅如此，基于 babel 体系，我们可以通过插件的方法修改一些语法，优化一些语法，甚至创建新的语法。那么，如此强大且灵活的特性是如何实现的？我们从头开始，了解下 Babel 的编译流程。流程babel生成配置package.json项目配置文件"devDependencies": { "@babel/cli": "7.10.5", "@babel
2021-04-25 15:11:48
2767
原创 vscode中断点调试nodejs实用方便
前言在平时前端开发时，前端代码在浏览器上能很方便的断点调试，那么如果要调试node后端接口的话，该如何实现断点调试呢？配置vscode打开node项目点击左侧调试按钮点击Run and Debug选择语言为nodejs点击设置按钮添加配置更改lanuch.json配置文件添加自己的项目启动脚本文件和配置{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: htt
2021-04-22 14:24:36
2207
1
原创 MongoDB聚合（aggregate）常用操作及示例
简介MongoDB 中聚合(aggregate)主要用于处理数据(诸如统计平均值，求和等)，并返回计算后的数据结果。有点类似 SQL 语句中的 count(*)。常用操作表达式描述$match用于过滤数据，只输出符合条件的文档。$match使用MongoDB的标准查询操作。$project修改输入文档的结构。可以用来重命名、增加或删除域，也可以用于创建计算结果以及嵌套文档。$limit用来限制MongoDB聚合管道返回的文档数。$skip在聚合管道中跳过
2021-04-19 16:08:20
4049
原创 Mac安装oh-my-zsh更改终端背景
背景目前Mac自带的终端不是很好用，好多常规的Linux命令都不支持 比如：ll命令；那么我们可以安装第三方的终端安装国内地址：sh -c “$(curl -fsSL https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh)”使用效果如下：后续如果安装其他的命令需要更改zsh环境变量的话 输入如下命令：vim ~/.zshrc更改终端背景打开终端偏好设置打开描述文件选中文本点击图像-》
2021-04-15 10:40:55
2891
1
原创 mongodb联表查询
数据库表表一: 数据记录表var mongoose = require('mongoose'), Schema = mongoose.Schema;var DocViewSchema = new Schema({ realName: String, //真实姓名 userName: String, //OA账号 count: Number, //文档统计 docName: String, //文档项目名称 docType: String, //文档项目
2021-03-31 10:16:12
7427
原创 mongoose数据查询or、and、where等用法
or为 $or 条件指定参数；//member = ["zhangsan", "lisi", "wangwu"];let filter = { $or: [ {docKey: "public"}, {owner: "zhangsan"}, {member: "lisi"} ]}db.getCollection('docs').find(filter);数据筛选or是或查询满足下面的条件其中之一就可以查询出相关数据如果数据库参数是数组，直接会从数组里面匹配是
2021-03-26 17:33:00
4118
原创 Chrome浏览器地址栏配置二维码自动生成工具
打开Chrome浏览器新开一个窗口地址栏输入 chrome://flags/ 搜索qr code 下拉框选择Enable选项 重启浏览器即可 点击需要生成二维码的网页地址栏 出现如下图标 点击小图标即可吧当前网址生成二维码 ...
2021-03-23 14:26:10
2222
原创 webpack那些事：浅入深出-源码解析构建优化
基础知识回顾入口(entry)module.exports = { entry: './path/to/my/entry/file.js'};//或者module.exports = { entry: { main: './path/to/my/entry/file.js' }};输出(output)module.exports = { output: { filename:'[name][chunkhash:8].js', path:pa.
2021-01-28 19:27:18
617
原创 年终盘点跨平台技术（Hybrid、RN、Weex、Flutter）-全栈系列
跨平台技术发展的三个阶段第一阶段是混合开发的web容器时代为了解决原生开发的高成本、低效率，出现了Hybrid混合开发原生中嵌入依托于浏览器的WebViewWeb浏览器中可以实现的需求在WebView中基本都可以实现但是Web最大的问题是，它的性能和体验与原生开发存在肉眼可感知的差异因此并不适用于对性能和用户体验要求较高的场景第二阶段是以RN和Weex为代表的泛web容器时代RN对Web标准进行了功能裁剪用户体验更接近于原生了由于进行了功能裁剪，所以RN对业务的支持能力还不
2021-01-27 10:25:24
1850
原创 一些实用的Chrome插件
FEHelper简介本插件支持Chrome、Firefox、MS-Edge浏览器，内部工具集持续增加，目前包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工具，甚至在目前新版本的FeHelper中，还集成了FH开发者工具， 如果你也想自己搞一个工具集成到FeHelper中，那这一定能满足到你。另外，本站也提供部分工具的在线版本，欢迎使用，欢迎反馈！插件预览
2021-01-11 10:43:31
964
1
原创 android上实现0.5px线条
由于安卓手机无法识别border: 0.5px，因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现。原理：将伪元素的宽设为200%，height设为1px通过-webkit-transform:scale（.5）来进行缩小一倍，这样就得到border为0.5的边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2021-01-07 10:16:11
422
2
原创 TypeScript与React中如何使用ref
父组件在父组件中，编写如下：类中定义child,用于存放子组件的作用域public child: any;Copy to clipboardErrorCopied绑定子组件作用域public onRef(ref:any){ this.child = ref}Copy to clipboardErrorCopied子组件上绑定ref<ChildPage onRef={(el)=>this.onRef(el)} />Copy to clipboardError
2021-01-06 17:06:59
2191
原创 node中使用shell脚本
背景在开发中我们在特定的场合下可能需要一些脚本来批量处理我们的业务逻辑，在nodejs如何调用shell脚本呢？新建项目下新建脚本文件touch newFile.sh修改文件权限chmod 777 newFile.sh 修改文件为可读可写可执行nodejs调用文件读取//使用nodejs的子进程里面的文件读取方法const { execFile } = require(‘child_process’);示例DocsService.publishAllDoc
2021-01-06 13:58:28
3131
原创 2021大前端技术储备
GMTCGMTC全球大前端技术大会是由极客邦科技旗下InfoQ中国主办的技术盛会，关注前端、移动、AI应用等多个技术领域，促进全球技术交流，推动国内技术升级。GMTC为期4天，包括两天的会议和两天的培训课，主要面向各行业前端、移动开发、AI技术感兴趣的中高端技术人员，大会聚焦前沿技术及实践经验，旨在帮助参会者了解大前端&移动开发领域的技术趋势与实践案例。GMTC技术演变2016全球移动技术大会大会主题动态化swift新技术实践RN客户端性能优化应用架构VR/AR开发架构演进.
2020-12-30 10:38:46
4119
5
原创 前端辅助开发工具
阿里矢量图库传送门包含非常丰富的图标Orion矢量图库传送门carbon传送门非常优美的代码编辑模块，可以辅助我们在写PPT等文档截取代码块的时候不再是模糊的截图，可直接使用这个公共copy代码块，非常清晰。如下图：codepen传送门CodePen 则是前端开发者们约“码”的天堂。它不仅提供给你了一个 Showcase 的平台，而且能够开拓你的视野 —— 你能够及时的了解最新前端技术的应用，同时帮助交互设计师找寻更多的灵感。附上大佬总结的优秀作品 传送门UI界面配色传送门
2020-12-28 10:18:24
641
2
原创 基于源码剖析nodejs模块系统
nodejs模块系统简介为了让Node.js的文件可以相互调用，Node.js提供了一个简单的模块系统。模块是Node.js 应用程序的基本组成部分，文件和模块是一一对应的。换言之，一个 Node.js 文件就是一个模块，这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。nodejs模块分类原生模块（核心模块）：fs、http、net等在Node进程启动时，部分核心模块就被直接加载进内存中，这部分核心 模块引入时，文件定位和编译执行个步骤可以省略掉，并且在路径
2020-12-26 15:29:20
293
原创 React中使用Vditor详解（自定义图片）
安装npm install vditor -s引用导入依赖包import Vditor from “vditor”;导入样式import “vditor/src/assets/scss/index.scss”;使用示例export default class Vditor extends Component { constructor(props) { super(props); this.state = { editValue: ""
2020-12-24 19:19:49
2383
3
原创 git commit报错（husky ＞ commit-msg hook failed）
报错信息➜ guchejia_web_app git:(5.1.1) ✗ git commit -am "[feat]: 修改弹窗"Warning: Setting commit-msg script in package.json > scripts will be deprecatedPlease move it to husky.hooks in package.json, a .huskyrc file, or a husky.config.js fileOr run ./nod
2020-10-10 11:08:01
10254
6
原创 前端实用小工具（URL参数截取、JSON判断、数据类型检测、版本号对比等）
背景在日常开发中，我们经常会用一些工具类方法来实现业务逻辑 下面列举几种最常用的URL截取参数//直接调用输入想要截取的参数名称几个export function getParamFromUrl(key) { if (key === undefined) return null; let search = location.search.substr(1); let mReg = new RegExp('(^|&)' + key + '=([^&]*)(&am
2020-09-30 11:01:56
569
原创 React+TS免注册DOM页面dialog弹窗
背景在日常的需求开发中我们经常需要用到弹窗，那么在我们构建弹窗时，在引用组件是都需要引入组件DOM，然后通过事件来控制组件的影藏显示，调用也不是很方便；本组件使用事前注册DOM的方式，业务方在使用时刻直接调用暴露的方法即可，无需再引用DOM。示例组件使用示例import newDialog from “*./components/newDialog”newDialog.open({ title: "退出发布", content: '是否需要保存草稿箱？', btn:
2020-09-29 16:16:35
558
原创 gitbook使用及book.json详细配置
安装安装命令：1npm install -g gitbook-cli test安装完成之后，你可以使用下面的命令来检验是否安装成功。$ gitbook -VCLI version: 2.3.2GitBook version: 3.2.3使用初始化 gitbook initGitBook 准备工作做好之后，我们进入一个你要写书的目录，输入如下命令。$ gitbook initwarn: no summary file in this bookinfo: create READ
2020-07-21 17:57:59
5491
原创 Flutter Text详解
示例APIText，很常用的一个Widget；用于显示简单样式文本，它包含一些控制文本显示样式的一些属性text构造方法源码：/// If the [style] argument is null, the text will use the style from the /// closest enclosing [DefaultTextStyle]. /// /// The [data] parameter must not be null. const Text( t
2020-07-06 14:05:20
5612
原创 从Flutter路由报错引申BuildContext详解
前言在使用flutter路由跳转是出现如下错误：代码：import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return new MaterialApp( title: 'Test Flutter',
2020-07-06 14:02:35
1893
1
原创 vscode调试Flutter
前言之前每次启动flutter时首先是要open -a Simulator打开本地的模拟器（我这里是Mac Xcode的iOS模拟器），然后在运行flutter run命令，这是才会把程序运行的模拟器；Launching lib/main.dart on iPhone Xʀ in debug mode...Running Xcode build... ├─Assembling Flutter reso
2020-07-06 10:25:54
7064
myflutter.zip Flutter项目实战
2019-10-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人