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


Posted in Javascript onMay 13, 2019

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

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

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

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

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
  resolve({ x: 0, y: 0 })
  }, 0)
 })
 }
})

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

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

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

util.wxNoScroll = function() {
 let myFunction
 let isWXAndIos = 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)
  })
 }
 
 function isWeiXinAndIos () {
  let ua = '' + window.navigator.userAgent.toLowerCase()
  let isWeixin = /MicroMessenger/i.test(ua)
  let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua)
  return isWeixin && isIos
 }
}

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

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

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

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

chooseImage(photoMustTake) {
 return new Promise(resolve => {
  var sourceType = (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) {
      const formdata={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 = new Date().getTime() // 记录socket 创建时间
 _that.socket = new WebSocket(...)
}

// 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('网络忙,请稍后重试')
  return false
 }
 // 不重连
 if (this.noConnection == true) {
  return false
 }
 // socket断线重连
 var date = new Date().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){
   ...
  }
 }
}

后台管理系统模板问题

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

<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="resolvePath(item.children[0].path)">
 <el-menu-item :index="resolvePath(item.children[0].path)" :class="{'submenu-title-noDropdown':!isNest}">
  <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
  <span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{generateTitle(item.children[0].meta.title)}}</span>
 </el-menu-item>
 </router-link>

 <el-submenu v-else :index="item.name||item.path">
 <template slot="title">
  <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
  <span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
 </template>

 <template v-for="child in item.children" v-if="!child.hidden">
  <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>

  <router-link v-else :to="resolvePath(child.path)" :key="child.name">
  <el-menu-item :index="resolvePath(child.path)">
   <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
   <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
  </el-menu-item>
  </router-link>
 </template>
 </el-submenu>

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

<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
 <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
 <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
  <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
 </el-menu-item>
 </app-link>
</template>methods: {
 hasOneShowingChild(children = [], parent) {
  const showingChildren = children.filter(item => {
  if (item.hidden) {
   return false
  } else {
   // Temp set(will be used if only has one showing child)
   this.onlyOneChild = item
   return true
  }
  })
  // When there is only one child router, the child router is displayed by default
  if (showingChildren.length === 1) {
  return true
  }
  // Show parent if there are no child router to display
  if (showingChildren.length === 0) {
  this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
  return true
  }
  return false
 }
 }

动态组件的创建

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

var vm = new Vue({
 el: '#example',
 data: {
 currentView: 'home'
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变! -->
</component>

动态菜单权限

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

设置 role 为权限对应的编码

export const asyncRouterMap = [
 {
  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 }) {
 return new Promise((resolve, reject) => {
  getMenu().then(res => {
   commit('SET_MENU', res.data)
   resolve(res)
  }).catch(error => {
   reject(error)
  })
 })
},
// 根据权限生成对应的菜单
GenerateRoutes({ commit, state }) {
 return new Promise(resolve => {
  // 循环异步挂载的路由
  var accessedRouters = []
  asyncRouterMap.forEach((item, index) => {
   if (item.children && item.children.length) {
    item.children = item.children.filter(child => {
     if (child.hidden) {
      return true
     } else if (hasPermission(state.role.menu, child)) {
      return true
     } else {
      return false
     }
    })
   }
   accessedRouters[index] = item
  })
  // 将处理后的路由保存到vuex中
  commit('SET_ROUTERS', accessedRouters)
  resolve()
 })
},

项目的部署和版本切换

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

总结

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

Javascript 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
js实现碰撞检测
Jan 29 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
koa+mongoose实现简单增删改查接口的示例代码
May 13 #Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 #Javascript
vue百度地图 + 定位的详解
May 13 #Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
php购物网站支付paypal使用方法
2010/11/28 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
Python Trie树实现字典排序
2014/03/28 Python
Numpy数组的保存与读取方法
2018/04/04 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python实现微信机器人的方法
2019/09/06 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
个人委托书范本汇总
2014/10/01 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL