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 ...
随机推荐
- UESTC 761 LoveZx与期末考试
被卡的一道题,其他情况都想出来了,主要是没想好A[i] == B[j]时候的处理,取最后面最大的可能不是最优解,相等的时候我暴力比较后缀的(为此还要维护一个链),这个操作是O(len) 所以T了.(也 ...
- 进程管理—进程描述符（task_struct）
http://blog.csdn.net/qq_26768741/article/details/54348586 当把一个程序加载到内存当中,此时,这个时候就有了进程,关于进程,有一个相关的叫做进程 ...
- Nginx+Tomcat+memcached高可用会话保持
Nginx+Tomcat+memcached高可用会话保持 文章来源dyc2005 一.概述 之前文章已经描述了企业高可用负载相关的架构及实现,其中常用的nginx或haproxy,LVS结合ke ...
- 关于win10深度学习安装配置 CUDA9.0+VS2017+Cudnn7.4.1.5+Anaconda3（cupy安装包）+python3.7+pycharm
0 查看电脑系统版本(非常重要) WIN+R->输入winver, 系统版本号必须高于1703,否则CUDA9.0难以运行!!!! 1 安装 NVIDIA 显卡驱动程序 下载地址:驱动程序 选择 ...
- django模板层(templates)
1.基础部分 通过使用模板,就可以在URL中直接调用HTML,它还是松耦合的,灵活性强,而且更容易维护 而且可以将变量通过一定的方式嵌入到HTML中,最终渲染到页面,总的来说基于模板完成了数据与用户之 ...
- Mybatis学习的一些细节
一.mybatis 基本配置 最近几天一直在学习mybatis,看了一些源码,本文讲述mybatis的一些基本配置和基本的用法和注意到一些细节.个人时间和精力有限,本文属于流水账类型,不成体系,算是自 ...
- Xcode 中 pch 文件配置 - iOS
一.简介 首先 pch 文件(即:Prefix Header)是一种预编译文件,在 Xcode 6 之前创建新的工程则会自动将该文件一起创建出来,但在 Xcode 6 之后苹果官方则默认将自动创建的方 ...
- PBJVision 快速在应用中集成相机/拍摄功能
PBJVision 简介 PBJVision, 是一个iOS相机操作的封装库,可以让你的应用快速简单地继承相机相关功能. 项目主页: PBJVision 最新示例:点击下载 注意: 示例需要在真机上运 ...
- 漂亮提醒框js
<script type="text/javascript"> var filename = "PICC_V2.1.3.0_新增功能操作手册.doc" ...
- 牛客小白月赛2 D 虚虚实实 【欧拉图】【连通图】
链接:https://www.nowcoder.com/acm/contest/86/D来源:牛客网 题目描述 震为雷,临危不乱,亨通畅达:巽为风,柔顺伸展,厚载万物. 震卦:洊雷,震,君子以恐惧修省 ...