面试部分内容总结

微信小程序

微信小程序的授权流程

1、需要openID的：wx.login登录，获取code，传给后台，返回openID（不会弹起授权弹窗，静默式授权）

2、只需要昵称，头像等信息进行页面展示的：open-data带不同的type属性比如userNickName,userAvatarUrl等

3、会弹起授权弹窗的，使用button标签，带不同的open-type,比如getUserInfo,从bindgetUserInfo回调中获取到用户信息完成授权。

4、检测登录状态，我们需要先检测登录状态

	wx.checkSession({
      success () {
        //session_key 未过期，并且在本生命周期一直有效
      },
      fail () {
        // session_key 已经失效，需要重新执行登录流程
        wx.login() //重新登录
      }
    })

5、检测是否授权，微信小程序可以通过wx.getSetting来获取授权过的所有信息

    wx.getSetting({
      success (res) {
        // res.authSetting = {
        //   "scope.userInfo": true,
        //   "scope.userLocation": true
        //    ...
        // }
        if(!res.authSetting['scope.userInfo']){
            // 如果没有授权做引导处理
        }
      }
    })

小程序的生命周期

小程序应用的生命周期
onLaunch（小程序启动时执行）监听小程序初始化、
onShow（监听小程序显示）、
onHide（监听小程序显示）、
onError（监听错误）
onPageNotFound（监听页面不存在）
小程序点击左上角的关闭以及手机home键的时候，触发的是onHide()方法，此时小程序并没有真
正的销毁，如果用户再次进入小程序，称为“热启动”，此时小程序触发的生命周期为onShow()
但如果长时间未打开，或者占用资源过高，微信会将小程序销毁，用户第一次进入小程序以及进入
销毁后的小程序，称为“冷启动”，会触发的生命周期为onLaunch->onShow
page页面的生命周期
onLoad（页面创建时执行）监听页面加载
	一个页面只会调用一次，可以获取query参数等
onReady（页面首次渲染完毕时执行）、
	一个页面只会调用一次，可以和视图层进行交互，对界面的wx.setNavigateBarTitle的设
    置可以再onReady之后。
onShow（监听页面的显示）
	每次打开页面都会调用一次
onHide（监听页面的隐藏）
	navigateTo或底部tab切换时调用
onUnload（页面销毁时执行）
	当redirectTo或者navigateBack的时候会触发
当初次进入小程序的时候会触发onLoad
离开的时候会先触发页面的onHide,然后触发小程序应用的onHide
进入页面的时候会先触发小程序应用的onShow,然后触发页面的onShow。

微信小程序的支付流程

首先用户会登录然后获取到code，通过code向后端请求拿到openID以及支付所需要的参数，例如
时间戳签名等，然后再发起wx.requestPayment支付API，这大致是前端需要做的流程

微信公众号分享的签名如何获取

主要为后端的操作，首先微信公众号要绑定分享的域名，然后加上IP白名单，有一个MP_verify_EM2V8QaIKnqw5Ts2.txt 将该文件放在机器下,然后可以编写微信分享的接口

Vue的相关

vue的params传参和query有什么区别

params传参只能用name来引入路由，不可以用path，

this.$router.push({
	name:'child',  //此处需为name引入，不可以是path
    params:{
    	id:'1',
        name:'wanghaha'
    }
})

然后在路由配置页面处应该这样写

{
	path:'index/:id/:name',
    name:'child',
    component:()=>import(@/view/child)
}

接收参数时为

this.id = this.$route.params.id
this.name = this.$route.params.name

query传参用path引入路由，如果配置路由页面的name和path名字相同，也可以使用name

this.$router.push{
	path:'child',
    query:{
    	id:'1',
        name:'wanghaha'
    }
}

接收参数时为

this.id = this.$route.query.id
this.name = this.$route.query.name

params传参属于路由的一部分，必须在路由后面添加参数，query是拼接URL参数。如果使用
params，没有传这个参数，会导致跳转错误或者空白。

$router是路由操作对象，只写

$route是路由信息对象，只读

vue的push和replace的区别

this.$router.push(),会向history页面栈中添加一条记录，可以返回上一个页面this.$router.replace(),不会向history存入任何信息，返回的时候会返回上上个页面，不会存在上一个页面的记录; this.$router.go(n),相对于当前页面向前或者向后跳转n个页面，相当于
window.history.go(n),可为正数可为负数，正数返回上一个页面

vue的v-if和v-show有什么区别

v-show属于标签最开始就存在的一个标签，相当于display:none和block来显示隐藏的，v-if是根据不同的条件dom节点的存在与否来展示的

