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
TW实习日记：第四天的更多相关文章
- TW实习日记：前三天
今天是2018年7月20号,周五.从周一开始实习到现在,终于想起来要写日记这种东西了,可以记录一下自己这一天所学所做所知也是蛮不错的.先简单总结一下自己的大学生活吧,算是多姿多彩,体验了很多东西.在大 ...
- TW实习日记：第九天
这两天有点忙,要改前端网页和加需求上去.所以昨天说的Vue缓存机制也没看,所以打算现在列个挖了的坑的清单: Vue缓存机制.生命周期和钩子函数 使用项目组自用组件来重写静态页面 SSM框架搭建.整合流 ...
- TW实习日记：第31-32天
不知不觉的,实习的净工作天数,已经都超过一个月了.因为对工作内容不是很满意,所以打算月底离职,也不知道是公司太缺人还是我真的能干活,领导竟然三番两次找我让我再考虑...明天又要找我了,哎...随机应变 ...
- TW实习日记：第十天
今天任务很简单,就是出品项目的时间轴显示页面和动态路由设置.其实时间轴页面很快就做完了,在做完处理完数据之后,然而有很多细节需要打磨,这就又考验了我面向搜索引擎编程的能力,根据需求百度了很多css的样 ...
- TW实习日记：第八天
今天早上主要是接着做昨天的微信端网页预览附件,听同事说当打包代码放入服务器上后,就不存在跨域问题了,也就懒得自己写接口了,那么就希望自己能一次过吧...结果写着写着,发现开发文档中关于预览文件的方法, ...
- TW实习日记：第七天
今天早上,将项目的两个企业微信接口:登录和应用消息发送接口,做了最后的收尾工作,把目前我能解决的问题算是基本都解决了.早上还开了一个会,大意是组长封装了许多组件叫我们使用,在不断的使用中打磨组件的可用 ...
- TW实习日记：第六天
今日的一整天都是在开发微信相关的接口,因为项目的系统是嵌在企业微信中,所以不可避免的要产生微信UserID和企业系统ID的匹配关系,那么就需要用手机号或是邮箱这种两边都存在的唯一参数进行匹配.然后再将 ...
- TW实习日记：第五天
今天可以说是非常忙的一天了,要再项目中实现微信相关的功能:授权登录以及扫码登录,还有就是自建应用的发送消息.首先功能代码其实在经过了几天的学习之后并没有很难,但是最让我难受的是在项目中去加代码,首先s ...
- TW实习日记：第28天
同前两天一样,等接口,开发,调试接口.重复地做着低级代码得搬运工作,确实挺没意思的.怪不得有些人一直说写低级代码很无聊,没有创造性和成就感.31号准备溜了,还是好好复习准备秋招吧. 挖坑清单: Vue ...
随机推荐
- hdu-1892 See you~---二维树状数组运用
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1892 题目大意: 题目大意:有很多方格,每个方格对应的坐标为(I,J),刚开始时每个格子里有1本书, ...
- CPU的段寄存器
http://www.cnblogs.com/tolimit/p/4775945.html?utm_source=tuicool&utm_medium=referral CPU的段寄存器 在C ...
- 45. 腾讯面试题： 使用hashmap 插入数据，怎么样依照插入数据的顺序输出数据
题目:使用hashmap 插入数据,怎么样依照插入数据的顺序输出数据 分析: 使用hashmap插入数据,数据的顺序会改变.能够写个小程序试试. 那怎么样依照插入的顺序输出呢? 方法一: 这是我第一时 ...
- Linux内存管理 —— 内核态和用户态的内存分配方式
1. 使用buddy系统管理ZONE我的这两篇文章buddy系统和slab分配器已经分析过buddy和slab的原理和源码,因此一些细节不再赘述.所有zone都是通过buddy系统管理的,buddy ...
- SpringBoot学习7：springboot整合jsp
springboot内部对jsp的支持并不是特别理想,而springboot推荐的视图是Thymeleaf,对于java开发人员来说还是大多数人员喜欢使用jsp 1.创建maven项目,添加pom依赖 ...
- JQuery 过滤选择器 与属性修改的方法演示比较
文本匹配 在表单输入项里面输入值,根据输入值,点击判断按钮,让对应的复选框选中 <html> <head> <meta http-equiv="Content- ...
- 泉五培训Day1
T1 树学 题目 [问题描述] 给定一颗 n 个点的树,树边带权,试求一个排列 P,最大化下式 其中,calc(a, b)表示树上由a到b经过的最大边权. [输入格式] 第一行一个整数 n,表示点数下 ...
- gdb-pada调试实例
先编写个简单的hello的程序 hello.c (ps:有没有头文件行不行,试试不就知道了) int main(){ printf("hello!\n"); int m,n; in ...
- 汇编语言编写Hello World
;================================= ; HELLO world DATAS segment string DB 'HELLO World','$' DATAS end ...
- python__基础 : 类的__new__方法与实现一个单例
__new__ : 这个方法的作用主要是创建一个实例,在创建实例时首先会调用 __new__方法 ,然后调用__init__对实例进行初始化, 如果想修改 __new__ 这个方法,那么最后要 ret ...