今天也要加油啊江同学

踩坑日记-前端篇

踩坑日记-前端篇

1. npm install时候连接寝室网会在一开始就卡住但是用热点就可以。。

2.小程序原生的tabbar局限性比较大,在如下情况:想使用字体图标,tabbar选项大于5个或者有不同用户身份(例如老师和学生登录进去后的tabbar要求不一样),可以使用将tabbar作为组件/将整个页面当作组件。自己偷懒没有手写,使用的是第三方的wux组件库https://www.wuxui.com/#/
自己写tabbar可以参考:https://www.jianshu.com/p/8b918e21cc6b
将整个页面当作组件参考:https://www.jianshu.com/p/9c1d60a29048

3.微信小程序开发引用weui组件库时,可以选择npm安装或者使用userExtendedLib扩展库,第二种方法引入不会占小程序大小,但是不好对引入组件的样式进行修改,例如想改变tabbar选中时的“绿色”字体就难以实现;同时两种方法不能同时饮用,否则会报错

4.npm方法安装组件库:
首先看微信小程序目录下有没有package.json文件,如果没有:
sudo npm init ,生成package.json
然后npm install 想要的包

然后在开发者工具下——工具——构建npm

勾选使用npm模块

修改app.json,将app.json中的”style”:”v2″去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。

再引入组件即可。

 

5.理解css中的 position

position规定了元素的定位类型,默认值为static,此外还有absolute,fixed,relative, static, inherit几种选择。

说明:属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或和固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

 

absolute就是对最近的非static的父节点进行定位。

fixed是不管父亲的位置,相对于浏览器窗口进行定位,”left,top,right,bottom”等属性更为绝对。

relative是跟自己比较,相对于其正常位置进行定位。也就是说没有添加top,left,bottom,right等信息时,relative有没有是一样的。

值得注意的是,absolute和fixed都会生成一个块级框。absolute的块级框的长宽的上限默认继承父亲节点的长宽。如果父亲节点没有宽度,则继承后里面的文字可能会出现竖向排列的情况。fixed的块级框的长宽也需要定义。

这里t1的宽度没有定义,所以是由内部的文本撑起来的,宽度为271.48;内部的h2的位置是absolute的,宽度的上限继承了父亲,但是同时向右偏移了100px,所以宽度只有171.48;如果外层的t1宽度没有设置或者小于两个h2标题字的宽度那么就会呈现竖向排列的效果,如下图所示

另外,absolute如果没有对偏移值进行设定时,这个元素只是脱离了文档流,会对后面的元素产生影响,但它原来在什么位置,现在还是在什么位置。如下图

如果现在给它在top上偏移60px,则会:

可以看到,子元素是参考于祖先元素的,跳过了没有position属性的父元素。但同时,横坐标方向也受到了非父节点的border的影响,这个原因暂时不清楚。另外需要注意的是 偏移量是0也相当于给了偏移量。例如:

另外需要注意水平和竖直方向是不相关的,水平方向给了偏移量,竖直方向没给,则竖直方向还是在原位置。从这张图我们也可以看到,position:absolute的元素的坐标起始点应该与最近的非static的元素起始点相同,没有受到文字和<父级元素>的影响,也就是不会受到这个最近的满足条件的父亲里其它元素的影响。

6. position:absolute下的一些常见问题

首先要知道,absolute下的块是具有“流体特性”的,这个特性的条件是对立方向同时发生定位。

Trick1:实现元素完全覆盖浏览器可视窗口

 

上面两种方法都可以实现元素铺满屏幕的效果,但是原理不同。第一种方法利用了absolute的流动性,第二种则设定了宽和高,实际上已经失去了流动性,此时想要添加内边距或外边距都会造成“宽高溢出”的表现。

Trick2:利用absolute实现水平垂直剧中

第一种方法可以利用margin:auto的自适应计算属性。当元素具有流体特性,此时设置margin:auto,该元素的外边距就会自动等分成两份。让元素实现自适应居中的效果。

此外,还可以通过transform实现元素的水平垂直居中

这种方法的效果相同,但是没有利用元素自适应布局的特点,也就是元素完全脱离了文档流。

7. 什么是脱离文档流

CSS中的脱离文档流也就是,当为某个元素设置浮动,或者绝对定位时,后面的兄弟元素占据了它以前的位置,这样后面的兄弟元素的位置就变了。这个现象就是元素脱离文档流。

 

8. CSS中margin, padding的区别

margin是块到外层的距离,也就是该元素到其它元素块的距离;

padding是元素内部,content到border的距离;

 

9. 微信小程序报错:

navigateTo:fail webviewcount limitexceed

超过限制的数量导致的,navigationTo会保留当前页,当保留页数超过上线了就会报错,跳转页数多时不防尝试用redirectTo。

 

10. flex布局

参考:https://www.cnblogs.com/echolun/p/11299460.html

xinyu