大四(实习)生活下篇

🚀 更新


[2020-1-4]

  • Initial release

[2020-1-5]

Added

  • 日常更新日志

Changed

  • 更新文章格式

[2020-1-6]

Added

  • 更新实习日志

[2020-1-7]

Added

  • 更新日志

[2020-1-8]

  • 日常更新

[2020-1-9]

  • 日常更新

[2020-1-10]

  • 更新实习日志

[2020-1-13]

  • 日常更新

[2020-2-4]

  • 日常更新日志
  • 构建样式布局体系调研报告

[2020-2-5]

  • 更新日志
  • 完善样式布局体系调研报告(汇总)
  • 完善样式布局体系调研报告(我的世界)

[2020-2-6]

  • 完成样式布局体系调研报告(春节活动)

[2020-2-7]

  • 完成样式布局体系调研报告(总结篇)

[2020-2-17]

  • 模拟手 Q 移动端, 初步构建
  • 阅读平台活动项目源码

[2020-2-18]

  • 优化日志格式
  • 更新日志

[2020-2-19]

  • 整理独立 & 海外项目, 输出项目文档 & 技术文档
  • 今日完成搭建 奇想江湖 独立游戏基本骨架

[2020-2-20]

  • 组内 SDK code review
  • 完成古今江湖项目文档
  • 更新博客文章: git常用命令集锦

[2020-2-24]

  • 完成年会评优的项目文档
  • 更新 ts-web-diary 项目的 README, 添加相关依赖项说明

[2020-2-25]

  • 文章格式调整
  • 继续完成 YAPI 文档重构工作

[2020-2-26]

  • 重构 YAPI 文档, 完成元数据相关
    • 事件管理部分
    • 事件属性管理部分
    • 用户属性管理部分
  • 计划完成用户分析相关
    • 完成属性分析部分
    • 完成用户分群部分

[2020-2-27]

  • 重构 YAPI 文档, 构建用户分析相关
  • 组内 Code Review

[2020-2-28]

Added

  • 补充 2-27 号的日志
  • 更新今日日志

[2020-2-29]

Added

  • 更新个人 fe-necessary-book 项目
  • 重构 YAPI 文档
    • 完成行为分析-SQL 查询部分
    • 完成数据看板部分

[2020-3-2]

Added

  • 再次重构数据平台 YAPI 接口文档, 将所有的公共接口按照 “同接口不同参数&返回值” 的原则拆分
  • 为所有接口添加备注信息

[2020-3-3]

Added

  • 再次检查数据平台 YAPI 文档是否具有纰漏
  • 结对编程了解公司的项目配置、环境等信息

[2020-3-4]

  • 我的使命关注任务活动跟进
  • 更新博客, 新增文章: 移动端知识集锦系列之——0.01rem 边框无法显示的问题
  • 同步昨日任务

[2020-3-5]

  • 我的使命引流活动优化
  • 完成年会评优项目文档撰写
  • 更新 ts-utility-plugins

[2020-3-9]

Added

  • 独立游戏零下记忆预约活动

[2020-3-10]

Added

  • 继续完成零下记忆预约活动
  • 初步对接

[2020-3-11]

Added

  • 沟通处理零下记忆的联调问题
  • 交付测试, 但是有一些 video 的问题, 后续再做总结

[2020-3-12]

Added

  • 零下记忆测试 + 验收工作
  • 更新博客, 新增相关文章

[2020-3-13]

Added

[2020-3-16]

Added

  • 搭建零下记忆抽奖活动的基本骨架

[2020-3-17]

Added

  • 完成零下记忆页面布局和部分逻辑, 包括诸多兼容问题(iOS 多输入框)
  • 预计明日进行前后端联调工作

[2020-3-18]

Added

  • 与后端商讨具体字段, 并完善接口文档

[2020-3-22]

Added

  • 继续完善零下记忆抽奖活动
  • 今日主要对抽奖的动画加以优化, 重构抽奖转盘的实现; 并重构获奖列表的动画, 使用 setTimeout 代替 setInterval 解决卡顿问题

[2020-3-23]

Added

  • 对接零下记忆活动
  • 今日主要是对微信、QQ 分享加以完善; 并完善业务方提出的几个新需求, 其中遇到几个问题
    • 微信分享的安全域名, 需要在微信公众平台配置
    • QQ 分享不能使用动态数据, 只能写静态文案
    • 直接使用 location.href 做链接跳转, 微信浏览器底部会产生白条; 其中一种解决方案是: 使用 location.replace 代替

