摘要:在如下幾個屬性,表示當前的真實時間,用于和服務器時間同步,表示創建時間,主要用于分頁,以及重連時的判斷,表示是否斷線重連。初始化連接時,將賦值為當前本地時間,連接成功后,將賦值為服務器返回的當前時間,再設置一個定時器,保持時間與服務器一致。
vue項目前端知識點整理 微信授權后還能通過瀏覽器返回鍵回到授權頁
在導航守衛中可以在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) //在父組件中使用微信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){ ... } } }后臺管理系統模板問題
由于后臺管理系統增加了菜單權限,路由是根據菜單權限動態生成的,當只有一個菜單的權限時,會導致這個菜單可能不顯示,參看模板的源碼:
{{generateTitle(item.children[0].meta.title)}} {{generateTitle(item.meta.title)}} {{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) { 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: { /* ... */ } } })動態菜單權限
由于菜單是根據權限動態生成的,所以默認的路由只需要幾個不需要權限判斷的頁面,其他的頁面的路由放在一個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() }) },項目的部署和版本切換
目前項目有兩個環境,分別為測試環境和生產環境,請求的接口地址配在srcutilsglobal.js中,當部署生產環境時只需要將develop分支的代碼合并到master分支,global.js不需要再額外更改地址
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/109467.html
摘要:寫在前面金三銀四又到了一年一度的跳槽季相信大家都在準備自己面試筆記我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結方便自己復習詳細內容會在之后一一對應地補充上去有些在我的個人主頁筆記中也有相關記錄這里暫且放一個我的面試知識點目錄大家 寫在前面: 金三銀四, 又到了一年一度的跳槽季, 相信大家都在準備自己面試筆記, 我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結,方便自...
摘要:寫在前面金三銀四又到了一年一度的跳槽季相信大家都在準備自己面試筆記我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結方便自己復習詳細內容會在之后一一對應地補充上去有些在我的個人主頁筆記中也有相關記錄這里暫且放一個我的面試知識點目錄大家 寫在前面: 金三銀四, 又到了一年一度的跳槽季, 相信大家都在準備自己面試筆記, 我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結,方便自...
摘要:注本文章是在工作過程中所接觸的知識點的整理,涉及的東西比價雜亂,如有錯誤之處,歡迎糾錯與指導一,頁面的錨鏈接定義錨點錨點鏈接。類似于我們閱讀書籍時的目錄頁碼或章回提示。 *注:本文章是在工作過程中所接觸的知識點的整理,涉及的東西比價雜亂,如有錯誤之處,歡迎糾錯與指導 一, 頁面的錨鏈接 1,定義:錨點,錨點鏈接。常常用于那些內容龐大繁瑣的網頁,通過點擊命名錨點,不僅讓我們能指向文檔,還...
摘要:注本文章是在工作過程中所接觸的知識點的整理,涉及的東西比價雜亂,如有錯誤之處,歡迎糾錯與指導一,頁面的錨鏈接定義錨點錨點鏈接。類似于我們閱讀書籍時的目錄頁碼或章回提示。 *注:本文章是在工作過程中所接觸的知識點的整理,涉及的東西比價雜亂,如有錯誤之處,歡迎糾錯與指導 一, 頁面的錨鏈接 1,定義:錨點,錨點鏈接。常常用于那些內容龐大繁瑣的網頁,通過點擊命名錨點,不僅讓我們能指向文檔,還...
摘要:前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...
閱讀 2580·2021-11-22 09:34
閱讀 948·2021-11-19 11:34
閱讀 2807·2021-10-14 09:42
閱讀 1488·2021-09-22 15:27
閱讀 2391·2021-09-07 09:59
閱讀 1741·2021-08-27 13:13
閱讀 3438·2019-08-30 11:21
閱讀 780·2019-08-29 18:35