前端
关注
分享
扫一扫
文章平均质量分 50
哎呦喂超超。
coding coding
展开
-
react-native 遇到的一些问题
工作的时候跑一个别人的RN项目遇到的一些坑,及汇总的解决方法react-native 遇到的一些问题问题1error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening DvaStarter.xcworks原创 2021-02-28 23:37:07 · 4546 阅读 · 0 评论 -
ios - 带有 “use_native_modules!”的react-native ios Podfile问题
platform :ios, '9.0'require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'target 'hhs2' do # Pods for hhs2 pod 'React', :path => '../node_modules/react-native/' pod 'React-Core', :path => '../node_modules.转载 2021-02-08 14:33:51 · 1513 阅读 · 0 评论 -
react-native run-android 问题(mac)
react-native run-android 一些问题问题1: error Failed to launch emulator. Reason: No emulators found as an output of emulator -list-avds.解决:确保装了android sdk ,你需要能找到目录,比如在mac上cd ~/Library/Android/sdk可以看到这些文件确保环境变量正确 vim ~/.bash_profile # 打开.bash_pro原创 2021-01-10 03:21:41 · 5040 阅读 · 3 评论 -
Running “flutter pub get“ in flutter_tools 一直没动静
Running “flutter pub get” in flutter_tools 一直没动静解决方法(mac环境)vim ~/.bash_profile进入文件后,添加两行代码 ,更改依赖下载地址为国内源export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn然后保存退出,运行source ~/.bash_profile 来更新.原创 2021-01-02 03:53:38 · 4038 阅读 · 2 评论 -
mac Waiting for another flutter command to release the startup lock.
运行flutter doctor 出现Waiting for another flutter command to release the startup lock.提示执行以下代码:rm /Applications/flutter/bin/cache/lockfile原创 2021-01-02 01:41:22 · 474 阅读 · 0 评论 -
前端数据流方案Dva
一、Dva简单介绍基于 redux 和 redux-saga 的数据流方案.实际上通俗点的讲法,就是集成了react的一些库,包括react、react-dom、react-router-dom、connected-react-router、redux、redux-saga组件传值:父传子子传父兄弟组件传值(约定最小公约父节点)一些容易混淆的基本概念的区别create-react-app 内置了webpack配置的脚手架roadhog 相当于可配置的create-reac原创 2020-12-19 18:00:06 · 1400 阅读 · 1 评论 -
多位验证码组件Captcha
效果图:index.jsimport React from 'react'import styles from './index.less'import { Input } from 'antd'import PropTypes from 'prop-types'import { remove } from 'lodash'const BACK_SPACE = 8const LEFT = 37const RIGHT = 39class Captcha extends React.C原创 2020-12-16 15:45:20 · 782 阅读 · 0 评论 -
React 自定义渐变时间轴组件TimeLine
实现效果组件代码：index.jsimport React from 'react'import styles from './index.less'import _ from 'lodash'import PropTypes from 'prop-types'/** * 自定义 带渐变时间轴组件 */class TimeLine extends React.Component { constructor(props) { super(props) } re原创 2020-09-19 22:14:17 · 2651 阅读 · 2 评论 -
create-react-app 支持less踩坑
通过create-react-app 是默认不支持less的，所以需要自己配置编译成功有className在项目中显示为undefined打开配置 npm run eject在项目文件根目录下可以看到config文件夹，打开其中的webpack.config.js配置// style files regexesconst cssRegex = /\.css\$/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\..原创 2020-09-07 19:14:07 · 1631 阅读 · 0 评论 -
scrollTop踩坑
scrollTop踩坑业务场景通过webUSB 连接开发板，开启Serial串口进行通讯。因为开发板在串口开启后会一只像web端传输数据，我们拿到这个数据之后，要返回到用户界面，类似于实现terminal之类的页面返回给用户。目的每条数据到达web端，就反馈到用户界面。数据超过了一定数量之后，显示数据到区域应该会进行实时滚动。我这里打算用到是js 中的scroll去实现，每次一条数据到达web端的时候，控制对应的div scrollTop = scrollTop + 21 ,其中21是一行数据原创 2020-09-03 23:01:39 · 367 阅读 · 0 评论 -
段落超长文本自适应间距
该方式只适用于块级元素text-align:justify生成一段如下英文段落，并限制p标签宽度为700px中文文本也适用。<html> <body> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem doloremque esse labore, molestiae nemo iste, itaque nam asperiores repudi.原创 2020-08-18 23:47:59 · 395 阅读 · 0 评论 -
React Hooks:Effect无限回调踩坑
场景我的目的是通过Effect来模拟组件的componentDidMount,在渲染完成之后，通过setTimeout来处理操作，向keyIndex中push一个新的元素，并更新keyIndex，但是这个操作我确定只会执行一次。错误代码如下： const [keyIndex, setKeyIndex] = React.useState([]); React.useEffect(() => { setTimeout(() => { console.log('err lo原创 2020-08-18 23:11:21 · 1599 阅读 · 0 评论 -
Flutter（一）初识
Flutter初识Flutter是什么？Flutter是一个UI SDK可以进行移动端（iOS、Android）、web（beta）、桌面应用开发端“跨平台解决方案”正在侵蚀iOS、Android这些原生开发Flutter 的特点美观内置 Material Design和Cupertino widget，丰富的motion API，平滑而自然的滑动效果和平台感知快速Flutter的UI渲染性能很好，在生产环境中将代码编译成机器码进行编译，充分利用GPU的徒刑加速能力，因此原创 2020-08-02 21:24:52 · 216 阅读 · 0 评论 -
mouseenter与mouseover的区别
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleavedemo演示效果如图：原创 2020-08-01 00:31:19 · 203 阅读 · 0 评论 -
Webpack浅尝
写在开头：此 Webpack 教程是阮老师在 Webpack 1.x 的版本上做的。现在 Webpack 的版本已经改动较大，建议有基础的同学，就直接上官网看最新的就好了。这个教程可以用来了解下 Webpack 的前世今生。开始这个项目是一些简单的 Webpack 示例集合这些示例特意用简单明了的方式编写，你将会发现跟着这些例子学习这个强大的工具并非难事。如何使用首先，全局安装 Webpack 和webpack-dev-server$ npm i -g webpack webpack-dev转载 2020-07-24 00:07:51 · 302 阅读 · 0 评论 -
lodash-difference理解
difference理解difference(array,[values])将array中的元素与values进行对比，移除在values中出现的所有值，并返回这个新的数组_.difference([3, 2, 1], [4, 2]);// => [3, 1]differenceBy(array,[values],[iteratee=_.identity])将array 与values中的每个元素都通过iteratee处理，再进行匹配，返回一个新的数组例子如下：_.diffe原创 2020-07-13 00:15:56 · 2239 阅读 · 0 评论 -
React Hooks
React Hooks什么是Hooks ：个人理解：有自己的state的函数式组件，无状态组件式函数，在加上state后，就成现在的Hooks什么是函数式组件：即HOC高阶组件，可向其中传递组件，经过函数的再次封装得到一个新的组件要求：React要求要将hooks写在函数最外层，不能写在if-else等语句中，确保hooks的执行顺序四个钩子函数useState状态钩子import React,{useState} from 'react'function App(){ //创造原创 2020-07-01 12:48:17 · 195 阅读 · 0 评论 -
sass 和 less
sass和less都是css预处理器，目的旨在提高和增强css的能力sass概述：sass基于Ruby，原来Ruby环境，使用前必须安装Ruby环境，可以理解为scsss的严格模式，全兼容css。是一款最早且最成熟的css预处理器（性能超强）他可以使用变量、常量、嵌套、混入、函数等功能他有两套语法规则：1.用缩进作为分隔符来区分代码 2.用{} 作为分隔符（此规则就是scss，在scss3之后都支持这套语法）sass的导入导入其他sass/scss文件，可忽略文件后缀，编译方式为被倒入文原创 2020-06-17 20:23:06 · 269 阅读 · 0 评论 -
H5 iOS微信端点击图片触发3Dtouch，导致无法扫描二维码【解决方法】
问题复现：解决办法：Wechat 的浏览器是 基于webkit内核的需要为img标签加即可-webkit-touch-callout: none;原创 2020-06-11 17:16:07 · 914 阅读 · 0 评论 -
canvas绘制图片，图片变模糊
canvas绘制图片，图片变模糊问题：设定一个一定尺寸的canvas，我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候，大概率都会出现图片模糊的情况。我拿下面一张图片画到canvas上作为例子，看上去应该比较明显的有模糊的感觉。其实在大学的时候我有做过canvas相关的开发内容，也遇到这种问题，当时太菜不懂。单方面的去修改图片精度，换成更高清的图片，事实证明确...原创 2020-05-07 02:07:20 · 3121 阅读 · 0 评论 -
table td长度被撑开
td长度被撑开问题复现：一个table ，为每个td设置了宽度百分比，但是实际效果是td的宽度还是被撑开了代码如下：<table className={styles.selfAchievement}> <tr className={styles.selfAchievementTr}> <td style={{width:"17%"}}&g...原创 2020-04-24 20:02:31 · 1676 阅读 · 0 评论 -
td tr th样式设置踩坑
错误写法<div className={styles.selfAchievement}> //div <tr className={styles.selfAchievementTr}> <td>1</td> <td>2</td> <td>3</td> ...原创 2020-04-22 10:12:17 · 2237 阅读 · 0 评论 -
deepClone
深拷贝提要平常写代码的时候，一定要注意，copy你对另一个文件对时候，看看你的赋值方式是不是直接=赋值的。例如let A = { name :'zhangsan',age:21}let B = AB.age = 22console.log(A)//{ name :'zhangsan',age:22}console.log(B)//{ name :'zhangsan',age:22...原创 2020-04-21 22:20:44 · 247 阅读 · 0 评论 -
PureComponent踩坑
PureComponentreact 中的PureComponent区别于 Component ，是为了进一步优化shouldComponentUpdate的。在组件中的优先级顺序是你写的shouldComponentUpdate>PureComponent中的shouldComponentUpdate>Component中默认的shouldComponentUpdate大家都...原创 2020-04-21 13:33:49 · 550 阅读 · 0 评论 -
react HTMLCollection为空
HTMLCollection是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。情形：在项目中通过组件的参数传递一个node节点，并在组件中进行组件向上遍历寻找我的目的节点。 constructor(props:any) { super(props); this.addClass(COLLAPSER_CLASS); this._model = ...原创 2020-04-07 20:39:51 · 1354 阅读 · 2 评论 -
文本超出部分用...代替
效果图如下：直接上代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> ...原创 2020-03-30 20:40:53 · 606 阅读 · 0 评论 -
自己实现bind函数【转载】
看到一篇讲如何自己实现bind的过程，这篇讲的特别清晰，过程明了。建议跟着博客打开开发者工具自己敲一下试试。会很有收获。然后这里有一点再补充一下两点可能理解起来不是很清晰或者容易犯糊涂的地方。if (!Function.prototype.bind) { Function.prototype.bind = function () { var self = this, ...转载 2020-03-19 22:13:24 · 476 阅读 · 0 评论 -
vue中img的src属性踩坑
这里一个朋友问到我，在vue里面，写了一个for循环 <div v-for="item in 5"> <img src="../assets/img{{item}}" /> </div>需要在下面img的路径根据循环的下标 或者是item本身去改变达到img0—img1—img2类似效果我的建议是使用模版字符串<img ...原创 2020-03-19 21:17:19 · 3395 阅读 · 0 评论 -
页面跳转取消请求操作实现
页面跳转取消请求操作场景：当从A页面跳转到B页面时，发生在A页面到请求操作仍然在进行，那么B页面到请求操作就会被加入到队列中等待。在某些情况下，A页面到请求结果对我们来说已经没有了任何意义，所以主动把正在进行对请求取消掉，可以优化程序。javascriptvar controller = new AbortController();var signal = controller.sig...原创 2020-03-18 14:39:51 · 1571 阅读 · 0 评论