- 博客(50)
- 收藏
- 关注
原创 RN ios端 使用第三方字体
注意点mac识别字体,不是识别ttf文件的文件名,而是这个文件字体的postScript名称操作导入.ttf文件的时候,使用xcode,点击项目名文件,选择build Phases ,在copy bundle resources当中点击加号(➕),选择ttf文件,如图操作。然后找到info.plist文件,配置Fonts provided by application(这个每个博客都有,就不详细写了),要注意的是写Item的时候,是整个文件名加后缀寻找postScript名字打开字体集
2020-07-04 10:33:14 681
原创 RN View borderStyle只设置一边的Width无法显示
<View style={{height:computedRem(0.04),overflow:"hidden",marginVertical:computedRem(0.25)}}> <View style={{ borderColor:"#CACACA", borderWidth:computedRem(0.04), borderStyle:"dotted", height:0, borderRadius:0.1 }}> </View>&
2020-06-13 15:53:24 1131
原创 RN - 采坑记录
采坑记录1.react-router-native1.1Link2.Dimensions获取的宽高与实际不一致1.react-router-native1.1Link不要在内部元素中加外边距样式,不然后出现视觉上伪边框(颜色与设置的遮盖色一致)2.Dimensions获取的宽高与实际不一致const height = Math.round(Dimensions.get(“window”).height),布局的时候最好还是用100%待续…...
2020-05-27 17:36:47 402
原创 Vue源码(一)
Vue走core/index.js 核心代码走 import Vue from ‘./instance/index’初始构造函数function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keywor
2020-05-26 11:22:26 171823
原创 向下滚动加载
IntersectionObserver<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-05-22 14:49:32 210
原创 学习和理解宏任务和微任务
背景知识eventqueue 事件队列 --队是先进先出(买票排队)eventloop 事件循环 – 像是轮询,不间断地看有没有需要执行的回调和能不能执行(轮询)js执行机制(有问题,请留言指出,谢谢):从上到下开始执行,同步代码一直往下走,异步代码放到队列当中,然后继续走同步,同步走完之后,然后是事件循环,走事件队列,执行满足条件的回调,并根据情况决定执行完成之后是否注销回调异步代码放到队列当中:这个就是想食堂打饭排队,一个窗口有一个阿姨,问窗前的同学打哪些菜,然后确定这个同学,不要了,就
2020-05-22 11:57:32 1098
原创 addEventListener解析
参数事件名回调函数,获得一个event参数回调函数行为控制(boolean || option),只填写boolean控制的是useCaptureoption:开一个ts文件,然后用AddEventListenerOptions定义,vscode定位定义文件once?: boolean;//是否调用一次,true的话调用一次之后移除这个回调函数passive?: boolean;//是否阻止默认行为,true的话,禁用回调函数使用preventDefault方法且警告capture?:
2020-05-20 14:30:07 696
原创 浮动布局+中间优先加载
流程1. 思路2. 常见事例2.1 圣杯布局2.1.1 思路2.1.2 代码2.1.3 总结2.2 双飞翼2.2.1 思路2.2.2 代码2.2.3 总结1. 思路优先加载:html是从上往下 加载,所以越前面的内容越先加载浮动:浮动不能超过前一个非浮动元素,所以中间优先加载的容器必须浮动,否则左侧只能在坐下侧,而不是顶对齐的左边,右边也是同理高度坍塌:浮动之后,浮动元素将不被父元素纳入渲染逻辑,所以可以用伪元素和clear:both;或者低版本兼容的table.clear来处理元素上移:因为是
2020-05-20 13:25:08 370
原创 懵逼的RN之旅--day2
TextInput原生组件问题多行输入属性:multiline={true},默认是false表现:软键盘出现回车键获取文本!!!重点标注这里很困惑的在于useRef取不到值,猛男哭泣,希望大佬救救(教导)弟弟解决方法,onChangeText,获取text然后闭包(这里没必要双向绑定)“react”: “16.11.0”,“react-dom”: “^16.13.1”,“react-native”: “0.62.2”常用属性访问原网页...
2020-05-18 13:26:32 165
原创 懵逼的RN之旅--day1
整理一下今天遇到的知识盲区marginposition刘海全面屏对于styleSheet没有单位的问题margin用ButtonGroup,他有外边距,导致我的底部navBar不能完全靠边,特别的窒息,尝试了margin:0,并没有啥用,然后想去issue找找有没有人有同样的问题,然后就看到了marginHorizontal和marginVertical的分支更新,说什么提供覆盖,然后试了一下...
2020-05-01 14:23:10 236
原创 react-native-vector-icons 笔记记录
第一次用RN开发,想先做个底部的NavBar,然后就用了react-native-element,一上手就报错react-native-vector-icons,自信就是这么简单,反正有问题不会是我的问题,毕竟我啥也没做百度一下,行了,这是个通病了,总结一下解决方法yarn add react-native-vector-icons这是个可选的操作npx react-native l...
2020-04-30 23:50:16 185
原创 react context 不同文件下的应用
react context 不同文件下的应用第一步 - 创建第二步 - 引入总结记录一下不同文件对于context的调用第一步 - 创建在根节点或者改数据应用的组件树的根节点,使用createContext创建出实例,使用.provider包裹需要共享数据的子节点,export 导出这个实例let obj = {width:1024};export let GlobolWidth = ...
2020-04-29 19:39:08 961 1
原创 proxy实例的apply方法
描述看了阮一峰大佬对apply实例对于apply的实例说明之后,不是很明白这个方法到底哪里影响了apply,call和bind,有兴趣的可以点链接研究我先明确的apply,call和bind的作用是改变函数上下文对象(this),所以给出的实例,我其实并不能认可这几个实例方法是描述阻拦this修改的,而是在最后处理结果,再加工了一次var twice = { apply (ta...
2020-02-26 19:04:14 1593 1
原创 webpack入门学习-入口
入口:单入口写法entry: string|Array\<string>对象写法entry: {[entryChunkName: string]: string|Array<string>}多页面应用程序const config = { entry: { pageOne: './src/pageOne/index.js', pageTwo...
2019-11-05 00:19:39 138
原创 1.基础巩固--禁用默认事件
禁用默认事件的方法1.event.preventDefault()2.return false区分先从最常见的label开始,1.label可以帮助我触发input类的元素的,常用来作为单选,多选的样式重做2.label是个行内块3.行内块具有块的性质,但是可以在同行排布4.块的性质: 1.独占一行  ...
2019-11-03 22:41:35 366
原创 CRM页面中使用tab切换和iframe加载模拟浏览器tab页
1.背景CRM为了兼容各种浏览器(主要还是ie10,emmm或者说项目组为了试用能兼容ie10的公司前端框架,所以用的是旧版本的底层框架),2.问题能在页面中模拟浏览器3.实现从实现来讲,就是tab页的切换,监听.tab.active就能实现的,但是要iframe点击,也能在父页面跳出页面,模拟浏览器打开新的tab页所以需要用到一个状态管理,但是比较头疼的是我的知识范围里,状态管理都...
2019-10-04 02:01:37 432
原创 typeScript--基础学习
typeScript因为是js的超类,所以大致上还是很容易学的,所以总结一下差异1.菜鸟新增1.定义元素变量是需要使用:注释改变量的类型优化了js的弱类型语言,影响我花里胡哨的骚操作2.单一类型数组类定义时可以使用Array<类型>或者类型[]的形式声明即let arr : Array<String> =['hello','word'];或者let arr...
2019-09-03 18:13:12 574
原创 react生命周期
react生命周期1.组件的constructor构造,不添加state会提示无用,建议删除2.componentWillMount组件挂载之前3.render渲染4.componentDidMount组件挂载之后(官方建议这里使用axios请求,我喜欢在1或者2)更新:...
2019-08-30 16:45:30 136
原创 react--简单组件使用axios
react–简单组件使用axios先试用nodejs构建一个服务器//app.jsconst express = require('express');const serve = express();serve.listen(3001);serve.get('/data/demo1',(req,res)=>{ res.send({ code:1,...
2019-08-26 10:41:34 1010
原创 react-redux基础学习(n多天)(一)
react-redux基础在学了三天之后的一个早上,我也不知道为啥就会了一丢丢,所以记录一下.学习过程1.我先去github逛gai2.有点乱,回归中文文档3.emmm,都觉得不太适合新手,但是划水了两天了,我要洗心革面4.我clone了github库,去看最简单的todo源码,clone地址中文文档有5.还是撸demo适合一点ps:其实去bilibilii看视频挺快的,我只是最...
2019-08-23 16:27:17 111
原创 create-react-app-路由基础复习--底部导航栏制作
基于路由和制作一个底部导航栏//Tabbar.jsimport React , { Component } from 'react';import { Link , BrowserRouter as Router } from 'react-router-dom';import './Tabbar.scss';export default class Tabbar extends Com...
2019-08-19 09:44:57 693 1
原创 create-react-app-路由基础学习(一)
react-router官方文档学习中…开始倒腾下载react-router-dom这个是基于react-router的页面扩展RN把dom改成native
2019-08-16 09:52:41 569
原创 记一次react项目部署之后页面加载极度缓慢的问题
加载太慢了21.11s我是真的吐了,紧接着刷新,就会立即加载然后Firefox看了一下是js的问题,我太难了我太难了这么点东西加载都这么慢然后为script标签加个async属性,让他有异步加载,加载完之后执行但是async因为是乱序异步的,所以会导致不按顺序执行js,所以建议使用defer,虽然是依旧是异步加载,但是会按先后顺序执行我真是太难了,我发现最大的问题不在于加载...
2019-08-16 09:46:10 9282 1
原创 create-react-app -基础练习-2048制作
2048制作总结1.安装node-sass时要重启npm start2.在移动位置时,可以0位跳过循环,减少代码执行次数3.在所有格子满了之后,再执行游戏是否结束的判断4.使用touchStart和touchEnd时间监听滑动起始和结束坐标,根据水平和垂直的移动距离差值,判断用户是水平还是垂直滑动,当值一致时.默认垂直滑动5.使用this.setState({})修改数据6.通过前后...
2019-08-15 09:49:54 188
原创 creat-react-app-基础学习(三)
for循环import React , { Component } from 'react';export default class MyFor extends Component { constructor(props){ super(props); this.state = { arr : [ ...
2019-08-13 10:01:24 101
原创 creat-react-app-基础学习(二)
基础操作1.if语句import React from 'react';//变量值,不会被其他文件直接获取,可以看做私有变量let tool;//获取一个随机数function changeTool (){ tool = Math.floor(Math.random()*10)+1; console.log(tool);}//返回一个模板function Dem...
2019-08-12 20:05:08 154
原创 creat-react-app-基础学习(一)
react脚手架参考1.官方文档2.安装和创建跳过1.脚手架文件目录了解1.node_modules 脚手架npm资源包2.public静态资源3.src编写脚本和存放动态资源的地方4. .gitignore文件,上传git时忽视一些文件5. package.json6. REANME.md git参考的项目说明7. yarn.lock 没太懂,但感觉很牛逼,像是设备间兼...
2019-08-12 14:50:21 453
原创 H5-socket.io
基于socket的聊天室参考1.b站就是b站,啥都有2.github官方文档1.视频很详细,所以它很长,不太好跳过,容易错过重点2.最基础的socket方法emit/onsocket.emit(事件名,data);socket.on(和emit的事件名一直,data=>{函数体});3.不用考虑跨域,美滋滋1.放一下自己的代码//client.html<!DO...
2019-08-05 20:23:22 537
原创 js--基于类,树,链表思想,实现一个简单的真实DOM树扫描成对象的类
扫描真实DOM树//简单的节点类class node { constructor(elem){ this.tagName=elem.tagName; this.data = elem.dataset; this.id = elem.id; this.className = elem.className; t...
2019-08-05 14:47:32 210
阿里云nodejs镜像---学习
小白学习linux参考1. 前端全栈学习视频2.csdn参考(1)连接操作基本可以跟着视频做,使用SSH连接阿里云时1.要注意自己的SSH端口22是否开启,2.linux默认用户名是root3.密码的话需要先自己去阿里云远程上修改进入阿里云控制台之后,点击远程连接SSH输入的的ip是控制台显示的ip输入 sudo su root进入root账号使用passwd root...
2019-07-31 09:25:46 2040
原创 笔记--编程中一些快捷的写法
//动态的调用同一个的数组中的内容//例如:轮播图let arr = [1,2,3];let index = 0;{//动态赋值的代码//使用取余的方法,在index长度为length时,获得余数0,减少了判断流程index = (index +1 ) % arr.length;}…待续...
2019-07-30 11:08:42 94
原创 笔记--ES6--class和extend,构造对象的语法糖,真香
class和extend参考:1.阮一峰大佬的es6电子版,喜欢看书的可以买一本支持支持大佬上代码//先写一个人,有名字和年龄class people{ constructor({name,age}){ this.age=age; this.name=name; } //一个名字介绍的方法 say(){ ...
2019-07-30 10:47:20 1984
原创 笔记--正则命名捕获
记match返回结果的中groups参考命名捕获分组总结‘123’.match(/(1)(2)(3)/),结果中返回一个满足条件的字符串,然后根据括号对这个字符串进行拆分,一个括号就相当于push()一下这时候无意义的下标对于后期在失去注释,或无意义/不全的注释的状态下维护,会让我们的维护增加难度所以在括号内容前以?<名>的形式增加一个申明,例如(?<id&g...
2019-07-27 11:16:09 179
原创 String.chatAt()
let str='这是一个ceshi123()*&^';//字符串的方法//charAt() //返回在指定位置的字符。//democonsole.log(str.charAt('1'),str.charAt('1以'));//是 这/* 总结: 1.str.charAt()方法的参数可以是数字或数字的字符串 2.内部猜测使用的是Number方法,因为...
2019-07-27 09:36:56 4366
原创 navigator.appName
找了很多的参考,无外乎两句话,兼容性和缅怀网景我就很好奇,到底在兼容什么然后翻到一篇外文的提问,里面提及了DOM0然后去了解了一下DOM0…看了介绍之后,就是不太推荐使用的标签监听属性on事件名,不过这文章有提到DOM0具有极好的跨浏览器优势,所以可能appName就是在这方面的支持吧,如果有知道的大佬请留个言,解释一下吧,老纠结了....
2019-07-26 20:26:00 781
原创 对象使用扩展运算符--添加迭代方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2019-07-26 09:32:21 337
原创 juicer模板引擎学习
juicergithub地址:https://github.com/PaulGuo/Juicer引入juicer1.变量${变量名}这些变量名在后面都需要通过juicer(模板字符串,data)中的data对象进行传值,juicer会将模板和数据进行构建,返回已经完成的HTML字符串,然后通过DOM操作的innerHTML将字符串放入2.过滤器在前端接受数据的时候,我们经常会拿到一些...
2019-07-25 16:47:26 856
转载 笔记--浏览器的同源策略
同源策略(same origin policy)参考:比较容易懂的内容,没有逼逼叨叨,也是一篇整理的文章,就是干货和代码,值得一看
2019-07-25 14:11:45 102
原创 笔记--HTTP--了解
了解Http的基础内容参考内容及连接菜鸟的教程,真的很适合我这种菜鸟总结HTTP hyper text transfer protocol 超文本传输协议,对于前端来讲HT(超文本)可以说是很熟悉的了,我们制作网页的骨架HTML(超文本标记语言)就是超文本中最常使用的(自吹).超文本,一直在说超文本,那么超文本又是什么呢.通过超链接的方式,使得文本超出了展示信息的能力范围,赋予了...
2019-07-25 13:21:02 84
原创 笔记-Canvas-画笔的存储与恢复机制学习
save()和restore()1.画笔的两种状态方法,保存和恢复( ()=>{ //获取画布元素 let canvas = document.getElementById('demo2'); //获取画笔 let ctx = canvas.getContext('2d'); //开始绘画路径 ...
2019-07-25 09:28:26 428
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人