[2020-3-24]

Added

[2020-3-25]

Added

  • 零下记忆活动验收
    • 今日主要针对需求更改, 对项目加以完善. 由于预约和抽奖位于一个项目, 百度统计无法区分. 故采取进入页面直接打点的形式
  • 数据平台 YAPI 接口测试
    • 完成公共接口部分
    • 完成个人设置部分
    • 完成项目信息部分
    • 完成成员管理部分
  • react 源码阅读
    • 着重复习 fiber 树的结构, 即单链表树状结构, 并对 github 笔记加以更新

[2020-3-26]

Added

  • 零下记忆活动验收
    • 今日也主要是零下记忆的一些逻辑上的需求更改, 业务方要求手机验证码输入框不能禁用, 这会导致用户输入错误的时候, 不能更改输入值; 故改进了实现方案, 只限制输入的最大字数, 但是不做锁定处理
  • react 源码阅读
    • 今日完成构建 createElement, 并简单回顾了 ReactDOM.render 的流程

[2020-3-27]

Added

  • TA 系统 DatePicker 组件编写
    • 今天主要的工作是构建 DatePicker 组件, 由于需要与原 TA 相似, 故大部分时间都用来重构 vuejs-datepicker 组件, 包括添加了新的时间选择器以及大部分样式重构

[2020-3-28]

Added

  • TA 数据平台 YAPI 接口测试, 但是由于后端暂时有一些问题未处理, 故暂时无法推进
  • 继续完善 TA 数据平台的 DatePicker 组件, 完成组件的基本样式重构, 正在构建大体的逻辑

[2020-3-30]

Added

  • 继续完成数据平台的 DatePicker 组件, 今日主要构建其日期对比功能, 已完成基本逻辑, 预计明日会修改 vuejs-datepicker 源码, 添加对比状态的样式和逻辑
  • 后端(20:45)解决周六提出的两个问题:
    • 解决创建公司、项目后, 重新登录才能看到的问题
    • 解决删除公司、项目的无效问题
  • 故继续进行 项目信息公司信息 的测试工作

[2020-3-31]

Added

  • 今日初步完成日期选择组件的对比功能, 但是仍存在几个问题(1. 对比状态下日期匹配但是无法高亮(已解决); 2. 对比状态下的标题设置有缺陷; 3. 对比状态下暂时未同步更新禁用日期), 故明日继续进行处理
  • 后端(13:38)解决周一提出的两个问题:
    • 删除公司还是失败的问题
    • 描述为空的问题
  • 故继续进行 项目信息公司信息 的测试工作

[2020-4-1]

Added

  • 数据平台 YAPI 接口文档测试
    • 今日10:36后端修复描述为空时, 不返回字段的问题, 故今日继续测试公司信息相关接口
  • 数据平台 DatePicker 组件构建
    • 今日基本完成日期对比相关逻辑, 但是目前仍有不完善的点(1. 无缝的 DatePicker、2. 提取可配置参数)

[2020-4-2]

Added

  • 数据平台 DatePicker 组件构建
    • 今日(11:43)修复昨日存留的问题(1. 对比状态下结束时间 DatePicker 的当前日期被禁用的问题)
    • 今日(16:04)修复昨日提出的可完善的点(1. 无缝的 DatePicker)
    • 还有一些待优化的点, 比如(1. 提取可配置参数; 2. 时间选择器有 BUG)

[2020-4-3]

Added

  • 数据平台 DatePicker 组件构建
    • 今日(11:53)修复昨日存留的问题(1. 时间选择器的 BUG)
    • 今日(15:43)新增新功能(1. 提取可配置参数和 hook)

[2020-4-7]

Added

  • 数据平台 YAPI 接口测试, 明日预计对不同权限的角色的行为加以测试

[2020-4-8]

Added

  • 重构数据平台 DatePicker 组件, 使用新的主题, 并撰写波浪按钮插件

[2020-4-10]

Added

  • 完成波浪按钮插件制作, 可在 vuereact 等所有环境下使用, 可自行配置多种参数
  • 将博客由 github 迁移到阿里云, 并配置 ci 自动拉取&自动部署(jenkins)
  • 将简历由 github 迁移到阿里云, 并配置自动部署
  • 将个人主页由 github 迁移到阿里云并配置自动部署
  • canvas 波浪按钮项目迁移到阿里云, 并配置自动部署

