修复(工具类): lerna QA
This commit is contained in:
parent
abb3cfe6db
commit
dbb0c36f5f
12
.umirc.ts
12
.umirc.ts
@ -21,12 +21,12 @@ export default defineConfig({
|
||||
locales: [['zh-CN', '中文']],
|
||||
navs: [
|
||||
null,
|
||||
// {
|
||||
// title: '其它',
|
||||
// children: [
|
||||
// { title: '爬虫', path: '/spider' },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
title: '其它',
|
||||
children: [
|
||||
{ title: '买房攻略', path: '/other/house/2017' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'GitHub',
|
||||
path: 'git@github.com:j710328466/learn-note.git',
|
||||
|
||||
@ -4,7 +4,7 @@ nav:
|
||||
path: /bed
|
||||
group:
|
||||
title: Go
|
||||
order: 1
|
||||
order: 2
|
||||
---
|
||||
|
||||
## 基础
|
||||
@ -42,4 +42,4 @@ func SampleReadFromString() {
|
||||
func main() {
|
||||
SampleReadFromString()
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
@ -10,41 +10,49 @@ group:
|
||||
# 快速上手
|
||||
|
||||
## 配置
|
||||
|
||||
### 1、目录结构
|
||||
|
||||
- ① pkg 打包后的路径
|
||||
- ② src 开发路径
|
||||
- ③ bin 应用程序
|
||||
- ① pkg 打包后的路径
|
||||
- ② src 开发路径
|
||||
- ③ bin 应用程序
|
||||
|
||||
### 2、两大配置路径
|
||||
|
||||
- gopath: $PATH
|
||||
- goroot: $PATH
|
||||
- gopath: $PATH
|
||||
- goroot: $PATH
|
||||
|
||||
### 3、查看当前环境配置
|
||||
|
||||
- go env
|
||||
- go env
|
||||
|
||||
### 4、设置环境变量
|
||||
|
||||
- vim ~/.profile 输入以下：
|
||||
- export GOROOT=/usr/local/go
|
||||
- export PATH=$PATH:GOROOT/bin
|
||||
- vim ~/.profile 输入以下：
|
||||
- export GOROOT=/usr/local/go
|
||||
- export PATH=$PATH:GOROOT/bin
|
||||
|
||||
## 知识点
|
||||
|
||||
### 常量定义
|
||||
|
||||
- 显式：const identifier type = value
|
||||
- 隐式：const identifier = value（无类型常量）
|
||||
- 特殊常量 iota
|
||||
- 介绍
|
||||
- 每次碰到 const 会被重置为 0，如果没碰到每新增一个常量声明，就会自增 +1
|
||||
- 使用技巧
|
||||
- 跳值使用法：使用 _ , 每一个 _ 能使 iota 的值跳过 1 , 要跳多少就给多少个 _
|
||||
- 插队使用法：在变量声明中再插入一个赋值的变量不会对 iota 自增产生影响
|
||||
- 隐式使用法：如果不声明值，则默认使用最后一个表达式的赋值格式
|
||||
- 显式：const identifier type = value
|
||||
- 隐式：const identifier = value（无类型常量）
|
||||
- 特殊常量 iota
|
||||
- 介绍
|
||||
- 每次碰到 const 会被重置为 0，如果没碰到每新增一个常量声明，就会自增 +1
|
||||
- 使用技巧
|
||||
- 跳值使用法：使用 _ , 每一个 _ 能使 iota 的值跳过 1 , 要跳多少就给多少个 \_
|
||||
- 插队使用法：在变量声明中再插入一个赋值的变量不会对 iota 自增产生影响
|
||||
- 隐式使用法：如果不声明值，则默认使用最后一个表达式的赋值格式
|
||||
|
||||
### 并发和并行
|
||||
|
||||
- 并发
|
||||
- 单核上，通过任务的来回切换达到类似同时进行
|
||||
- 并行
|
||||
- 两个任务同时执行
|
||||
- 并发
|
||||
- 单核上，通过任务的来回切换达到类似同时进行
|
||||
- 并行
|
||||
- 两个任务同时执行
|
||||
|
||||
### go 包源切换
|
||||
|
||||
```json
|
||||
|
||||
@ -18,7 +18,7 @@ group:
|
||||
|
||||
<code src="./demos/demo9/index.tsx" />
|
||||
|
||||
### 3D导航条
|
||||
### 3D 导航条
|
||||
|
||||
<code src="./demos/demo8/index.tsx" />
|
||||
|
||||
@ -8,127 +8,66 @@ group:
|
||||
path: /css
|
||||
---
|
||||
|
||||
# 基础介绍
|
||||
## 基础介绍
|
||||
|
||||
## 布局
|
||||
|
||||
### 绝对定位法
|
||||
|
||||
|
||||
> 左右两栏采用绝对定位，中间的由两边的margin撑开
|
||||
|
||||
|
||||
> 左右两栏采用绝对定位，中间的由两边的 margin 撑开
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div id="main"></div>
|
||||
<div id="left"></div>
|
||||
<div id="right"></div>
|
||||
<div id="main"></div>
|
||||
<div id="left"></div>
|
||||
<div id="right"></div>
|
||||
</body>
|
||||
|
||||
#main {
|
||||
margin:0 200px;
|
||||
background:red;
|
||||
}
|
||||
#left{
|
||||
position:absolute;
|
||||
top:0;left:0;
|
||||
width:200px;
|
||||
background:blue;
|
||||
height:100%;
|
||||
}
|
||||
#right{
|
||||
position:absolute;
|
||||
top:0;right:0;
|
||||
width:200px;
|
||||
background:green;
|
||||
height:100%;
|
||||
}
|
||||
#main { margin:0 200px; background:red; } #left{ position:absolute;
|
||||
top:0;left:0; width:200px; background:blue; height:100%; } #right{
|
||||
position:absolute; top:0;right:0; width:200px; background:green; height:100%; }
|
||||
```
|
||||
|
||||
|
||||
这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象
|
||||
|
||||
|
||||
### 自身浮动法
|
||||
|
||||
|
||||
> 左栏左浮动，右栏右浮动，中间栏放最后
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div id="left"></div>
|
||||
<div id="right"></div>
|
||||
<div id="main"></div>
|
||||
</body>
|
||||
|
||||
#main {margin:0 200px;background:red;}
|
||||
#left{float:left;width:200px;background:blue;height:100%;}
|
||||
#right{float:right;width:200px;background:green;height:100%;}
|
||||
<body>
|
||||
<div id="left"></div>
|
||||
<div id="right"></div>
|
||||
<div id="main"></div>
|
||||
</body>
|
||||
#main {margin:0 200px;background:red;}
|
||||
#left{float:left;width:200px;background:blue;height:100%;}
|
||||
#right{float:right;width:200px;background:green;height:100%;}
|
||||
```
|
||||
|
||||
|
||||
简单而高效，代码还容易理解，适合初学者
|
||||
|
||||
|
||||
### 圣杯布局
|
||||
|
||||
|
||||
```html
|
||||
//注意元素次序
|
||||
<div class="main">Main</div>
|
||||
<div class="left">Left</div>
|
||||
<div class="right">Right</div>
|
||||
|
||||
//习惯性的CSS reset
|
||||
body,html{
|
||||
height:100%;
|
||||
padding: 0;
|
||||
margin: 0
|
||||
}
|
||||
//父元素body空出左右栏位
|
||||
body {
|
||||
padding-left: 100px;
|
||||
padding-right: 200px;
|
||||
}
|
||||
//左边元素更改
|
||||
.left {
|
||||
background: red;
|
||||
width: 100px;
|
||||
float: left;
|
||||
margin-left: -100%;
|
||||
position: relative;
|
||||
left: -100px;
|
||||
height: 100%;
|
||||
}
|
||||
//中间部分
|
||||
.main {
|
||||
background: blue;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
//右边元素定义
|
||||
.right {
|
||||
background: red;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin-left: -200px;
|
||||
position: relative;
|
||||
right: -200px;
|
||||
}
|
||||
//习惯性的CSS reset body,html{ height:100%; padding: 0; margin: 0 }
|
||||
//父元素body空出左右栏位 body { padding-left: 100px; padding-right: 200px; }
|
||||
//左边元素更改 .left { background: red; width: 100px; float: left; margin-left:
|
||||
-100%; position: relative; left: -100px; height: 100%; } //中间部分 .main {
|
||||
background: blue; width: 100%; height: 100%; float: left; } //右边元素定义
|
||||
.right { background: red; width: 200px; height: 100%; float: left; margin-left:
|
||||
-200px; position: relative; right: -200px; }
|
||||
```
|
||||
|
||||
|
||||
稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高
|
||||
|
||||
|
||||
### 双飞翼布局
|
||||
|
||||
|
||||
```html
|
||||
div class="main">
|
||||
<div class="inner">
|
||||
@ -139,172 +78,135 @@ div class="main">
|
||||
<div class="right">Right</div>
|
||||
```
|
||||
|
||||
|
||||
> css样式就是将body上的左右margin值去掉，加在新增的 div 中
|
||||
|
||||
|
||||
> css 样式就是将 body 上的左右 margin 值去掉，加在新增的 div 中
|
||||
|
||||
这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁
|
||||
|
||||
小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的...
|
||||
|
||||
|
||||
首先我大概讲一下，传统轮播图的主要部分：
|
||||
|
||||
|
||||
- 图片（废话）
|
||||
- 左右两边的button
|
||||
- 左右两边的 button
|
||||
- 可以跳转的小点
|
||||
|
||||
## 轮播图
|
||||
|
||||
|
||||
- 轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转
|
||||
|
||||
|
||||
- 轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成 overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转
|
||||
|
||||
### 无限滚动
|
||||
|
||||
|
||||
- 我给两个按钮设为 **prev next** 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div id="list" style="left:-200px">
|
||||
<img src="./img/5.jpg" alt="">
|
||||
<img src="./img/1.jpg" alt="">
|
||||
<img src="./img/2.jpg" alt="">
|
||||
<img src="./img/3.jpg" alt="">
|
||||
<img src="./img/4.jpg" alt="">
|
||||
<img src="./img/5.jpg" alt="">
|
||||
<img src="./img/1.jpg" alt="">
|
||||
</div>
|
||||
<img src="./img/5.jpg" alt="" />
|
||||
<img src="./img/1.jpg" alt="" />
|
||||
<img src="./img/2.jpg" alt="" />
|
||||
<img src="./img/3.jpg" alt="" />
|
||||
<img src="./img/4.jpg" alt="" />
|
||||
<img src="./img/5.jpg" alt="" />
|
||||
<img src="./img/1.jpg" alt="" />
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽
|
||||
|
||||
|
||||
```javascript
|
||||
if (newList < -1000) {
|
||||
dot = 1
|
||||
list.style.left = -200 + 'px'
|
||||
}
|
||||
if (newList > -200) {
|
||||
dot = 5
|
||||
list.style.left = -1000 + 'px'
|
||||
}
|
||||
dot = 1;
|
||||
list.style.left = -200 + 'px';
|
||||
}
|
||||
if (newList > -200) {
|
||||
dot = 5;
|
||||
list.style.left = -1000 + 'px';
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 小按钮切换
|
||||
|
||||
|
||||
这要实现的思想有
|
||||
|
||||
|
||||
- 点了小按钮，背景色会变
|
||||
- 当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
function showBtn() {
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
if (btns[i].className == 'show-btn') {
|
||||
btns[i].className = ''
|
||||
break
|
||||
}
|
||||
}
|
||||
btns[dot-1].className = 'show-btn'
|
||||
}
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
if (btns[i].className == 'show-btn') {
|
||||
btns[i].className = '';
|
||||
break;
|
||||
}
|
||||
}
|
||||
btns[dot - 1].className = 'show-btn';
|
||||
}
|
||||
//遍历数组，将有该属性设为空
|
||||
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
btns[i].onclick = function () {
|
||||
if (this.className == 'showBtn') {
|
||||
return
|
||||
}
|
||||
var myIndex = parseInt(this.getAttribute('index'))
|
||||
var leng = -200 * (myIndex - dot)
|
||||
animate(leng)
|
||||
dot = myIndex
|
||||
showBtn()
|
||||
}
|
||||
}
|
||||
btns[i].onclick = function () {
|
||||
if (this.className == 'showBtn') {
|
||||
return;
|
||||
}
|
||||
var myIndex = parseInt(this.getAttribute('index'));
|
||||
var leng = -200 * (myIndex - dot);
|
||||
animate(leng);
|
||||
dot = myIndex;
|
||||
showBtn();
|
||||
};
|
||||
}
|
||||
//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离
|
||||
```
|
||||
|
||||
|
||||
> 这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu
|
||||
|
||||
|
||||
> 这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗 cpu
|
||||
|
||||
### 延迟动画函数
|
||||
|
||||
|
||||
就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理
|
||||
|
||||
|
||||
- 首先，定义参数
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var time = 300 //位移总时间
|
||||
var interval = 10 //位移时间间隔
|
||||
var speed = leng/(time/interval) //每次位移量，就是一共调用多少次的意思
|
||||
var time = 300; //位移总时间
|
||||
var interval = 10; //位移时间间隔
|
||||
var speed = leng / (time / interval); //每次位移量，就是一共调用多少次的意思
|
||||
```
|
||||
|
||||
|
||||
- 设置递归函数
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
if ((speed < 0 && parseInt(list.style.left) > newList) || (speed > 0 && parseInt(list.style.left) < newList)) {
|
||||
list.style.left = parseInt(list.style.left) + speed + 'px'
|
||||
setTimeout(go, interval) //递归,调用自身函数
|
||||
```
|
||||
|
||||
|
||||
- 判断是否仍在动画
|
||||
|
||||
|
||||
|
||||
如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止
|
||||
|
||||
|
||||
```javascript
|
||||
var animated = false //设初值
|
||||
var animated = false; //设初值
|
||||
|
||||
if(!animated) {
|
||||
animate(200)
|
||||
} //如果为false，则继续动画
|
||||
if (!animated) {
|
||||
animate(200);
|
||||
} //如果为false，则继续动画
|
||||
```
|
||||
|
||||
|
||||
### 自动播放
|
||||
|
||||
|
||||
首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放
|
||||
|
||||
|
||||
- 我们设两个函数，play（） 和 stop（）
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
function play() {
|
||||
timer = setTimeout(function() {
|
||||
next.onclick()
|
||||
play()
|
||||
},interval)
|
||||
}
|
||||
function stop() {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
timer = setTimeout(function () {
|
||||
next.onclick();
|
||||
play();
|
||||
}, interval);
|
||||
}
|
||||
function stop() {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
```
|
||||
|
||||
最后给整个 container 容器添加该鼠标事件
|
||||
|
||||
@ -4,77 +4,76 @@ nav:
|
||||
path: /fea
|
||||
group:
|
||||
title: 💊 css
|
||||
order: 2
|
||||
order: 3
|
||||
path: /css
|
||||
---
|
||||
|
||||
## SASS语法
|
||||
## SASS 语法
|
||||
|
||||
### if 语句
|
||||
|
||||
```css
|
||||
@mixin blockOrHidden($boolean: true) {
|
||||
@if $boolean {
|
||||
@debug "$boolean is #{$boolean}";
|
||||
@debug '$boolean is #{$boolean}';
|
||||
display: block;
|
||||
}
|
||||
@else {
|
||||
@debug "$boolean is #{$boolean}";
|
||||
} @else {
|
||||
@debug '$boolean is #{$boolean}';
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
.block {
|
||||
@include blockOrHidden;
|
||||
@include blockOrHidden;
|
||||
}
|
||||
.hidden {
|
||||
@include blockOrHidden(false);
|
||||
@include blockOrHidden(false);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### for 循环语句
|
||||
|
||||
|
||||
有以下两种形式
|
||||
|
||||
1. @for $i from <start> through <end>
|
||||
1. @for $i from <start> to <end>
|
||||
> 区别：2 的 <end> 不包括本身这个数
|
||||
|
||||
|
||||
> 区别：2 的 <end> 不包括本身这个数
|
||||
|
||||
#### 简单例子
|
||||
|
||||
```css
|
||||
@for $i from 1 through 10 {
|
||||
.item-#{$i} {
|
||||
width: 2em * $i;
|
||||
width: 2em * $i;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 复杂例子
|
||||
|
||||
```css
|
||||
$grid-prefix: span !default;
|
||||
$grid-width: 60px !default;
|
||||
$grid-gutter: 20px !default;
|
||||
|
||||
%grid {
|
||||
float: left;
|
||||
float: left;
|
||||
margin-left: $grid-gutter / 2;
|
||||
margin-right: $grid-gutter / 2;
|
||||
}
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
.#{$grid-prefix}#{$i} {
|
||||
width: $grid-width * $1 + $grid-gutter * ($1 - 1);
|
||||
width: $grid-width * $1 + $grid-gutter * ($1 - 1);
|
||||
@extend %grid;
|
||||
}
|
||||
}
|
||||
```
|
||||
###
|
||||
### while 循环
|
||||
|
||||
###
|
||||
|
||||
### while 循环
|
||||
|
||||
```css
|
||||
$types: 4;
|
||||
@ -82,16 +81,14 @@ $type-width: 20px;
|
||||
|
||||
@while $types > 0 {
|
||||
.while-#{$types} {
|
||||
width: $type-width + $types;
|
||||
width: $type-width + $types;
|
||||
}
|
||||
$types: $types - 1;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### each 语句
|
||||
|
||||
|
||||
```css
|
||||
$list: adam bob chris david eric;
|
||||
|
||||
@ -104,30 +101,32 @@ $list: adam bob chris david eric;
|
||||
}
|
||||
|
||||
.author-bio {
|
||||
@include author-images;
|
||||
@include author-images;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 列表函数
|
||||
|
||||
|
||||
### length($list)：返回长度
|
||||
|
||||
> length() 函数中的列表参数之间使用空格隔开，不能使用逗号
|
||||
|
||||
```css
|
||||
length(5px 88px (border 66px solid) 4em (border 8em solid))
|
||||
```
|
||||
###
|
||||
|
||||
###
|
||||
|
||||
### nth($list, $n)
|
||||
|
||||
返回列表第几个值
|
||||
|
||||
```css
|
||||
nth(1 2 3 4 5, 1) ----> 1
|
||||
```
|
||||
|
||||
|
||||
### join($list1, $list2, $separator)
|
||||
|
||||
> space：空格、comma：逗号
|
||||
|
||||
```css
|
||||
@ -135,36 +134,48 @@ join(1 2 3, 4 10 12, space)
|
||||
---> (1 2 3 4 10 12)
|
||||
```
|
||||
|
||||
|
||||
### append($list1, $list2, $separator)
|
||||
|
||||
和 join 一样的效果
|
||||
|
||||
|
||||
### zip($list1,$list2,...)
|
||||
|
||||
|
||||
```css
|
||||
zip(solid dashed dotted, 1px 3px 6px, #000 #fff #eee);
|
||||
```
|
||||
##
|
||||
|
||||
##
|
||||
|
||||
### index($list, $val)
|
||||
|
||||
找到 list 中 val 的索引
|
||||
|
||||
```css
|
||||
index(1px solid red, 1px)
|
||||
```
|
||||
|
||||
|
||||
### type-of()
|
||||
|
||||
判断类型：number、string、bool
|
||||
|
||||
### unitless()
|
||||
|
||||
判断一个值是否带有单位
|
||||
|
||||
### unit()
|
||||
|
||||
获取一个值得单位
|
||||
|
||||
### comparable()
|
||||
|
||||
判断两个数是否可以加、减、合并
|
||||
|
||||
### if($condition, $if-true, $if-false)
|
||||
|
||||
三元运算符
|
||||
|
||||
### map：数组
|
||||
|
||||
```css
|
||||
$map: (
|
||||
$key1: $value1;
|
||||
@ -185,131 +196,163 @@ $theme-color: (
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
#### map-get($map, $key)
|
||||
根据给定的 key，获取 map 中相关的值
|
||||
#### map-merge($map1, map2)
|
||||
合并两个map
|
||||
#### map-remove($map, $key)
|
||||
删除指定 key ，返回新map
|
||||
#### map-keys($map)
|
||||
返回 map 中所有 key 值
|
||||
#### map-values($map)
|
||||
返回 map 中所有 value 值
|
||||
#### map-has-key($map, $key)
|
||||
判断是否含有指定key值
|
||||
#### keywords($args)
|
||||
返回一个函数的参数
|
||||
|
||||
根据给定的 key，获取 map 中相关的值
|
||||
|
||||
#### map-merge($map1, map2)
|
||||
|
||||
合并两个 map
|
||||
|
||||
#### map-remove($map, $key)
|
||||
|
||||
删除指定 key ，返回新 map
|
||||
|
||||
#### map-keys($map)
|
||||
|
||||
返回 map 中所有 key 值
|
||||
|
||||
#### map-values($map)
|
||||
|
||||
返回 map 中所有 value 值
|
||||
|
||||
#### map-has-key($map, $key)
|
||||
|
||||
判断是否含有指定 key 值
|
||||
|
||||
#### keywords($args)
|
||||
|
||||
返回一个函数的参数
|
||||
|
||||
## 字符串函数
|
||||
|
||||
|
||||
### unquote：删除引号
|
||||
|
||||
> 只能删除最前和最后的引号
|
||||
|
||||
```css
|
||||
.test {
|
||||
content: unquote("im jsonskin");
|
||||
content: unquote('im jsonskin');
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### quote：添加引号
|
||||
|
||||
> 如果监测到有引号，不会重复添加
|
||||
|
||||
```css
|
||||
.test {
|
||||
content: quote(给我加个引号吧);
|
||||
content: quote(给我加个引号吧);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### to-lower-case、to-upper-case
|
||||
|
||||
|
||||
```css
|
||||
.test {
|
||||
text: to-upper-case(aa-bb-cc);
|
||||
text: to-upper-case(aa-bb-cc);
|
||||
text: to-lower-case(AA-BB-Cc);
|
||||
}
|
||||
```
|
||||
###
|
||||
|
||||
###
|
||||
|
||||
## 数字函数
|
||||
|
||||
### percentage($val)
|
||||
|
||||
将一个不带单位的数转换为百分比值；
|
||||
|
||||
### round($val)
|
||||
|
||||
四舍五入，取一个最接近的整数
|
||||
|
||||
### ceil($val)
|
||||
|
||||
将大于自己的小数换成下一位整数
|
||||
|
||||
### floor($val)
|
||||
|
||||
去除小数部分
|
||||
|
||||
### abs($val)
|
||||
|
||||
返回一个数的绝对值
|
||||
|
||||
### max($numbers...)
|
||||
|
||||
找出最大值
|
||||
|
||||
> 比较的数，单位要相同
|
||||
|
||||
### min($numbers...)
|
||||
|
||||
找出最小值
|
||||
|
||||
> 比较的数，单位要相同
|
||||
|
||||
### random()
|
||||
获取随机数
|
||||
|
||||
获取随机数
|
||||
|
||||
## 规则
|
||||
|
||||
|
||||
### @media
|
||||
|
||||
```css
|
||||
@media screen ($condition: $val) {
|
||||
.side-bar {
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### @extend
|
||||
|
||||
会继承 父级元素的属性，并继承它的子属性
|
||||
|
||||
```css
|
||||
.container {
|
||||
border: 1px solid #fff;
|
||||
border: 1px solid #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container:hover {
|
||||
color: #000;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.main {
|
||||
@extend .main
|
||||
@extend .main;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### @at-root
|
||||
|
||||
跳出父级样式到根部
|
||||
|
||||
```css
|
||||
.a {
|
||||
.b {
|
||||
.c {
|
||||
@at-root {
|
||||
color: red;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### @debug
|
||||
|
||||
调适使用
|
||||
|
||||
> @debug 1px + 2px
|
||||
|
||||
### @warn
|
||||
|
||||
> @warn "this is a warn: #{$val}"
|
||||
|
||||
### @error
|
||||
> @error "this is a error: #{$msg}"
|
||||
|
||||
> @error "this is a error: #{$msg}"
|
||||
|
||||
@ -11,6 +11,7 @@ group:
|
||||
# lerna
|
||||
|
||||
## 介绍
|
||||
|
||||
lerna 是一个包管理工具，方便在大型开源项目中不需要手动开启多个仓库
|
||||
|
||||
## 使用方法
|
||||
@ -20,6 +21,7 @@ lerna 是一个包管理工具，方便在大型开源项目中不需要手动
|
||||
> npm i lerna -g
|
||||
|
||||
### 创建子项目
|
||||
|
||||
> lerna create {packageName}
|
||||
|
||||
### 添加依赖
|
||||
@ -37,13 +39,11 @@ lerna add eslint --scope=package1
|
||||
lerna add esint packages/prefix-*
|
||||
```
|
||||
|
||||
|
||||
> -dev：添加到 devDependencies
|
||||
> --exact：只安装特定版本
|
||||
|
||||
|
||||
|
||||
### 执行 npm script 命令
|
||||
|
||||
```javascript
|
||||
// 执行所有子项中的 test
|
||||
lerna run test
|
||||
@ -56,56 +56,54 @@ lerna run --ignore package-* test
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 查看哪些包需要发布
|
||||
|
||||
```javascript
|
||||
lerna updated
|
||||
```
|
||||
> - 决定哪一个包需要被publish
|
||||
|
||||
|
||||
|
||||
|
||||
> - 决定哪一个包需要被 publish
|
||||
|
||||
### 发布依赖包
|
||||
|
||||
```javascript
|
||||
learna publish
|
||||
```
|
||||
|
||||
> 建议使用 independent 模式，独立对每个依赖包做管理
|
||||
> `--npm-client=cnpm 指定源`
|
||||
|
||||
|
||||
|
||||
## 常见命令
|
||||
| 命令 | 说明 |
|
||||
| :---: | :---: |
|
||||
| lerna bootstrap | 安装依赖 |
|
||||
| lerna clean | 删除各个包下的node_modules |
|
||||
| lerna init | 创建新的lerna库 |
|
||||
| lerna list | 显示package列表 |
|
||||
| lerna changed | 显示自上次relase tag以来有修改的包， 选项通 list |
|
||||
| lerna diff | 显示自上次relase tag以来有修改的包的差异， 执行 git diff |
|
||||
| lerna exec | 在每个包目录下执行任意命令 |
|
||||
| lerna run <commond> | 执行每个包package.json中的脚本命令 |
|
||||
| lerna add | 添加一个包的版本为各个包的依赖 |
|
||||
| lerna import | 引入package |
|
||||
| lerna link | 链接互相引用的库 |
|
||||
| lerna create | 新建package |
|
||||
| lerna publish | 发布 |
|
||||
|
||||
| 命令 | 说明 |
|
||||
| :-----------------: | :--------------------------------------------------------: |
|
||||
| lerna bootstrap | 安装依赖 |
|
||||
| lerna clean | 删除各个包下的 node_modules |
|
||||
| lerna init | 创建新的 lerna 库 |
|
||||
| lerna list | 显示 package 列表 |
|
||||
| lerna changed | 显示自上次 relase tag 以来有修改的包， 选项通 list |
|
||||
| lerna diff | 显示自上次 relase tag 以来有修改的包的差异， 执行 git diff |
|
||||
| lerna exec | 在每个包目录下执行任意命令 |
|
||||
| lerna run <commond> | 执行每个包 package.json 中的脚本命令 |
|
||||
| lerna add | 添加一个包的版本为各个包的依赖 |
|
||||
| lerna import | 引入 package |
|
||||
| lerna link | 链接互相引用的库 |
|
||||
| lerna create | 新建 package |
|
||||
| lerna publish | 发布 |
|
||||
|
||||
## 官方文档
|
||||
|
||||
[http://www.febeacon.com/lerna-docs-zh-cn/](http://www.febeacon.com/lerna-docs-zh-cn/)
|
||||
|
||||
|
||||
### Q&A
|
||||
#### 1. 发布包提示lerna ERR! ENOREMOTEBRANCH Branch 'master' doesn't exist in remote 'origin'.
|
||||
|
||||
#### 1. 发布包提示 lerna ERR! ENOREMOTEBRANCH Branch 'master' doesn't exist in remote 'origin'.
|
||||
|
||||
> git remote -v 查看是否是 origin 指向的分支，推送最新分支
|
||||
> lerna publish
|
||||
|
||||
|
||||
|
||||
#### 2. lerna ERR! E402 You must sign up for private packages
|
||||
|
||||
在相应包的 package.json 添加
|
||||
|
||||
```js
|
||||
@ -117,8 +115,20 @@ learna publish
|
||||
}
|
||||
```
|
||||
|
||||
#### 使用father打包报错
|
||||
#### 3. 使用 father 打包报错
|
||||
|
||||
如果是使用的 **yarn** 安装的包，改成 **cnpm** 安装，再试一次
|
||||
|
||||
#### 4. lerna ERR! yarn install --mutex network:42424 --non-interactive exited 1 in 'root'
|
||||
|
||||
不要使用 yarn bootstrap 改为 lerna bootstrap
|
||||
|
||||
#### 5. 疯狂报 ts 类的错误
|
||||
|
||||
```js
|
||||
{
|
||||
"compilerOptions": {
|
||||
"typeRoots": ["./typings"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
124
docs/fea/wx/index.md
Normal file
124
docs/fea/wx/index.md
Normal file
@ -0,0 +1,124 @@
|
||||
---
|
||||
nav:
|
||||
title: 前端
|
||||
path: /fea
|
||||
group:
|
||||
title: 💊 微信
|
||||
order: 7
|
||||
path: /wx
|
||||
---
|
||||
|
||||
# 💊 微信
|
||||
|
||||
## 💊 微信公众号
|
||||
|
||||
> 以下操作需要在微信公众号后台配置相应的白名单
|
||||
|
||||
### 1. 获取微信头像
|
||||
|
||||
```js
|
||||
import { funcUtil } from '@nicecode/tools';
|
||||
import { getUserInfo, jumpToWxUrl } from '@/services/common';
|
||||
|
||||
if (location.href.indexOf('?') > -1) {
|
||||
if (location.href.indexOf('code') > -1) {
|
||||
// 2. 将code传递给后端，获取nickname、avatar等参数
|
||||
getUserInfo({
|
||||
code: funcUtil.getParameter('code', location.href),
|
||||
}).then((res) => {
|
||||
if (res.code === '200') {
|
||||
// 3. 获取昵称成功，跳转回首页
|
||||
localStorage.setItem('wx_nickname', res.data.nickname);
|
||||
location.replace('/');
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 1. 后台拼接链接，前端跳转获取 code
|
||||
jumpToWxUrl({ redirectUrl: window.location.origin }).then((res) => {
|
||||
if (res.code === '200') {
|
||||
location.replace(res.data.code);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 获取微信授权
|
||||
|
||||
```js
|
||||
import { getWxAuthorities } from '@/services/common';
|
||||
import wx from 'weixin-js-sdk';
|
||||
|
||||
//要用到微信API
|
||||
function getJSSDK(
|
||||
shareUrl: string,
|
||||
shareMsg: {
|
||||
title: string,
|
||||
desc: string,
|
||||
link: string,
|
||||
imgUrl: string,
|
||||
},
|
||||
) {
|
||||
// 1. 获取微信签名
|
||||
getWxAuthorities({ url: shareUrl }).then(
|
||||
(res: {
|
||||
data: {
|
||||
appId: string,
|
||||
timestamp: number,
|
||||
echostr: string,
|
||||
signature: string,
|
||||
},
|
||||
}) => {
|
||||
wx.config({
|
||||
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
||||
appId: res.data.appId, // 必填，公众号的唯一标识
|
||||
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
|
||||
nonceStr: res.data.echostr, // 必填，生成签名的随机串
|
||||
signature: res.data.signature, // 必填，签名
|
||||
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
|
||||
});
|
||||
wx.ready(function () {
|
||||
console.log('监听');
|
||||
//分享给微信朋友
|
||||
wx.updateAppMessageShareData({
|
||||
title: shareMsg.title,
|
||||
desc: shareMsg.desc,
|
||||
link: shareMsg.link,
|
||||
imgUrl: shareMsg.imgUrl,
|
||||
success: function success(res) {
|
||||
console.log(res, '分享成功');
|
||||
},
|
||||
cancel: function cancel(res) {
|
||||
console.log('已取消');
|
||||
},
|
||||
fail: function fail(res) {
|
||||
//alert(JSON.stringify(res));
|
||||
},
|
||||
});
|
||||
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
|
||||
wx.updateTimelineShareData({
|
||||
title: shareMsg.title,
|
||||
link: shareMsg.link,
|
||||
imgUrl: shareMsg.imgUrl,
|
||||
success: function success(res) {
|
||||
//alert('已分享');
|
||||
},
|
||||
cancel: function cancel(res) {
|
||||
//alert('已取消');
|
||||
},
|
||||
fail: function fail(res) {
|
||||
//alert(JSON.stringify(res));
|
||||
},
|
||||
});
|
||||
});
|
||||
wx.error(function (res) {
|
||||
alert('微信验证失败');
|
||||
});
|
||||
},
|
||||
);
|
||||
}
|
||||
export default {
|
||||
// 获取JSSDK
|
||||
getJSSDK,
|
||||
};
|
||||
```
|
||||
File diff suppressed because one or more lines are too long
@ -1,93 +1,91 @@
|
||||
---
|
||||
nav:
|
||||
title: 其它
|
||||
path: /other
|
||||
# nav:
|
||||
# title: 其它
|
||||
# path: /other
|
||||
group:
|
||||
title: 💊 买房攻略
|
||||
title: 💊 买房攻略 2020
|
||||
order: 1
|
||||
path: /other/house/2020
|
||||
---
|
||||
|
||||
# 💊 买房攻略2020
|
||||
# 💊 买房攻略 2020
|
||||
|
||||
<Alert type="info"><a href="/other/house/2017">买房攻略 2017 版</a></Alert>
|
||||
|
||||
`以下是 github 上 DongDavid 分享文章`
|
||||
|
||||
>2020年5月份，我在杭州买了个房子。记录一下。
|
||||
> 2020 年 5 月份，我在杭州买了个房子。记录一下。
|
||||
|
||||
本来我是准备把整个买房的过程都详细的记录下来的，但是中间事情比较多，有的事情就没有记录了。
|
||||
|
||||
## 软装即将更新
|
||||
## 软装即将更新
|
||||
|
||||
明明以为精装的房子交房只需要买个家具,然而业主群里面一直在讨论软装的事情,也有一大堆的软装公司打电话来推销。。。
|
||||
感觉怕是免不了软装了。
|
||||
|
||||
|
||||
|
||||
## 整体流程
|
||||
|
||||
整个流程大致是这样的。
|
||||
|
||||
* 摇号
|
||||
* 选房
|
||||
* 付定金
|
||||
* 付首付
|
||||
* 签约-认购书
|
||||
* 办理贷款
|
||||
* 签合同-房屋买卖合同(预售)
|
||||
- 摇号
|
||||
- 选房
|
||||
- 付定金
|
||||
- 付首付
|
||||
- 签约-认购书
|
||||
- 办理贷款
|
||||
- 签合同-房屋买卖合同(预售)
|
||||
|
||||
## 遇到的坑
|
||||
|
||||
* 贷款
|
||||
* 贷款
|
||||
* 贷款
|
||||
- 贷款
|
||||
- 贷款
|
||||
- 贷款
|
||||
|
||||
[^_^]:
|
||||
重要的事情说三次
|
||||
[^_^]: 重要的事情说三次
|
||||
|
||||
## 讲重点
|
||||
## 讲重点
|
||||
|
||||
首先说一下我买的房子吧。
|
||||
我因为家里老是催，所以在2020年5月份跑去摇号了(本来是想着应付一下的，毕竟不想当房奴)。
|
||||
当时随便选了几个200万以下的报名摇号，因为贫穷。。。😊
|
||||
我因为家里老是催，所以在 2020 年 5 月份跑去摇号了(本来是想着应付一下的，毕竟不想当房奴)。
|
||||
当时随便选了几个 200 万以下的报名摇号，因为贫穷。。。😊
|
||||
|
||||
### 摇号其实也挺坑的
|
||||
|
||||
就不说2019年那几次摇号事件了，我5月份本来准备报一个楼盘的，结果填了一波报名资料，提交的时候提交不了。然后加了销售的微信问了一下，这个楼盘居然是不摇号，已经开始卖了，认购的， 先到先得。。。当时我心里是一个卧槽啊(这个楼盘是个毛胚，14000左右的单价，在大江东那边)，当时我想了一下要不干脆买这个吧， 这么便宜。总价在150万以内。只是后来又到处搜了一下，发现那个楼盘好像是有个化学厂啥的= = ，而且地方也略显偏僻，就直接放弃了。。。
|
||||
就不说 2019 年那几次摇号事件了，我 5 月份本来准备报一个楼盘的，结果填了一波报名资料，提交的时候提交不了。然后加了销售的微信问了一下，这个楼盘居然是不摇号，已经开始卖了，认购的， 先到先得。。。当时我心里是一个卧槽啊(这个楼盘是个毛胚，14000 左右的单价，在大江东那边)，当时我想了一下要不干脆买这个吧， 这么便宜。总价在 150 万以内。只是后来又到处搜了一下，发现那个楼盘好像是有个化学厂啥的= = ，而且地方也略显偏僻，就直接放弃了。。。
|
||||
|
||||
**不需要摇号的楼盘都不是好楼盘**，这句话在某种程度上是有道理的。但是真正的好楼盘我等估计是没机会摇到的。那些万人摇的楼盘大多都不需要冻结资金，这就导致了一大波的混子也去凑人头了。
|
||||
|
||||
***
|
||||
---
|
||||
|
||||
那一天，老老实实上班的我突然接到了一个电话，是销售打来的，本来我以为是那种推销的电话，还不准备接的= = 自从我第一次摇号之后，就经常接到卖房、贷款之类的骚扰电话，TM的为什么这种肆无忌惮的打骚扰电话的销售就没人管一下吗？
|
||||
那一天，老老实实上班的我突然接到了一个电话，是销售打来的，本来我以为是那种推销的电话，还不准备接的= = 自从我第一次摇号之后，就经常接到卖房、贷款之类的骚扰电话，TM 的为什么这种肆无忌惮的打骚扰电话的销售就没人管一下吗？
|
||||
|
||||
>摇号其实摇的就是一个选房顺序，所有的购房者根据自己的号码按照顺序选房，我是39号，说明这两栋楼100多个坑，我是第39个选的。
|
||||
比如房源有100套，那么摇号前100顺位的都算摇中了。这个时候如果放弃的话，就算弃选，好像是一年内放弃3次就会被禁止参与摇号多久来着。
|
||||
|
||||
最终我接起了那个电话， 并且人家告诉我我摇到了第39号，瞬间惊了我一下下。
|
||||
我从去年开始第一次摇号，摇了两个月， 都是去凑人头的，然后就没有摇了，今年也是5月份才开始摇号，本来也没报什么希望的， 居然就中了一个这么靠前的位子。
|
||||
> 摇号其实摇的就是一个选房顺序，所有的购房者根据自己的号码按照顺序选房，我是 39 号，说明这两栋楼 100 多个坑，我是第 39 个选的。
|
||||
> 比如房源有 100 套，那么摇号前 100 顺位的都算摇中了。这个时候如果放弃的话，就算弃选，好像是一年内放弃 3 次就会被禁止参与摇号多久来着。
|
||||
|
||||
最终我接起了那个电话， 并且人家告诉我我摇到了第 39 号，瞬间惊了我一下下。
|
||||
我从去年开始第一次摇号，摇了两个月， 都是去凑人头的，然后就没有摇了，今年也是 5 月份才开始摇号，本来也没报什么希望的， 居然就中了一个这么靠前的位子。
|
||||
|
||||
### 选房
|
||||
|
||||
今年因为疫情的影响，选房大多变成了线上选房。
|
||||
通常都有一次模拟选房和实际选房。
|
||||
通常都有一次模拟选房和实际选房。
|
||||
|
||||
到时候销售会发给你教程的，其实挺简单的， 只是那个线上选房的直播延迟不是一般的大，慢了30多秒，可真是辣鸡。
|
||||
到时候销售会发给你教程的，其实挺简单的， 只是那个线上选房的直播延迟不是一般的大，慢了 30 多秒，可真是辣鸡。
|
||||
|
||||
线上选房是在指定时间，通过支付宝里面的公证云选房小程序进行选房。选房的时候摇看着倒计时和选房顺序号来选房，那个直播不用理他。
|
||||
|
||||
选房的时候根据楼盘的不同要付定金，通过1-3万吧。**这个定金是不会退的**。
|
||||
所以你要确定你想要的房子还有再去选， 要不然选了一个自己不要的，就比较尴尬了。到时候放弃了要亏1、2万。
|
||||
选房的时候根据楼盘的不同要付定金，通过 1-3 万吧。**这个定金是不会退的**。
|
||||
所以你要确定你想要的房子还有再去选， 要不然选了一个自己不要的，就比较尴尬了。到时候放弃了要亏 1、2 万。
|
||||
|
||||
我顺序比较靠前， 就选了一个12楼的边套(西边套的，总共20楼)，虽然有西晒，但是比中间套的好呀，毕竟东边套都是115m的户型，200多万的买不起。。。
|
||||
我顺序比较靠前， 就选了一个 12 楼的边套(西边套的，总共 20 楼)，虽然有西晒，但是比中间套的好呀，毕竟东边套都是 115m 的户型，200 多万的买不起。。。
|
||||
|
||||
选房子也是艰难，家里略迷信，所有我只好避开来13、14、18几个楼层。顶楼又不要，低于8楼的也不要(南边有一栋8层高的小高层，怕挡光)，所以就要在9、10、11、12、15、16、17之间选了，我个人不喜欢高楼，万一出事了跳楼都莫的跳，奈何买不起排墅。
|
||||
|
||||
于是选了12楼。
|
||||
选房子也是艰难，家里略迷信，所有我只好避开来 13、14、18 几个楼层。顶楼又不要，低于 8 楼的也不要(南边有一栋 8 层高的小高层，怕挡光)，所以就要在 9、10、11、12、15、16、17 之间选了，我个人不喜欢高楼，万一出事了跳楼都莫的跳，奈何买不起排墅。
|
||||
|
||||
于是选了 12 楼。
|
||||
|
||||
### 付首付
|
||||
|
||||
在选房完成之后，楼盘的要求是3天内付20万，7天内付清首付，并且提交贷款申请资料。
|
||||
在选房完成之后，楼盘的要求是 3 天内付 20 万，7 天内付清首付，并且提交贷款申请资料。
|
||||
|
||||
这里就没啥好说的了， 老老实实交钱，然后拿了发票，再签个认购书。
|
||||
|
||||
@ -97,45 +95,44 @@ group:
|
||||
|
||||
其中组合贷款是指贷款金额中一部分为商业贷款，一部分为公积金贷款。
|
||||
|
||||
公积金的贷款利率比较低，固定为3.25%
|
||||
而商业贷款的利率则比较高，是根据LPR来定的，基于LPR固定上浮多少。
|
||||
公积金的贷款利率比较低，固定为 3.25%
|
||||
而商业贷款的利率则比较高，是根据 LPR 来定的，基于 LPR 固定上浮多少。
|
||||
|
||||
我办贷款的时候， 几家银行的利率大多在5.05-5.15之间。当时的LPR是4.65，所以上浮基点在40-50之间。都差不多。找一家利率最低的，而去能够办的出贷款的银行办理就行。
|
||||
我办贷款的时候， 几家银行的利率大多在 5.05-5.15 之间。当时的 LPR 是 4.65，所以上浮基点在 40-50 之间。都差不多。找一家利率最低的，而去能够办的出贷款的银行办理就行。
|
||||
|
||||
因为办理贷款的时候， 是要求你的月收入大于月供的一倍才可以。有的银行只需要你刚好一倍就行，而有的银行则需要你要比月供的一倍更高一些。而且有的银行还会去查你的资金流水。
|
||||
因为办理贷款的时候， 是要求你的月收入大于月供的一倍才可以。有的银行只需要你刚好一倍就行，而有的银行则需要你要比月供的一倍更高一些。而且有的银行还会去查你的资金流水。
|
||||
|
||||
我因为个人原因，只能是在几家不需要查流水的银行办理贷款，因为我的公司不能虚开收入证明(大部分私营企业是可以帮忙给你的收入证明开的高一些的)。
|
||||
我因为个人原因，只能是在几家不需要查流水的银行办理贷款，因为我的公司不能虚开收入证明(大部分私营企业是可以帮忙给你的收入证明开的高一些的)。
|
||||
|
||||
#### 知识点
|
||||
|
||||
* 公积金贷款必须还清了之后才能继续使用公积金办理贷款
|
||||
* 杭州的公积金贷款单人上限是50万，夫妻是100万。
|
||||
* 公积金一个人一辈子只能用来办理两次房贷
|
||||
* 如果你单身的时候，用了两次公积金贷款，那么你结婚之后， 就无法办理家庭公积金贷款了，只能是你老婆单独办理公积金贷款，贷50万。
|
||||
* 如果你和你老婆都在结婚前已经办理了两次公积金贷款，那么婚后你们就无法在办理公积金贷款了， 只能是办理纯商业用公积金去还贷款。
|
||||
* 如果你和你老婆在婚前都没有办理过公积金贷款，那么你和你老婆可以一起办理两次家庭公积金贷款， 上限100万的那种。
|
||||
* 商业贷款利率是LPR+上浮基点
|
||||
* 商业房贷的利率是每年都在变得，因为LPR每个月都会变一次。我办理贷款的时候， 银行上浮的基点是40个基点的话， 那么我的利率就是LPR+40.
|
||||
比如今年的LPR是4.65，那么我今天的房贷利率是5.05。明年的LPR是4.20的话，那么我明年的房贷利率就变成了4.60。
|
||||
* LPR会在每个月的20号进行更新，每年的房贷利率一般是根据每年1月1号的LPR来定的(也就是去年12月20日更新的LPR)。
|
||||
* 大部分银行都要求组合贷款只能是一个人办理，不支持父母共还。
|
||||
* 意思是如果你要办理组合贷款的话，那么这个贷款必须要由你自己单独办理(或者夫妻也行)，要求你自己的月收入大于月供的一倍才行。
|
||||
* 当然也有少部分银行允许办理组合贷款的时候父母共还。也就是说当你的月收入没有达到月供的一倍的时候，你就需要请你的父母来一起办理贷款，你和你的父母的月收入加起来超过来月供的一倍就可以了，比如浙商银行、交通银行是支持这样的。
|
||||
* 贷款并不是办理成功后就要开始还房贷，而是银行放款给开发商后， 你才需要开始还房贷。
|
||||
* 公积金贷款放款需要等房子结顶后才放款(结顶是指房子主体部分已经完成，形象的说就是顶楼也盖好了)
|
||||
- 公积金贷款必须还清了之后才能继续使用公积金办理贷款
|
||||
- 杭州的公积金贷款单人上限是 50 万，夫妻是 100 万。
|
||||
- 公积金一个人一辈子只能用来办理两次房贷
|
||||
- 如果你单身的时候，用了两次公积金贷款，那么你结婚之后， 就无法办理家庭公积金贷款了，只能是你老婆单独办理公积金贷款，贷 50 万。
|
||||
- 如果你和你老婆都在结婚前已经办理了两次公积金贷款，那么婚后你们就无法在办理公积金贷款了， 只能是办理纯商业用公积金去还贷款。
|
||||
- 如果你和你老婆在婚前都没有办理过公积金贷款，那么你和你老婆可以一起办理两次家庭公积金贷款， 上限 100 万的那种。
|
||||
- 商业贷款利率是 LPR+上浮基点
|
||||
- 商业房贷的利率是每年都在变得，因为 LPR 每个月都会变一次。我办理贷款的时候， 银行上浮的基点是 40 个基点的话， 那么我的利率就是 LPR+40.
|
||||
比如今年的 LPR 是 4.65，那么我今天的房贷利率是 5.05。明年的 LPR 是 4.20 的话，那么我明年的房贷利率就变成了 4.60。
|
||||
- LPR 会在每个月的 20 号进行更新，每年的房贷利率一般是根据每年 1 月 1 号的 LPR 来定的(也就是去年 12 月 20 日更新的 LPR)。
|
||||
- 大部分银行都要求组合贷款只能是一个人办理，不支持父母共还。
|
||||
- 意思是如果你要办理组合贷款的话，那么这个贷款必须要由你自己单独办理(或者夫妻也行)，要求你自己的月收入大于月供的一倍才行。
|
||||
- 当然也有少部分银行允许办理组合贷款的时候父母共还。也就是说当你的月收入没有达到月供的一倍的时候，你就需要请你的父母来一起办理贷款，你和你的父母的月收入加起来超过来月供的一倍就可以了，比如浙商银行、交通银行是支持这样的。
|
||||
- 贷款并不是办理成功后就要开始还房贷，而是银行放款给开发商后， 你才需要开始还房贷。
|
||||
- 公积金贷款放款需要等房子结顶后才放款(结顶是指房子主体部分已经完成，形象的说就是顶楼也盖好了)
|
||||
|
||||
|
||||
所以说婚前买房比婚后买房要贵好多， 要多还很多贷款，差了50万公积金，利息多了好多。
|
||||
因为婚前买房， 你只能是办理单人公积金贷款，贷50万， 剩下的都要办商业贷款。
|
||||
而婚后买房，你可以和你老婆一起办理家庭公积金贷款，贷100万。
|
||||
所以说婚前买房比婚后买房要贵好多， 要多还很多贷款，差了 50 万公积金，利息多了好多。
|
||||
因为婚前买房， 你只能是办理单人公积金贷款，贷 50 万， 剩下的都要办商业贷款。
|
||||
而婚后买房，你可以和你老婆一起办理家庭公积金贷款，贷 100 万。
|
||||
|
||||
我们来举个例子:
|
||||
房子总价是180万。
|
||||
首付是180*30% = 54万。
|
||||
贷款金额是126万。
|
||||
贷款年限30年。
|
||||
房子总价是 180 万。
|
||||
首付是 180\*30% = 54 万。
|
||||
贷款金额是 126 万。
|
||||
贷款年限 30 年。
|
||||
|
||||
单人办理贷款:
|
||||
单人办理贷款:
|
||||
50万公积金+76万商业贷款。
|
||||
还款总额: 2260487.32
|
||||
月供:6279.13
|
||||
@ -146,17 +143,17 @@ group:
|
||||
月供:5755.76
|
||||
支付的利息:812071.89
|
||||
|
||||
差了**20万**的利息
|
||||
差了**20 万**的利息
|
||||
|
||||
当时我自己算了一下， 差点就准备放弃了， 等结婚后再买吧。。。
|
||||
当时我自己算了一下， 差点就准备放弃了， 等结婚后再买吧。。。
|
||||
|
||||
只是后来朋友和我说， 并不是每个人的公积金都能贷满50万的额度的，有的人甚至没有公积金。你总不能在谈女朋友的时候先问一句你有公积金吗？😂
|
||||
只是后来朋友和我说， 并不是每个人的公积金都能贷满 50 万的额度的，有的人甚至没有公积金。你总不能在谈女朋友的时候先问一句你有公积金吗？😂
|
||||
|
||||
我觉得好有道理啊， 然后还是买吧。
|
||||
|
||||
申请完贷款之后，就等网签了。
|
||||
|
||||
办理贷款的时候我觉得我就是个工具人,只会签字画押的工具人(我的签名从楷书写到草书，因为我办理的是组合贷款， 所以很多文件我都要签4份)
|
||||
办理贷款的时候我觉得我就是个工具人,只会签字画押的工具人(我的签名从楷书写到草书，因为我办理的是组合贷款， 所以很多文件我都要签 4 份)
|
||||
|
||||
### 网签
|
||||
|
||||
@ -166,86 +163,81 @@ group:
|
||||
|
||||
我除了签预售合同之外，还签了一个房屋装修协议、一个《前期物业服务协议》《临时管理规约》
|
||||
|
||||
房屋装修协议是房屋装修的一个补充协议，这里就不说了。
|
||||
房屋装修协议是房屋装修的一个补充协议，这里就不说了。
|
||||
《前期物业服务协议》是指在交房后到业主委员会成立并且选择新的物业之前，由开发商指定的物业暂时管理小区，是业主对物业的要求。
|
||||
《临时管理规约》是物业对业主的要求。
|
||||
|
||||
## 贷款
|
||||
## 贷款
|
||||
|
||||
这是我的第一个还款日,正式还了第一笔房贷。
|
||||
这是我的第一个还款日,正式还了第一笔房贷。
|
||||
|
||||
6月初办理的贷款
|
||||
6 月初办理的贷款
|
||||
|
||||
6月中旬 商业贷款审批完成 - 商业贷款审批完成后，银行才会把你的材料送去公积金中心审批
|
||||
6 月中旬 商业贷款审批完成 - 商业贷款审批完成后，银行才会把你的材料送去公积金中心审批
|
||||
|
||||
6月中旬 公积金贷款审批完成 - 我的公积金贷款审批完成时间和商业贷款审批完成时间差了两天
|
||||
6 月中旬 公积金贷款审批完成 - 我的公积金贷款审批完成时间和商业贷款审批完成时间差了两天
|
||||
|
||||
7月初 商业贷款发放
|
||||
7 月初 商业贷款发放
|
||||
|
||||
8月初 公积金贷款发放
|
||||
8 月初 公积金贷款发放
|
||||
|
||||
8/20 开始扣第一笔贷款，但是这个第一笔还款金额是只有商业贷款的(因为公积金放款比较晚，所以8/20不需要还)
|
||||
8/20 开始扣第一笔贷款，但是这个第一笔还款金额是只有商业贷款的(因为公积金放款比较晚，所以 8/20 不需要还)
|
||||
|
||||
8/20 银行的客户经理把我的贷款合同寄给了我。
|
||||
8/20 银行的客户经理把我的贷款合同寄给了我。
|
||||
|
||||
## 公积金提取
|
||||
## 公积金提取
|
||||
|
||||
公积金逾期不计入征信的, 及时补上就行.
|
||||
公积金逾期不计入征信的, 及时补上就行.
|
||||
|
||||
### 公积金首付提取
|
||||
### 公积金首付提取
|
||||
|
||||
在办理住房贷款后,会有一次提取公积金余额的机会.
|
||||
在办理住房贷款后,会有一次提取公积金余额的机会.
|
||||
|
||||
全程支付宝操作,大约1-2分钟就好了,期间需要用到购房合同编号.
|
||||
全程支付宝操作,大约 1-2 分钟就好了,期间需要用到购房合同编号.
|
||||
|
||||
申请提取后公积金基本上是秒到账,直接打到银行卡里面了.
|
||||
申请提取后公积金基本上是秒到账,直接打到银行卡里面了.
|
||||
|
||||
[公积金提取教程](https://mp.weixin.qq.com/s/0BGXJRYuEhY5Ez0LByBKQg
|
||||
)
|
||||
[公积金提取教程](https://mp.weixin.qq.com/s/0BGXJRYuEhY5Ez0LByBKQg)
|
||||
|
||||
### 公积金自动还款
|
||||
### 公积金自动还款
|
||||
|
||||
在提取了一次公积金之后, 就无法再通过贷款首付提取的方式提取公积金了, 接下来需要办理公积金自动还款来每个月自动提取公积金到银行卡.
|
||||
在提取了一次公积金之后, 就无法再通过贷款首付提取的方式提取公积金了, 接下来需要办理公积金自动还款来每个月自动提取公积金到银行卡.
|
||||
|
||||
[公积金自动还款教程](https://mp.weixin.qq.com/s/klrmtu9WbAlHUsYuVn_M6Q)
|
||||
|
||||
## 车位
|
||||
|
||||
## 车位
|
||||
8/20 收到了房产销售的通知
|
||||
|
||||
8/20 收到了房产销售的通知
|
||||
小区车位要开盘了
|
||||
|
||||
小区车位要开盘了
|
||||
|
||||
小区车库有地下一层和地下二层
|
||||
小区车库有地下一层和地下二层
|
||||
|
||||
二层的车位比一层的便宜
|
||||
|
||||
二层的车位是 17.5-18万左右，优惠后15.5-16万左右
|
||||
二层的车位是 17.5-18 万左右，优惠后 15.5-16 万左右
|
||||
|
||||
一层的车位是 19.5-20.5万左右，优惠后17.5-18.5左右
|
||||
一层的车位是 19.5-20.5 万左右，优惠后 17.5-18.5 左右
|
||||
|
||||
车位也是线上买(支付宝里面 筑家易 生活号)，车位可以贷款买。
|
||||
车位也是线上买(支付宝里面 筑家易 生活号)，车位可以贷款买。
|
||||
|
||||
在线认购时需要交2000元定金，确认后，再去线下签约。
|
||||
在线认购时需要交 2000 元定金，确认后，再去线下签约。
|
||||
|
||||
emmm... 车位比车贵系列，反正我不买，早点还掉贷款省点利息不香嘛。。。
|
||||
|
||||
## 总结
|
||||
|
||||
- 买房过程中的各种合同协议，其实我是基本看不懂的， 人家给我什么我就签什么了。
|
||||
毕竟都是制式合同，也不晓得能不能签补充协议之类的。总不能因为这个就不买是吧 😂
|
||||
|
||||
- 签字是个体力活，建议锻炼好你的小胳膊
|
||||
|
||||
## 总结
|
||||
- 买房之前考察一下周边环境，交通、学校、商业中心之类的， 最重要的是不要有垃圾场、化工厂之类的。至于室内布局， 大家都那样，89m 的室内布局半斤八两，没啥区别。精装修的吧装修清单也就是随便看看，毕竟不会为你改变， 不满意只能是在交房之后，再去自己拆了重来。
|
||||
|
||||
* 买房过程中的各种合同协议，其实我是基本看不懂的， 人家给我什么我就签什么了。
|
||||
毕竟都是制式合同，也不晓得能不能签补充协议之类的。总不能因为这个就不买是吧😂
|
||||
- 先问清楚楼盘合作的银行有哪些、支持哪些贷款方式，比如是否需要查流水、组合贷是否支持共还之类的。计算好自己的收入证明是否能够办的下贷款。
|
||||
|
||||
* 签字是个体力活，建议锻炼好你的小胳膊
|
||||
- 我的房子是 2021 年 12 月 31 日交房，然后再装修半年，2022 年 6 月才能住进去。开发商也给了一张 6 个月的物业管理费抵扣券。
|
||||
|
||||
* 买房之前考察一下周边环境，交通、学校、商业中心之类的， 最重要的是不要有垃圾场、化工厂之类的。至于室内布局， 大家都那样，89m的室内布局半斤八两，没啥区别。精装修的吧装修清单也就是随便看看，毕竟不会为你改变， 不满意只能是在交房之后，再去自己拆了重来。
|
||||
- 贷款的利率，银行的业务经理应该是有权限稍微调整上浮基点的。因为那么多家银行，有的是 5.05，有的是 5.15，明显是 5.05 的好办。当时我问了两家银行，一家是 5.10 的， 另一家 5.05 的。然后 5.10 那家银行的业务经理跟我说也可以给我降到 5.05.
|
||||
|
||||
* 先问清楚楼盘合作的银行有哪些、支持哪些贷款方式，比如是否需要查流水、组合贷是否支持共还之类的。计算好自己的收入证明是否能够办的下贷款。
|
||||
|
||||
* 我的房子是2021年12月31日交房，然后再装修半年，2022年6月才能住进去。开发商也给了一张6个月的物业管理费抵扣券。
|
||||
|
||||
* 贷款的利率，银行的业务经理应该是有权限稍微调整上浮基点的。因为那么多家银行，有的是5.05，有的是5.15，明显是5.05的好办。当时我问了两家银行，一家是5.10的， 另一家5.05的。然后5.10那家银行的业务经理跟我说也可以给我降到5.05.
|
||||
|
||||
* 因为是线上选房，导致我到现在都没有找到哪里能加个业主群，早知道当时线下签约的时候，多加几个业主的微信了。
|
||||
- 因为是线上选房，导致我到现在都没有找到哪里能加个业主群，早知道当时线下签约的时候，多加几个业主的微信了。
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged",
|
||||
"commit-msg": "commitlint -e HUSKY_GIT_PARAMS"
|
||||
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
@ -39,7 +39,7 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/j710328466/j710328466.github.io.git",
|
||||
"url": "https://github.com/j710328466/j710328466.github.io",
|
||||
"branch": "master",
|
||||
"platform": "github"
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user