TW實習日記：第四天
第四天
早上第一件事就是和組長說前一天的需求的事，簡而言之就是兩個導航欄不屬於一個標簽內，自定義導航欄屬於<body>下的<header>，微信頂部的則是<head>標簽下的<title>，還好組長也很快明白了我的意思，沒有再為難我。所以，在微信端的頁面就去掉頂部導航欄來設計。然後早上我就幫忙前端同事做修改頁面和動態修改title這個活。
實現：
1.首先添加一個全局標誌位，標誌從微信端或移動應用端登入。因為我不會且似乎項目並沒有很多全局變量，所以並沒有使用Vuex，所以添加全局變量的方法是在main.js裏用如下方法
Vue.prototype.變量名= function(){ return 變量值; }
2.設置自定義的頂部導航欄的顯示可見，可以用v-if也可以用v-show，這裏我采用了v-if的方式。我個人理解後的原因如下
v-show屬於偏動態的操作，因為在頁面編譯時，添加v-show屬性的元素一定會被編譯，並且顯示在頁面源代碼上，v-show只是在元素上添加了display屬性，根據v-show的值設置可不可見，所以這種方式相當於是操作css來控制可不可見，切換消耗較小，比較適合會頻繁切換狀態的元素。
v-if則是在編譯層面上的。也就是說，如果v-if的值為false，那麽在編譯時他就根本不會產生元素的代碼，只有v-if的值為true，它才會進行編譯，將元素動態的加入到頁面中。而且v-if的機制是懶加載，如果初始值為false，那麽它就不會編譯，直到值為true才進行編譯並緩存編譯。
對比過這兩者的差別後，對於我的需求：判斷用戶登錄是移動端還是微信端，那麽很顯而易見了，采用v-if會好很多，畢竟其實這個需求都沒有切換要求，只是單純為了不多寫一套代碼打包而采取的措施。
3.自定義導航欄有一些頁面是帶有按鈕的，按鈕是新增表單這種作用。那麽如果自定義導航欄沒有了的話，需要添加按鈕。所以這裏就在這些有導航欄按鈕的頁面中，添加兩個定位在瀏覽器最底端的按鈕，用於返回和新增。這個需求也很簡單，因為我們項目組用的是ydui，直接在兩個按鈕的外層標簽<yd-tabbar>中添加fixed=“true”就可以了。css的方式的話就添加樣式position：absolute和bottom：0即可。
4.最後也就是根據Vue的跳轉來實現動態改變頁面title。這一點也不難，在Vue工程的router文件夾下有一個index.js文件。首先在各個路由對象裏，加上meta：{ title : ‘value‘ }，然後在根目錄下的main.js裏，添加一個方法用於頁面跳轉時，設置跳轉頁面後的title為router對象裏的title值。代碼如下：
//index.js裏router內的一個示例
{
path:‘/modules/task‘,
name:‘task‘,
component: Task ,
meta:{
title:‘我的任務‘
}
}
//main.js裏的方法示例
router.beforeEach((to,from,next)=>{
if(to.meta.title){
document.title = to.meta.title;
}
next()
})
在這四步之後需求就已經完成了，這應該是我實習後第一次修改項目中的代碼，雖然任務十分輕松，但還是有點小開心。接下來下午就是繼續深入學習企業微信開發，寫demo調用微信的接口來測試，實現了二維碼的掃碼登錄和微信端頁面的授權登陸，還有一些開啟回調模式等這些基礎功能。於是這一天就這樣過去了，關於微信開發的東西的話放到第五天裏再講好了。
TW實習日記：第四天