[2020-4-12]

Added

  • 完成零下记忆-预约项目交接文档

[2020-4-13]

Added

  • 完成零下记忆-抽奖项目交接文档

🚩2020-1-4


💦 今日实习任务概览 💦:

  • 头铁主公玩家站

头铁主公

1. 今日踩坑

[css]: 父级设置 display: -webkit-box 导致子元素高度塌陷的问题

解决方式: 子元素设置绝对定位, 形成 BFC, 脱离文档流即可

[微信浏览器]: vue-router 导致微信浏览器出现白条后, 遮挡页面(单屏页面)内容

需求背景: 之前遇到了很多次这样的情况, 真的想吐槽一下微信的设计. 我的需求是一个单屏玩家站页面, 里面的页面使用 vue-router 加以路由分发, 并且内容的高度是自适应的.

问题描述: 当我点击 router-link 跳转时, 微信浏览器底部的导航条遮挡住了页面的内容部分, 严重影响用户体验.

解决办法: 经过一番摸索, 通过监听路由变化, 动态更新整个应用的高度, 因为内容的高度是通过 display: -webkit-box 来自适应的.

1
2
3
4
5
6
7
8
9
export default {
watch: {
$route() {
this.$el.style.cssText += `
height: ${window.innerHeight}px;
`;
}
}
};

2. 今日知识点

[vue-router]: 通过 GET 形式传参

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
mounted() {
const groupId = 100;
const postId = 100.1;

this.$router.push({
path: `/detail${groupId}`,
query: {
postId: postId
}
});
}
};

[less]: less 循环

1
2
3
4
5
6
7
<div class="loading-list">
<li class="loading-item"></li>
<li class="loading-item"></li>
<li class="loading-item"></li>
<li class="loading-item"></li>
<li class="loading-item"></li>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@LOADING_ITEM_TOTAL: 5;

.loading-item-loop(@i) when (@i < @LOADING_ITEM_TOTAL) {
width: 100px;
height: 100px;

&:nth-of-type(@{i}) {
transform: rotate(@i * 30deg);
}

.loading-item-loop(@i + 1);
}

# 调用 .loading-item {
.loading-item-loop(1);
}

3. 今日 CHANGELOG

http://git.3k.com/web/PM/hw-20200102-ttzg-wjz/blob/develop/CHANGELOG.md

🚩2020-1-5


👓 今日任务计划 👓:

  • 头铁主公玩家站
  • 更新博客

头铁主公

1. 今日踩坑

2. 今日知识点

3. 今日 CHANGELOG

http://git.3k.com/web/PM/hw-20200102-ttzg-wjz/blob/develop/CHANGELOG.md

博客更新

🚩2020-1-6


💦 今日任务概览 💦:

  • 头铁主公玩家站

头铁主公

1. 今日安排

  • 前后端联调

2. 今日踩坑

[vue]: 首次路由切换时, 无法监听到微信浏览器的视窗大小变化

问题背景: 项目中有一个需求, 页面的区域需要跟进不同屏幕高度进行自适应, 所以就需要在:

  • 路由改变时
  • 窗口大小改变时

动态获取 window.innerHeight 视窗高度, 来更新页面 DOM 元素的高度. 但是在微信浏览器内部会产生白色滚动条的问题, 当第一次切换路由的时候, 无法获取到准确的视窗大小.

尝试解决: 采用延时器解决, 但是需要调整全局 loading 的等待时间

3. 今日知识点

[git]: git 将指定文件提交到暂存区

问题背景: 用惯了 git add . 命令, 今天刚好遇到了这样一个问题: 我同时更改了多个功能, 同时也修改了多个文件, 我想将每个功能点保存为不同的 commit 记录, 进而需要将不同的文件加入暂存区.

问题解决: 依旧采用 git add 命令, 但是不同的是, 可以自定义需要提交的文件名称:

1
2
3
4
5
# 提交单个指定文件
git add "src/pages/App.vue"

# 提交多个指定文件
git add "src/pages/1.vue" "2.vue" "3.vue"

4. 今日 CHANGELOG

http://git.3k.com/web/PM/hw-20200102-ttzg-wjz/blob/develop/CHANGELOG.md

