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 ...
随机推荐
- 【转】Android Support 包里究竟有什么
随着 Android 5.0 Lollipop 的发布,Android 又为我们提供了更多的支持包,但是我相信大部分开发者都同我之前一样不知道这些包里究竟有些什么东西,我们应该在什么时候使用它.现在, ...
- 2017.11.29 JSP+Servlet 中功能验证码及验证的实现
源代码如下: validate.jsp <%@ page language="java" import="java.util.*" pageEncodin ...
- mysql常用命令添加外键主键约束存储过程索引
数据库连接 mysql -u root -p123456 查看表 show databases 创建数据库设置编码 create table books character set utf8; 创建用 ...
- AngularJS 控制器的方法
AngularJS 控制器也有方法(变量和函数) <!DOCTYPE html><html><head><meta http-equiv="Cont ...
- caffe新版本的各种软件
系统重装了,于是,我想装就体验一下最新的各种东西吧. anaconda最新的 cuda最新的 cudnn最新的 本来安装好了没问题.caffe编译也通过了.但是不能用,缺少python opencv和 ...
- 16、SpringBoot------整合MapStruct
开发工具:STS 前言: 前端提交往后端的数据,一部分是不需要存入数据库当中的: 后端从数据库中取出的数据,一部分是不可以交给用户的: 那么,po面向的是DB,vo面向的是客户端, mapstruct ...
- 2017年10月26日 git上传文件失败的文件
最近几天因为项目要用git,于是学习了一下git.今天上传项目到码云的时候,却发现总有一些文件夹上传不上去,git 也显示everything is update.找了一圈办法,都没有用,最后突然发现 ...
- Ajax跨域请求以及乱码解决
Ajax跨域请求2种解决方法 1 ) 什么叫跨域请求,协议,域名,端口号,其中一样不同都称跨域; 第一种:使用script标签发送请求; //创建一个script标签; var v_element=d ...
- Zeppelin interperter 模式设置总结图解2
该配置是在zeppelin的Interpreter的后台配置文件:conf/Interpreter.json spark Interpreter的模块定义那里.特别感谢开发团队组长大神的提示,深入挖掘 ...
- .NET领域驱动设计系列(12)
[.NET领域驱动设计实战系列]专题十一:.NET 领域驱动设计实战系列总结 摘要: 一.引用 其实在去年本人已经看过很多关于领域驱动设计的书籍了,包括Microsoft .NET企业级应用框架设计. ...