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 ...
随机推荐
- Pascal之Hello World
Pascal入门篇. 平台:Windows 7 ultimate x64 工具:Free Pascal 下载安装,界面如下: 右键属性,选择“437(OEM-美国)”,重新打开程序,乱码消失. ...
- Compass Card Sales（模拟）
Compass Card Sales 时间限制: 3 Sec 内存限制: 128 MB提交: 35 解决: 13[提交] [状态] [讨论版] [命题人:admin] 题目描述 Katla has ...
- C/C++语言代码规范
1.标识符名称: 标识符名称包括函数名.常量名.变量名等.这些名字应该能反映它所代表的实际东西,具有一定的意义,使其能 够见名知义,有助于对程序功能的理解.规则如下: 所有宏定义.枚举常数和const ...
- Design and Implementation of Global Path Planning System for Unmanned Surface Vehicle among Multiple Task Points
Design and Implementation of Global Path Planning System for Unmanned Surface Vehicle among Multiple ...
- 离散外微积分（DEC:Discrete Exterior Calculus）基础
原文链接 “若人们不相信数学简单,只因为他们未意识到生命之复杂.”——Johnvon Neumann DEC主要讨论离散情况下的外积分,它在计算机领域有重要用途.我们知道,使用计算机来处理几何图形的时 ...
- angularJS 提示
1.通常angularJS应用程序将模块和控制器包含在JavaScript文件中. 2.在模块的定义中[]参数是用来表示模块的依赖关系. 3.中括号[]为空,表示该模块没有依赖关系,如果有依赖关系的话 ...
- 批量删除xml文件中的<?xml version="1.0" ?>
#!/bin/shcd 'home/usrname/'ls cd '/home/usrname/VOC2007/Annotations/' for file in `ls /home/usrname/ ...
- 刚学不久的python，自己稍微加工了一点，影响不大，因为博主很懒，所以格式什么的，就没有太在意了！
本人初学python,之前因为有接触过其他语言,但是并没有接触的太深,出于对一个hacker的向往,学习一下Linux和python再说,当然,也是为了高工资啦,啊哈哈哈! 一开始就是一个蛮有意思的小 ...
- fine ui grid控件添加行号
grid控件的列中添加如下代码<f:RowNumberField EnablePagingNumber="true" TextAlign="Center" ...
- SHGetSpecialFolderLocation获取开始文件夹
SHGetSpecialFolderLocation函数可以获取windows 特殊目录 函数原型:(MSDN官方链接:https://msdn.microsoft.com/en-us/library ...