第四天

　　早上第一件事就是和组长说前一天的需求的事，简而言之就是两个导航栏不属于一个标签内，自定义导航栏属于<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实习日记：第四天的更多相关文章

  1. TW实习日记：前三天

    今天是2018年7月20号,周五.从周一开始实习到现在,终于想起来要写日记这种东西了,可以记录一下自己这一天所学所做所知也是蛮不错的.先简单总结一下自己的大学生活吧,算是多姿多彩,体验了很多东西.在大 ...

  2. TW实习日记：第九天

    这两天有点忙,要改前端网页和加需求上去.所以昨天说的Vue缓存机制也没看,所以打算现在列个挖了的坑的清单: Vue缓存机制.生命周期和钩子函数 使用项目组自用组件来重写静态页面 SSM框架搭建.整合流 ...

  3. TW实习日记：第31-32天

    不知不觉的,实习的净工作天数,已经都超过一个月了.因为对工作内容不是很满意,所以打算月底离职,也不知道是公司太缺人还是我真的能干活,领导竟然三番两次找我让我再考虑...明天又要找我了,哎...随机应变 ...

  4. TW实习日记：第十天

    今天任务很简单,就是出品项目的时间轴显示页面和动态路由设置.其实时间轴页面很快就做完了,在做完处理完数据之后,然而有很多细节需要打磨,这就又考验了我面向搜索引擎编程的能力,根据需求百度了很多css的样 ...

  5. TW实习日记：第八天

    今天早上主要是接着做昨天的微信端网页预览附件,听同事说当打包代码放入服务器上后,就不存在跨域问题了,也就懒得自己写接口了,那么就希望自己能一次过吧...结果写着写着,发现开发文档中关于预览文件的方法, ...

  6. TW实习日记：第七天

    今天早上,将项目的两个企业微信接口:登录和应用消息发送接口,做了最后的收尾工作,把目前我能解决的问题算是基本都解决了.早上还开了一个会,大意是组长封装了许多组件叫我们使用,在不断的使用中打磨组件的可用 ...

  7. TW实习日记：第六天

    今日的一整天都是在开发微信相关的接口,因为项目的系统是嵌在企业微信中,所以不可避免的要产生微信UserID和企业系统ID的匹配关系,那么就需要用手机号或是邮箱这种两边都存在的唯一参数进行匹配.然后再将 ...

  8. TW实习日记：第五天

    今天可以说是非常忙的一天了,要再项目中实现微信相关的功能:授权登录以及扫码登录,还有就是自建应用的发送消息.首先功能代码其实在经过了几天的学习之后并没有很难,但是最让我难受的是在项目中去加代码,首先s ...

  9. TW实习日记：第28天

    同前两天一样,等接口,开发,调试接口.重复地做着低级代码得搬运工作,确实挺没意思的.怪不得有些人一直说写低级代码很无聊,没有创造性和成就感.31号准备溜了,还是好好复习准备秋招吧. 挖坑清单: Vue ...

随机推荐

  1. http协议的发展历史

    在最早的时候,第一个定稿的http协议是http/0.9版本,在这个版本里面,http协议,它的内容,非常非常的简单 只有一个命令,就是GET 对应的就是我们现在经常用到的get请求,post请求,这 ...

  2. 20145238-荆玉茗 《Java程序设计》第9周学习总结

    20145238第九周<Java学习笔记> 第十六章 整合数据库 JDBC入门 ·数据库本身是个独立运行的应用程序 ·撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 ...

  3. Spring boot 集成 Swagger

    添加依赖包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...

  4. 【造轮子】开发vue组件库MeowMeowUI

    项目示例 github ​ 1. 创建项目 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue in ...

  5. 【洛谷P1323】删数问题

    删数问题 题目链接 首先找出最小的k个数:用堆每次取出最小的元素p,将p*2+1和p*4+5压入堆. 贪心求最大数:从前往后找第一个data[j+1]>data[j],删除data[j].(链表 ...

  6. 如何安装Ruby（Windows）

    Ruby解释器的安装 1.Windows平台 想尽快安装并运行Ruby,可遵循如下步骤: 1.启动Web浏览器,访问 http://www.ruby-lang.org/en/downloads/ 2. ...

  7. C#流程控制语句

    C#流程控制语句 一.选择语句 当程序中需要进行两个或两个以上的选择时,可以根据条件的判断来选择将要执行的一组语句. ?if语句 ?switch语句 二.循环语句 循环语句是对一个程序模块进行的重复操 ...

  8. 14、SpringBoot------定制错误返回内容json格式

    开发工具:STS 前言: 在前后端分离的项目中,当前端向后端请求资源失败时,想知道具体的错误原因,给用户予以提示. 但是,在springboot中返回内容是固定的.并不适合我们前端进行分析. 所以,就 ...

  9. 08_1_IO

    08_1_IO 1. 输入/输出流的分类 java.io包中定义了多个流类型(类或抽象类)来实现输入/输出功能:可以从不同的角度对其进行分类: 按数据流的方向不同可以分给输入流和输出流. 按处理数据单 ...

  10. lintcode_114_不同的路径

    不同的路径   描述 笔记 数据 评测 有一个机器人的位于一个 m × n 个网格左上角. 机器人每一时刻只能向下或者向右移动一步.机器人试图达到网格的右下角. 问有多少条不同的路径? 注意事项 n和 ...