微信小程序
微信小程序的授权流程
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>