自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e

前期追深度,否则会华而不实,后期追广度,否则会坐井观天

  • 博客(100)
  • 资源 (2)
  • 收藏
  • 关注

原创 前端知识体系-全栈系列(图谱+大纲)

前端知识体系(图谱)前端工程化体系node主流技术栈大纲ReactVueAngularJavaScriptTypeScript跨平台技术大纲跨端技术发展的三个阶段HybridReactNativeFlutterweex小程序快应用ionicCordova性能优化和监控前端知识体系(大纲)前端工程化体系基础设施规范化前端标准(基础)W3CSPADOMBOMXHTMLXMLJSONJSONPHTTP

2021-01-25 17:33:10 11511 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 6602 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 48488 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 16386

原创 JSON转换TypeScript

TypeScript(TS)是一种强类型的编程语言,由于在编译时便会发现代码存在的问题,被前端团队大量使用。TS使开发人员能够掌握各种组件的交互方式,并使代码重构变得更加容易;但对于需要准确定义的类型,在使用时会比较麻烦。特别是涉及数个及数十个后端接口数据的类型定义,会有大量的转换和的时间成本。通过VSCode插件实现一键生成TS声明,可以节省编程过程的开发成本。为了克服TS的变量类型声明过于繁琐的缺点,节约开发成本,推荐使用VSCode插件【Auto-ts-inline-types】。

2022-10-13 15:35:03 3891 1

原创 Mac M1 nvm install失败问题

M1执行nvm install安装node报错404

2022-08-02 10:42:39 2858 2

原创 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 2164

原创 RN TouchableOpacity点击事件不响应原因详解

问题 首先是整个页面布局如上:在实际开发中发现 如下红框中的所有区域点击事件均没有效果,不会触发 问题定位RN基本触摸组件尝试TouchableHighlight、TouchableNativeFeedback、 TouchableOpacity 、 TouchableWithoutFeedbackonPressIn:点击开始;onPressOut:点击结束或者离开;onPress:单击事件回调;onLongPress:长按事件回调。以上触摸事件无论怎么尝试在红框区域

2021-12-20 10:27:27 2890

原创 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 2437

原创 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 14263

原创 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 3681 1

原创 Flutter时间轴(timeline)

组件在业务开发中经常会使用到timeline时间轴,来记录数据操作记录等,在这本人封装了一个相对较通用的时间轴组件。示例 参数参数类型必填说明timelineListList是时间轴数据lineColorColor是时间轴轴线颜色heightdouble否时间轴右侧容器高度(默认80)titleStyleTextStyle否时间轴标题样式(已定义初始值 如无特殊样式无需传参)subtitleStyleTextStyle否

2021-11-16 19:22:33 3976 1

原创 Flutter 页面滚动吸顶详解(NestedScrollView)

前言在业务开发中我们经常会有滚动吸顶的效果,目前Flutter也有很多种实现方式,这里介绍一下本人在开发中使用到的基于NestedScrollView实现的滚动吸顶组件;以及中间涉及的各种定位的布局操作;效果NestedScrollView首先了解一下NestedScrollView滚动组件;NestedScrollView:支持嵌套滑动的ScrollView;属性属性说明默认值controller滚动监听无scrollDirection滚动方向Axis.

2021-11-15 15:08:27 12645

转载 前端性能优化

性能优化是把双刃剑,有好的一面也有坏的一面。好的一面就是能提升网站性能,坏的一面就是配置麻烦,或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景,需要谨慎使用,请读者带着批判性的眼光来阅读本文。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 7806 2

原创 一文读懂babel编译流程,再也不怕面试官的刁难了

