大前端专栏
文章平均质量分 74
浅夏晴空
这个作者很懒,什么都没留下…
展开
-
JSON转换TypeScript
TypeScript(TS)是一种强类型的编程语言,由于在编译时便会发现代码存在的问题,被前端团队大量使用。TS使开发人员能够掌握各种组件的交互方式,并使代码重构变得更加容易;但对于需要准确定义的类型,在使用时会比较麻烦。特别是涉及数个及数十个后端接口数据的类型定义,会有大量的转换和的时间成本。通过VSCode插件实现一键生成TS声明,可以节省编程过程的开发成本。为了克服TS的变量类型声明过于繁琐的缺点,节约开发成本,推荐使用VSCode插件【Auto-ts-inline-types】。原创 2022-10-13 15:35:03 · 4022 阅读 · 1 评论 -
Mac M1 nvm install失败问题
M1执行nvm install安装node报错404原创 2022-08-02 10:42:39 · 3114 阅读 · 2 评论 -
RN TouchableOpacity点击事件不响应原因详解
问题 首先是整个页面布局如上:在实际开发中发现 如下红框中的所有区域点击事件均没有效果,不会触发 问题定位RN基本触摸组件尝试TouchableHighlight、TouchableNativeFeedback、 TouchableOpacity 、 TouchableWithoutFeedbackonPressIn:点击开始;onPressOut:点击结束或者离开;onPress:单击事件回调;onLongPress:长按事件回调。以上触摸事件无论怎么尝试在红框区域原创 2021-12-20 10:27:27 · 3004 阅读 · 0 评论 -
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 · 2480 阅读 · 0 评论 -
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 · 832 阅读 · 0 评论 -
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 · 14460 阅读 · 0 评论 -
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 · 3739 阅读 · 1 评论 -
前端性能优化
性能优化是把双刃剑,有好的一面也有坏的一面。好的一面就是能提升网站性能,坏的一面就是配置麻烦,或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景,需要谨慎使用,请读者带着批判性的眼光来阅读本文。1. 减少 HTTP 请求一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发回响应,浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP :这是一个 HTTP 请求,请求的文件大小为 28.4KB。名词解释:Q转载 2021-04-29 15:42:50 · 509 阅读 · 0 评论 -
react-hooks原理
一 前言本篇文章主要从react-hooks起源,原理,源码角度,开始剖析react-hooks运行机制和内部原理,相信这篇文章过后,对于面试的时候那些hooks问题,也就迎刃而解了。实际react-hooks也并没有那么难以理解,听起来很cool,实际就是函数组件解决没有state,生命周期,逻辑不能复用的一种技术方案。Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。老规矩,????️????️????️我们转载 2021-04-29 14:39:52 · 7858 阅读 · 2 评论 -
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 · 633 阅读 · 0 评论 -
年终盘点跨平台技术(Hybrid、RN、Weex、Flutter)-全栈系列
跨平台技术发展的三个阶段第一阶段是混合开发的web容器时代为了解决原生开发的高成本、低效率,出现了Hybrid混合开发原生中嵌入依托于浏览器的WebViewWeb浏览器中可以实现的需求在WebView中基本都可以实现但是Web最大的问题是,它的性能和体验与原生开发存在肉眼可感知的差异因此并不适用于对性能和用户体验要求较高的场景第二阶段是以RN和Weex为代表的泛web容器时代RN对Web标准进行了功能裁剪用户体验更接近于原生了由于进行了功能裁剪,所以RN对业务的支持能力还不原创 2021-01-27 10:25:24 · 1895 阅读 · 0 评论 -
前端知识体系-全栈系列(图谱+大纲)
前端知识体系(图谱)前端工程化体系node主流技术栈大纲ReactVueAngularJavaScriptTypeScript跨平台技术大纲跨端技术发展的三个阶段HybridReactNativeFlutterweex小程序快应用ionicCordova性能优化和监控前端知识体系(大纲)前端工程化体系基础设施规范化前端标准(基础)W3CSPADOMBOMXHTMLXMLJSONJSONPHTTP原创 2021-01-25 17:33:10 · 11683 阅读 · 6 评论 -
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 · 436 阅读 · 2 评论 -
2021大前端技术储备
GMTCGMTC全球大前端技术大会是由极客邦科技旗下InfoQ中国主办的技术盛会,关注前端、移动、AI应用等多个技术领域,促进全球技术交流,推动国内技术升级。GMTC为期4天,包括两天的会议和两天的培训课,主要面向各行业前端、移动开发、AI技术感兴趣的中高端技术人员,大会聚焦前沿技术及实践经验,旨在帮助参会者了解大前端&移动开发领域的技术趋势与实践案例。GMTC技术演变2016全球移动技术大会大会主题动态化swift新技术实践RN客户端性能优化应用架构VR/AR开发架构演进.原创 2020-12-30 10:38:46 · 4343 阅读 · 5 评论