🚩2020-1-7


今日任务:

  • 头铁主公玩家站
  • 古今江湖联合活动
  • 第八神谕

头铁主公玩家站

1. 今日踩坑

需求更新, 略

2. 今日知识点

  • [css]: 文本强制不换行

解决办法: 使用 white-space:nowrap 属性, 但是要注意其与 work-break 的区别, 后者是在前者设为换行的条件下, 使用何种策略来断行.

3. 今日 CHANGELOG

http://git.3k.com/rdc/web/PM/hw-20200102-ttzg-wjz/blob/develop/CHANGELOG.md

古今江湖联合活动

1. 今日踩坑

需求更新

2. 今日知识点

需求更新

3. 今日 CHANGELOG

http://git.3k.com/rdc/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md

第八神谕

1. 今日 CHANGELOG

http://git.3k.com/rdc/web/PM/dl-20191213-d8sy/blob/branch/rebuild-2020-1-7/CHANGELOG.md

2. 明日计划

  • 适应需求, 重构页面组件

🚩2020-1-8


今日任务:

  • 第八神谕重构
  • 古今江湖需求更新
  • 头铁主公需求更新

第八神谕

1. 今日完成

  • 提取新版 PSD 的相关图片

2. 今日 CHANGELOG

http://git.3k.com/rdc/web/PM/dl-20191213-d8sy/blob/wap/CHANGELOG.md#2020-1-8

古今江湖

1. 今日 CHANGELOG

http://git.3k.com/rdc/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md#2020-1-8

头铁主公

1. 今日知识点

[css]: 去除


标签的默认阴影

今日看到 <hr/> 标签在浏览器中有默认的白色阴影效果, 与页面的整体配色看起来很不协调, 故想将其去掉, 很简单:

1
2
3
hr {
border-bottom: none;
}

2. 今日踩坑

[css]: 容器内 a 链接点击无法跳转

问题背景: 后端返回了一段富文本, 需要展示到页面上, 但是预览时发现内部的链接并无法点击.

解决办法: 原因是 pointer-events: none 禁用掉了穿透事件, 导致无法点击, 将其设为 auto 即可.

3. 今日 CHANGELOG

http://git.3k.com/rdc/web/PM/hw-20200102-ttzg-wjz/blob/develop/CHANGELOG.md#2020-1-8

🚩2020-1-9


今日任务概览:

  • 第八神谕重构
  • 头铁主公验收
  • 古今江湖 BUG 修改

古今江湖

1. 今日踩坑

[swiper]: swiper 的数据动态获取时, 无法初始化的问题

解决方式: 在 vue 父组件中, 可以通过 this.$refs.childRef.method() 调用子组件的方法, 所以需要在父组件执行完异步操作后, 再执行子组件的异步数据获取操作.

问题描述:

[css]: user-select 的兼容性写法

1
2
3
4
5
6
div {
user-select: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: text;
}

2. 今日 CHANGELOG

http://git.3k.com/rdc/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md#2020-1-9

头铁主公

1. 今日知识点

[css]: 文字渐变效果实现

其实是有多种方式的, 比如 svg, 但是略显麻烦:

1
<span>测试文本</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
span {
color: #fbffe2;
word-break: keep-all;
background-image: linear-gradient(
to top,
#f0bd79 2%,
#f8d9a3 29%,
#fff4cd 57%,
#fffffa 100%
);
color: transparent;
-webkit-background-clip: text;
}

2. 今日 CHANGELOG

http://git.3k.com/rdc/web/PM/hw-20200102-ttzg-wjz/blob/develop/CHANGELOG.md#2020-1-9

第八神谕

1. 今日 CHANGELOG

http://git.3k.com/rdc/web/PM/dl-20191213-d8sy/blob/wap/CHANGELOG.md#2020-1-9

🚩2020-1-10


今日总结:

前两天的项目出现线上 BUG, 一方面是由于自己对应技术栈的不熟悉, 代码方面有问题; 另一方面是由于自己的沟通不到位, 包括与其他部门:

  • 美工
  • 产品
  • 测试

之间的交流, 之前只是单纯的一股脑完成指派的任务, 然后交给测试, 并没有想到去和项目经理沟通… 而这所有的原因归结于自己对于开发时的整套流程, 所以今天花多点时间总结反思一下.

