大四随笔(下)

大四(实习)生活下篇

🚀 更新

[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

对接零下记忆活动验收
- 重构了预约页, 根据后台配置的预约 or 下载, 展示不同的图片和样式, 以后也采取这种方式
更新个人博客
- 新增文章: 移动端知识点集锦系列之——H5 页面的 QQ 分享
- 新增文章: 移动端知识点集锦系列之——微信 webview 底部白条的应对方案
- 新增文章: 移动端知识点集锦系列之——iOS 输入框失焦后页面底部留白的问题

[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

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

[2020-4-12]

Added

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

[2020-4-13]

Added

完成零下记忆-抽奖项目交接文档
完成我的使命-微信关注任务交接文档

[2020-4-14]

Added

完成工作交接文档
更新博客文章: git 命令集合

[2020-4-20]

毕业论文撰写

[2020-4-21]

完成毕业论文初稿
计划于明日完成维普周志 10 篇

[2020-4-23]

今日主要是优化毕业论文的格式
完成维普周志三篇

[2020-4-27]

完成维普周志剩余四篇

[2020-5-12]

毕业答辩 PPT 制作
系统演示视频录制

[2020-5-16]

录制毕设演示视频

[2020-7-2]

学习微信小程序开发基础

🚩2020-1-4

💦 今日实习任务概览 💦:

头铁主公玩家站

头铁主公

1. 今日踩坑

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

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

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

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

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

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

export default {
  watch: {
    $route() {
      this.$el.style.cssText += `
        height: ${window.innerHeight}px;
      `;
    }
  }
};

2. 今日知识点

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

export default {
  mounted() {
    const groupId = 100;
    const postId = 100.1;

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

[less]: less 循环

<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>

@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 命令, 但是不同的是, 可以自定义需要提交的文件名称:

# 提交单个指定文件
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 的兼容性写法

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>

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, 效果无法显示.

<input />

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` 微信浏览器却不行	动态判断 `Android` 和 `iOS` 机器, `iOS` 设备则使用基本的 `video` 标签和属性; `Android` 设备则使用兼容性较好的 `jsmpeg` 库来解决, 当然该库的原理是: 利用 `canvas` 的 `drawImage()` 方法, 通过定时器, 获取视频的每一帧, 绘制到画布上	100%
自定义事件(`CustomEvent`)	项目中存在一个全局 `loading` 提示组件, 需要在该 `loading` 消失之后执行一段逻辑代码, 传统的异步方案(`回调`、`promise`)较为繁琐.	可以采用兼容性较好, 相对于快捷简便的 `自定义事件` 的形式, 主要是利用了 `CustomEvent` 这个原生 API	100%

工作总结

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

DZY

🚀 更新

[2020-1-4]

[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]

[2020-2-18]

[2020-2-19]

[2020-2-20]

[2020-2-24]

[2020-2-25]

[2020-2-26]

[2020-2-27]

[2020-2-28]

Added

[2020-2-29]

Added

[2020-3-2]

Added

[2020-3-3]

Added

[2020-3-4]

[2020-3-5]

[2020-3-9]

Added

[2020-3-10]

Added

[2020-3-11]

Added

[2020-3-12]

Added

[2020-3-13]

Added

[2020-3-16]

Added

[2020-3-17]

Added

[2020-3-18]

Added

[2020-3-22]

Added

[2020-3-23]

Added

[2020-3-24]

Added

[2020-3-25]

Added

[2020-3-26]

Added

[2020-3-27]

Added

[2020-3-28]

Added

[2020-3-30]

Added

[2020-3-31]

Added

[2020-4-1]

Added

[2020-4-2]

Added

[2020-4-3]

Added

[2020-4-7]

Added

[2020-4-8]

Added