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调用微信的接口来测试,实现了二维码的扫码登录和微信端页面的授权登陆,还有一些开启回调模式等这些基础功能。于是这一天就这样过去了,关于微信开发的东西的话放到第五天里再讲好了。
Terence Xie
2018.7.20 周六 11:50