v-if和v-for能在同一个标签中使用吗？

最好不要在一个标签中使用，因为v-for的优先级比v-if高，例如要判断一个代码展示与否的时候，还是会先遍历整个数组，然后在判断是否展示，耗性能，可以使用computed方法，或者将v-if换成v-show

keep-alive

keep-alive是一个抽象的组件，它不会自己渲染dom，也不会出现在父组件链中，使用keep-alive包裹动态组件时，会缓存不活动的组件，并不会销毁它们。keep-alive可以保存页面或组件的状态，还可以避免组件的反复创建和渲染

---

es6相关的

es6的箭头函数能作为构造函数吗？

es6的箭头函数不能作为构造函数，es6中的this指向他的父作用域，普通函数的this指向调用它的地方。

react相关的

react中key的作用

key是当前列表的元素唯一的，不是全局唯一，可以识别哪些元素改变了，增加或者删除等，最好不要使用列表的索引作为key值，因为如果列表顺序发生改变，索引会错乱，尽量使用列表数据的ID值等。

redux遵循的原则

1、单一的数据源，整个应用的state被存在同一个object tree里面，并且这个object tree只存在于唯一一个store里面
2、状态State是只读的，唯一改变state的方法是action，action是一个用于描述一个已发生改变事件的普遍对象
3、使用纯函数来接受修改

redux工作原理（个人理解）

用户会通过store.dispatch()来先触发action，然后store会自动调用reducer，传入当前的state和action，reducer会返回新的state，state发生了变化，store会设置监听，store.subscribe(listener)，listener会通过store.getState()得到当前状态

ant-design的时间组件怎么设置默认时间

时间组件会有一个defaultvalue属性，可以命令行安装moment插件，然后引入，使用moment设置默认值

import moment from 'moment';
<Timepicker defaultValue={moment('13:20:50','HH:mm:sss')} />
//日期选择组件同理

CSS相关的

用css画一个箭头
可以使用伪类选择器，然后设置上边框和下边框，然后设置旋转角度，就可以写出一个不带背景色的箭头

<div class='arrawpoint'></div>
.arrawpoint:after{
	content:'';
    width:10px;
    height:10px;
    border-top:1px solid #f4f4f4;
    border-bootm:1px solid #f4f4f4;
    transform:rotate(45deg);
}
//三角形
<div class='delta'></div>
.delta{
	width:10px;
    height:10px;
    position:relative;
}
.delta:after{
	content:'';
    position:absoulte;
    border-left:4px solid #f4f4f4;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent; // transparent为透明
}

实现左边固定，右边自适应

//左边的元素设置向左浮动
<div class="left"></div>
<div class="right"></div>
html,body{
	width:100%;
    height:100%;
}
.left{
	width:100px;
    height:100%;
    background:red;
    float:left;
}
.right{
	background:pink;
    height:100%;
}
//用定位，是左边的元素定位
.left{
	width:100px;
    position:absolute;
    background:red;
    height:100%;
}
.right{
	background:pink;
    margin-left:100px;
    height:100%;
}
//使用flex布局
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>
.parent{
	display:flex;
}
.left{
	width:100px;
    background:red;
}
.right{
	flex:1;
    background:pink;
}

双飞翼布局和圣杯布局（两侧宽度固定，中间自适应）

圣杯布局

//首先是dom结构
<div class='header'></div>
<div class='container'>
	<div class='center'></div>
    <div class='left'></div>
    <div class='right'></div>
</div>
<div class='footer'></div>
<style>
    body{
		min-width:500px;
    }
	.container{
    	padding-left:200px;
        padding-right:100px;
    }
    .container>div{
    	float:left;
    }
    .center{
    	width:100%;
    }
    .left{
    	width:200px;
        margin-left:-100%;
        position:relative;
        right:200px;
    }
    .right{
    	width:100px;
        margin-right:-100px;
    }
    //设置左中右三个元素为float：left，然后左边的设置margin-left为-100%，设置定位
    relative属性，right属性，中间的设置width：100%，右边的设置margin-right为负的
    它本身的宽度。
</style>

双飞翼布局

<div id="container" class="column">
        <div id="center">中间</div>
    </div>
    <div id="left" class="column">左边</div>
    <div id="right" class="column">右边</div>
<div class="footer"></div>
<style>
	#container{
    	width:100%;
    }
    .column{
    	float:left;
    }
    #center{
    	margin-left:200px;
        margin-right:100px;
    }
    #left{
    	width:200px;
        margin-left:-100%;
    }
    #right{
    	width:100px;
        margin-left:-100px;
    }
</style>