vue项目前端知识点整理【收藏】

2023-08-23 14:23:07 76

微信授权后还能通过浏览器返回键回到授权页

在导航守卫中可以在next({})中设置replace:true来重定向到改路由，跟router.replace()相同

router.beforeEach((to,from,next)=>{
if(getToken()){
...
}else{
//储存进来的地址，供授权后跳回
setUrl(to.fullPath)
next({path:'/author',replace:true})
}
})

路由切换时页面不会自动回到顶部

constrouter=newVueRouter({
routes:[...],
scrollBehavior(to,from,savedPosition){
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve({x:0,y:0})
},0)
})
}
})

ios系统在微信浏览器input失去焦点后页面不会自动回弹

初始的解决方案是input上绑定onblur事件，缺点是要绑定多次，且有的input存在于第三方组件中，无法绑定事件。

后来的解决方案是全局绑定focusin事件，因为focusin事件可以冒泡，被最外层的body捕获。

util.wxNoScroll=function(){
letmyFunction
letisWXAndIos=isWeiXinAndIos()
if(isWXAndIos){
document.body.addEventListener('focusin',()=>{
clearTimeout(myFunction)
})
document.body.addEventListener('focusout',()=>{
clearTimeout(myFunction)
myFunction=setTimeout(function(){
window.scrollTo({top:0,left:0,behavior:'smooth'})
},200)
})
}

functionisWeiXinAndIos(){
letua=''+window.navigator.userAgent.toLowerCase()
letisWeixin=/MicroMessenger/i.test(ua)
letisIos=/\(i[^;]+;(U;)?CPU.+MacOSX/i.test(ua)
returnisWeixin&&isIos
}
}

在子组件中修改父组件传递的值时会报错

vue中的props是单向绑定的，但如果props的类型为数组或者对象时，在子组件内部改变props的值控制台不会警告。因为数组或对象是地址引用，但官方不建议在子组件内改变父组件的值，这违反了vue中props单向绑定的思想。所以需要在改变props值的时候使用$emit，更简单的方法是使用.sync修饰符。

//在子组件中
this.$emit('update:title',newTitle)
//在父组件中
使用微信JS-SDK上传图片接口的处理

首先调用wx.chooseImage()，引导用户拍照或从手机相册中选图。成功会拿到图片的localId，再调用wx.uploadImage()将本地图片暂存到微信服务器上并返回图片的服务器端ID，再请求后端的上传接口最后拿到图片的服务器地址。

chooseImage(photoMustTake){
returnnewPromise(resolve=>{
varsourceType=(photoMustTake&&photoMustTake==1)?['camera']:['album','camera']
wx.chooseImage({
count:1,//默认9
sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:sourceType,//可以指定来源是相册还是相机，默认二者都有
success:function(res){
//返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
wx.uploadImage({
localId:res.localIds[0],
isShowProgressTips:1,
success:function(upRes){
constformdata={mediaId:upRes.serverId}
uploadImageByWx(qs.stringify(formdata)).then(osRes=>{
resolve(osRes.data)
})
},
fail:function(res){
//alert(JSON.stringify(res));
}
});
}
});
})
}

聊天室断线重连的处理

由于后端设置了自动断线时间，所以需要socket断线自动重连。

在data如下几个属性，beginTime表示当前的真实时间，用于和服务器时间同步，openTime表示socket创建时间，主要用于分页，以及重连时的判断，reconnection表示是否断线重连。

data(){
return{
reconnection:false,
beginTime:null,
openTime:null
}
}

初始化socket连接时，将openTime赋值为当前本地时间，socket连接成功后，将beginTime赋值为服务器返回的当前时间，再设置一个定时器，保持时间与服务器一致。

发送消息时，当有多个用户，每个用户的系统本地时间不同，会导致消息的顺序错乱。所以需要发送beginTime参数用于记录用户发送的时间，而每个用户的beginTime都是与服务器时间同步的，可以解决这个问题。

聊天室需要分页，而不同的时刻分页的数据不同，例如当前时刻有10条消息，而下个时刻又新增了2条数据，所以请求分页数据时，传递openTime参数，代表以创建socket的时间作为查询基准。

//创建socket
createSocket(){
_that.openTime=newDate().getTime()//记录socket创建时间
_that.socket=newWebSocket(...)
}

//socket连接成功返回状态
COMMAND_LOGIN_RESP(data){
if(10007==data.code){//登陆成功
this.page.beginTime=data.user.updateTime//登录时间
this.timeClock()
}
}
//更新登录时间的时钟
timeClock(){
this.timer=setInterval(()=>{
this.page.beginTime=this.page.beginTime+1000
},1000)
}

当socket断开时，判断beginTime与当前时间是否超过60秒，如果没超过说明为非正常断开连接不做处理。

_that.socket.onerror=evt=>{
if(!_that.page.beginTime){
_that.$vux.toast.text('网络忙，请稍后重试')
returnfalse
}
//不重连
if(this.noConnection==true){
returnfalse
}
//socket断线重连
vardate=newDate().getTime()
//判断断线时间是否超过60秒
if(date-_that.openTime>60000){
_that.reconnection=true
_that.createSocket()
}
}

发送音频时第一次授权问题

发送音频时，第一次点击会弹框提示授权，不管点击允许还是拒绝都会执行wx.startRecord(),这样再次调用录音就会出现问题（因为上一个录音没有结束），由于录音方法是由touchstart事件触发的，可以使用touchcancel事件捕获弹出提示授权的状态。

_that.$refs.btnVoice.addEventListener("touchcancel",function(event){
event.preventDefault()
//手动触发touchend
_that.voice.isUpload=false
_that.voice.voiceText='按住说话'
_that.voice.touchStart=false
_that.stopRecord()
})

组件销毁时，没有清空定时器

在组件实例被销毁后，setInterval()还会继续执行，需要手动清除，否则会占用内存。

mounted(){
this.timer=(()=>{
...
},1000)
},
//最后在beforeDestroy()生命周期内清除定时器

beforeDestroy(){
clearInterval(this.timer)
this.timer=null
}

watch监听对象的变化

watch:{
chatList:{
deep:true,//监听对象的变化
handler:function(newVal,oldVal){
...
}
}
}

后台管理系统模板问题

由于后台管理系统增加了菜单权限，路由是根据菜单权限动态生成的，当只有一个菜单的权限时，会导致这个菜单可能不显示，参看模板的源码：




{{generateTitle(item.children[0].meta.title)}}






{{generateTitle(item.meta.title)}}



0":item="child":key="child.path":base-path="resolvePath(child.path)">




{{generateTitle(child.meta.title)}}

其中v-if="hasOneShowingChildren(item.children)&&!item.children[0].children&&!item.alwaysShow"表示当这个节点只有一个子元素，且这个节点的第一个子元素没有子元素时，显示一个特殊的菜单样式。而问题是item.children[0]可能是一个隐藏的菜单（item.hidden===true）,所以当这个表达式成立时，可能会渲染一个隐藏的菜单。参看最新的后台源码，作者已经修复了这个问题。







methods:{
hasOneShowingChild(children=[],parent){
constshowingChildren=children.filter(item=>{
if(item.hidden){
returnfalse
}else{
//Tempset(willbeusedifonlyhasoneshowingchild)
this.onlyOneChild=item
returntrue
}
})
//Whenthereisonlyonechildrouter,thechildrouterisdisplayedbydefault
if(showingChildren.length===1){
returntrue
}
//Showparentiftherearenochildroutertodisplay
if(showingChildren.length===0){
this.onlyOneChild={...parent,path:'',noShowingChildren:true}
returntrue
}
returnfalse
}
}

动态组件的创建

有时候我们有很多类似的组件，只有一点点地方不一样，我们可以把这样的类似组件写到配置文件中，动态创建和引用组件

varvm=newVue({
el:'#example',
data:{
currentView:'home'
},
components:{
home:{/*...*/},
posts:{/*...*/},
archive:{/*...*/}
}
})

动态菜单权限

由于菜单是根据权限动态生成的，所以默认的路由只需要几个不需要权限判断的页面，其他的页面的路由放在一个map对象asyncRouterMap中，

设置role为权限对应的编码

exportconstasyncRouterMap=[
{
path:'/project',
component:Layout,
redirect:'noredirect',
name:'Project',
meta:{title:'项目管理',icon:'project'},
children:[
{
path:'index',
name:'Index',
component:()=>import('@/views/project/index'),
meta:{title:'项目管理',role:'PRO-01'}
},

导航守卫的判断，如果有token以及store.getters.allowGetRole说明用户已经登录，routers为用户根据权限生成的路由树，如果不存在，则调用store.dispatch('GetMenu')请求用户菜单权限，再调用store.dispatch('GenerateRoutes')将获取的菜单权限解析成路由的结构。

router.beforeEach((to,from,next)=>{
if(whiteList.indexOf(to.path)!==-1){
next()
}else{
NProgress.start()
//判断是否有token和是否允许用户进入菜单列表
if(getToken()&&store.getters.allowGetRole){
if(to.path==='/login'){
next({path:'/'})
NProgress.done()
}else{
if(!store.getters.routers.length){
//拉取用户菜单权限
store.dispatch('GetMenu').then(()=>{
//生成可访问的路由表
store.dispatch('GenerateRoutes').then(()=>{
router.addRoutes(store.getters.addRouters)
next({...to,replace:true})
})
})
}else{
next()
}
}
}else{
next('/login')
NProgress.done()
}
}
})

store中的actions

//获取动态菜单菜单权限
GetMenu({commit,state}){
returnnewPromise((resolve,reject)=>{
getMenu().then(res=>{
commit('SET_MENU',res.data)
resolve(res)
}).catch(error=>{
reject(error)
})
})
},
//根据权限生成对应的菜单
GenerateRoutes({commit,state}){
returnnewPromise(resolve=>{
//循环异步挂载的路由
varaccessedRouters=[]
asyncRouterMap.forEach((item,index)=>{
if(item.children&&item.children.length){
item.children=item.children.filter(child=>{
if(child.hidden){
returntrue
}elseif(hasPermission(state.role.menu,child)){
returntrue
}else{
returnfalse
}
})
}
accessedRouters[index]=item
})
//将处理后的路由保存到vuex中
commit('SET_ROUTERS',accessedRouters)
resolve()
})
},

项目的部署和版本切换

目前项目有两个环境，分别为测试环境和生产环境，请求的接口地址配在\src\utils\global.js中，当部署生产环境时只需要将develop分支的代码合并到master分支，global.js不需要再额外更改地址

总结

以上所述是小编给大家介绍的vue项目前端知识点整理，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue项目前端知识点整理【收藏】

热门推荐

随机推荐