https://oos.blog.yyge.top/2020/1/4/%E5%A4%A7%E5%9B%9B%E9%9A%8F%E7%AC%94(%E4%B8%8B)/images/1_10/1_%E5%B7%A5%E4%BD%9C%E6%B5%81%E7%A8%8B%E6%80%BB%E7%BB%93%E5%8F%8D%E6%80%9D.png

🚩2020-1-13


今日完成

今日知识点

text-overflow 妙用

text-overflow 用来控制一段文本的溢出时的展示状态, 比如溢出显示省略号, 兼容性良好. 但是需要注意, 如果当前元素没有设置 overflow: hidden, 效果无法显示.

1
<input />
1
2
3
4
5
input {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

今日 CHANGELOG

🚩2020-2-17


项目情况

vue-demo-qq

项目简介

模拟手机 QQ 的相关布局, 加深强化对于样式布局体系的理解, 查漏补缺.

项目进度
进度标题 进度概述 预备方案 落地方案 完成度
整体布局 对于手 Q 的整体结构进行划分, 包括: 左右固定, 中间自适应上下堆叠 式布局, 并采用语义化的标签和规范的 CSS 属性来书写代码 计划采用 display: flex 式布局, 但是其在安卓 UC 浏览器的兼容性较差, 故不采用 最终采用兼容性较好并且功能较符合要求的 display: box 100%
tab 切换 点击首页的底部一级导航, 首页中部的试图需要对应展示不同的区块(消息好友动态) 点击每个 tab 项, 记录其唯一的标识 key, 视图根据 key 来动态更新 实施预备方案 100%

hd-20190711-cjjs-dl(阅读)

项目简介

初步阅读超级巨兽调研活动的项目代码, 熟悉代码.

工作总结

  • 今日主要对于上周所总结的样式布局体系做个练手, 对于项目布局来说, 要由浅入深, 先分析整体布局, 优先采用 box 布局
  • 上下堆叠式布局, 可以采用一行内一块级的形式, 自动排版

🚩2020-2-18


项目情况


1. hd-20190917-gq(阅读)

1.1 项目简介

2019 国庆活动项目, 阅读源码并初步了解简单的业务逻辑和样式布局体系.

1.2 项目进度
进度标题 进度概述 预备方案 落地方案 完成度
整体 DOM 结构 阅读分析该项目整体的 DOM 结构, 由浅入深, 发现其与抖音、快手等短视频应用的布局类似, 都是全屏布局, 手指触摸可切换页码 项目中采用的方式是使用轮播图来承载不同的页面, 使得整体的可配置性大大提高, 我想这是最简便的方法 100%
业务逻辑 阅读体会项目中存在的大量业务功能, 比如点赞打点微信分享功能 详见事务重点部分 40%
1.3 项目地址

http://git.3k.com/rdc/web/PM/hd-20190917-gq

事务重点


业务标题 业务重点(问题) 解决方案 完成度
全屏切换 由于项目类似于短视频应用, 故需要在移动端全屏展示, 用户通过触摸交互来切换上()一页 最简便的方式, 即采用轮播的形式来切换 100%
视频自动播放 当首次进入活动页面, 或者手指触摸进入其某个短视频页时, 该页内部的视频需要自动播放. 经测试, 在 iOS 微信浏览器上, 正常工作; 但是在 Android 微信浏览器却不行 动态判断 AndroidiOS 机器, iOS 设备则使用基本的 video 标签和属性; Android 设备则使用兼容性较好的 jsmpeg 库来解决, 当然该库的原理是: 利用 canvasdrawImage() 方法, 通过定时器, 获取视频的每一帧, 绘制到画布上 100%
自定义事件(CustomEvent) 项目中存在一个全局 loading 提示组件, 需要在该 loading 消失之后执行一段逻辑代码, 传统的异步方案(回调promise)较为繁琐. 可以采用兼容性较好, 相对于快捷简便的 自定义事件 的形式, 主要是利用了 CustomEvent 这个 原生 API 100%

工作总结


  • 今日主要的任务是阅读之前的平台活动项目代码, 完善布局体系的短板, 了解业务逻辑
  • 其中有个把问题, 在之前的项目中时常遇到, 比如 视频自动播放 功能, 由于安卓和苹果的不同策略, 导致效果不尽相同
  • 还有更多的业务相关的逻辑, 比如 点赞微信分享, 需要逐渐理解