前言Babel 是一个强大的 js 编译器。有了 Babel, 我们可以放肆的使用 js 的新特性,而不用考虑浏览器兼容性问题。不仅如此,基于 babel 体系,我们可以通过插件的方法修改一些语法,优化一些语法,甚至创建新的语法。那么,如此强大且灵活的特性是如何实现的?我们从头开始,了解下 Babel 的编译流程。流程babel生成配置package.json项目配置文件"devDependencies": { "@babel/cli": "7.10.5", "@babel

2021-04-25 15:11:48 2755

原创 vscode中断点调试nodejs实用方便

前言在平时前端开发时,前端代码在浏览器上能很方便的断点调试,那么如果要调试node后端接口的话,该如何实现断点调试呢?配置vscode打开node项目点击左侧调试按钮点击Run and Debug选择语言为nodejs点击设置按钮添加配置更改lanuch.json配置文件添加自己的项目启动脚本文件和配置{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: htt

2021-04-22 14:24:36 2203 1

原创 MongoDB聚合(aggregate)常用操作及示例

简介MongoDB 中聚合(aggregate)主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果。有点类似 SQL 语句中的 count(*)。常用操作表达式描述$match用于过滤数据,只输出符合条件的文档。$match使用MongoDB的标准查询操作。$project修改输入文档的结构。可以用来重命名、增加或删除域,也可以用于创建计算结果以及嵌套文档。$limit用来限制MongoDB聚合管道返回的文档数。$skip在聚合管道中跳过

2021-04-19 16:08:20 4036

原创 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 2882 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 7422

原创 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 4109

原创 Chrome浏览器地址栏配置二维码自动生成工具

打开Chrome浏览器新开一个窗口地址栏输入 chrome://flags/ 搜索qr code 下拉框选择Enable选项 重启浏览器即可 点击需要生成二维码的网页地址栏 出现如下图标 点击小图标即可吧当前网址生成二维码 ...

2021-03-23 14:26:10 2217

原创 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 1846

原创 一些实用的Chrome插件

FEHelper简介本插件支持Chrome、Firefox、MS-Edge浏览器,内部工具集持续增加,目前包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工具,甚至在目前新版本的FeHelper中,还集成了FH开发者工具, 如果你也想自己搞一个工具集成到FeHelper中,那这一定能满足到你。另外,本站也提供部分工具的在线版本,欢迎使用,欢迎反馈!插件预览

2021-01-11 10:43:31 960 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 2190

原创 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 3126

原创 2021大前端技术储备

GMTCGMTC全球大前端技术大会是由极客邦科技旗下InfoQ中国主办的技术盛会,关注前端、移动、AI应用等多个技术领域,促进全球技术交流,推动国内技术升级。GMTC为期4天,包括两天的会议和两天的培训课,主要面向各行业前端、移动开发、AI技术感兴趣的中高端技术人员,大会聚焦前沿技术及实践经验,旨在帮助参会者了解大前端&移动开发领域的技术趋势与实践案例。GMTC技术演变2016全球移动技术大会大会主题动态化swift新技术实践RN客户端性能优化应用架构VR/AR开发架构演进.

2020-12-30 10:38:46 4098 5

原创 前端辅助开发工具

阿里矢量图库传送门包含非常丰富的图标Orion矢量图库传送门carbon传送门非常优美的代码编辑模块,可以辅助我们在写PPT等文档截取代码块的时候不再是模糊的截图,可直接使用这个公共copy代码块,非常清晰。如下图:codepen传送门CodePen 则是前端开发者们约“码”的天堂。它不仅提供给你了一个 Showcase 的平台,而且能够开拓你的视野 —— 你能够及时的了解最新前端技术的应用,同时帮助交互设计师找寻更多的灵感。附上大佬总结的优秀作品 传送门UI界面配色传送门

2020-12-28 10:18:24 640 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 2378 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 10228 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 5481

原创 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 1891 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 7060

知识体系全系列图谱文件

知识体系全系列图谱文件

2022-10-31

cstTask.zip RN项目实战

详细的RN实战项目,包含背景图片布局,列表布局、Flex布局、定位布局等;能帮助刚入门的你快速入门,写出你想要的项目

2020-04-08

myflutter.zip Flutter项目实战

代码里面包含了一个Flutter完整的中型项目,包含列表的使用,各种布局的使用;比如:背景图片、水平垂直布局、定位、栅格布局等

2019-10-08

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除