记录我的实习生活

更新


[2019-11-18]

  • Initial Release

[2019-11-19]

Added

  • 更新区块

[2019-11-20]

Added

  • 更新区块

[2019-11-22]

Added

  • 更新日志

[2019-11-25]

Added

  • 更新日志

Changed

  • 优化文章的结构

[2019-11-26]

Added

  • 更新日志

[2019-11-27]

Added

  • 更新日志

[2019-11-28]

Added

  • 更新日志

Changed

  • 更新文章格式
    • 使用 detailssummary 标签来减少文章可视区长度

[2019-11-29]

Added

  • 日常更新日志

[2019-12-2]

Added

  • 更新文章

Changed

  • 更新 2019-11-29 区块
    • 修改格式

[2019-12-3]

Added

  • 日常更新文章

[2019-12-4]

Added

  • 更新日志

[2019-12-5]

Added

  • 更新实习日志

[2019-12-6]

Added

  • 日常更新

[2019-12-7]

  • 更新日志

[2019-12-9]

  • 更新实习日志

[2019-12-10]

Added

  • 更新实习日志

Changed

  • 更新 2019-12-9 的区块格式

[2019-12-11]

Added

  • 更新今日日志

[2019-12-12]

Added

  • 更新实习日志

[2019-12-13]

Added

  • 日常更新

[2019-12-14]

Added

  • 更新学习日志

Changed

  • 更新 2019-12-122019-12-13 的 CHANGELOG 格式

[2019-12-16]

Added

  • 日常更新实习日志

Changed

  • 更新 2019-12-14CHANGELOG 格式

[2019-12-17]

Added

  • 日常更新

[2019-12-18]

Added

  • 更新实习日志

[2019-12-19]

Added

  • 日常更新

[2019-12-20]

Added

  • 更新日志

[2019-12-23]

Added

  • 日常 update

[2019-12-24]

  • 日常更新

[2019-12-25]

  • 更新实习日志

[2019-12-26]

  • 日常 update

[2019-12-27]

  • 更新日志
  • 更新前几节的格式

[2019-12-28]

  • 日常更新日志

[2019-12-29]

  • 日常更新

[2019-12-30]

  • 更新实习日志

[2019-12-31]

  • 更新日志

[2020-1-2]

  • 日常更新

[2019-1-3]

  • 日常更新日志

2019-11-18


实习第一天, 公司人事告知今天早上 9:30 报道, 但是我还是早早的醒来, 有些紧张, 入职恐惧症好像在我身上应验, 今日大概就是熟悉公司的规定和接见自己的导师, 还是有些期待的.

中午, 吃完饭休息之余, 写会博客. 早上总体而言是比较平稳的度过. 今天入职的, 包括我在内总共九个小伙伴, 五个运营岗, 四个技术岗, 不幸的是, 前端只有我一个人, 算是有点小失落; HR 学姐介绍了公司的制度和接下来一周的培训流程, 小伙伴们也互相介绍自己, 让我印象最深的那个就是说程序员很闷骚的那位 😄…\

下午, 花花姐详细讲述了如何从一个 学生 转换成 职场人, 包括一个职场人应该遵守的三从四德. 另外, 她还将到了关于内向和外向的看法, 其实我自己还是比较外向的, 但这局限于技术方面, 但是对于其它方面, 可能表现得并不是喜欢多说话, 这一点花花姐也是察觉到了, 所以在日后的学习和工作过程中, 还是应该和其它部门, 不同职能的同事多沟通、多了解.

2019-11-19


游戏终端设备的发展历程

  • 游戏机台(小霸王学习机)
  • PC 单机
  • PC 互联网
  • PC 云计算
  • 页游
  • 端游
  • 手游

终端的优劣

游戏机台

  • 需要显卡、手柄、电视或者其它的设备的支持

PC 单机 & 页游

  • 只需一台电脑和互联网, 较为方便
  • 适合上班族, 以及没有空闲时间的人

端游

手游

  • 2010 年, 手机大内存的存在, 使得对游戏的支持度大幅提高
  • 2008 往后, 随 4G 的发展, 手游随之发展

经典作品赏析

游戏机台

  • 超级玛丽
  • 俄罗斯方块
  • 三国战记

端游

  • 仙剑奇侠传系列

网游发展历程

  • 电脑行业 + 互联网行业 + 电信行业
  • 互联网 + 通信
  • 手机 + 4G

网游与用户

商业化溯源

用户渗透之路

  • 1995(传奇、奇迹)
  • 2000 ~ 2005(梦幻、大话)
  • 2005 ~ 2010(摩尔庄园、赛尔号、热血三国)
  • 2010 ~ 2019(4G 全国覆盖, 直接渗透小镇青年)(开心消消乐、刀塔传奇)

网游与中国经济

  • 诱导用户去形成一种消费习惯

习近平新时代的游戏

政策

  • 游戏监管(敏感词)
  • 价值观导向
  • 国内账号

用户变化

  • 审美从 成熟化年轻化 转变

体验与技术变革

  • AR 技术
  • 题材的多样化、命运歌颂

新方向概览

游戏人的基本素质 & 期望

  • 好奇心与求知欲
  • 十万个为什么, 提问深度

手游

发行常识

  • 研发商(产出产品)
  • 发行商(推广产品)
  • 运营商(推广产品)
  • 广告商

广告推广渠道

  • 腾讯系(QQ、微信)
  • 头条系(头条 APP、抖音、火山小视频)
  • 阿里系(淘宝、支付宝)

发行商类型

  • 产品研发
  • 独代
  • 自有用户
  • 海外市场

手游发行商核心价值

  • 产品评估
  • 产品优化
  • 游戏运营
  • 用户挖掘
  • 市场营销
  • 获取流量

我的使命分享报告

SLG 游戏概况

简单介绍

SLG 就是策略游戏, 排兵布阵、掠夺资源类

  • 个体户、上班族
  • 碎片化时间比较多, 不需要经常在线

游戏特性

  • 用户追求(社交存在感)
  • 用户特性(虚荣心)
  • 付费点(资源获取心态)
  • 游戏节奏(跨服, 长期)

品类介绍

游戏发展

未来的发展方向:

  • ARPG + SLG
  • FPS 的 SLG

简要分析

用户画像

策略选择

  1. 建筑养成(基本建筑、资源建筑)
  2. 兵种养成(基本兵种、进阶兵种)
  3. 攻击方式
  4. 多样化的玩法(六宫格、光环加成)

用户追求

  • 新系统随等级开放
  • 后期社交
  • 跨服玩法

职场建议

  • 确认目标(找好切入点, 构建任务清单)
  • 用好手段(多交流)
  • 做好复盘(积极审查过往经历)
  • 重新出发(适当调整心态)
  • 持久性

研发部功能

  • 游戏的版本迭代

(游戏)急速 60 秒

  • 良性竞争
  • 分工合作
  • 记忆锻炼
  • 清晰思路
  • 心理战术
  • 目标设定、拆解任务
  • 急于求成

如何写日志

  • 工作是什么
  • 学到了什么
  • 遇到了什么困难, 怎么解决的
  • 少点感情色彩

2019-11-20


平台部分享
星辰奇缘分享报告

星辰奇缘简单介绍

类型

  • MMORPG

用户群体

  • 学生、上班族

更快融入

如何快速的上手角色扮演类游戏?

  • 职业选择
    • 适合自己性格
    • 版本强势
  • 提高战力
  • 宠物
    • 输出型
    • 辅助型
    • 构建强势的宠物阵容
    • 提升宠物评分(角色评分)
  • 加入工会(保持活跃度)

游戏模式

卡级

社交

加入固定队伍, 可以在不上线的情况下, 让队友帮忙挂机

随时请教老玩家, 萌新光环

周五报告

  • 按照游戏从业者的角度来主体分析
    • 角色系统
    • 消费系统
  • 以玩家的角度去发现问题

介绍流程

  • 背景介绍
  • 分级介绍
  • 找玩法之间的联系

2019-11-22


今日进行了简短的游戏体验答辩, 意味着为期一周的集训基本结束, 在这一周, 提升了很多, 包括但不限于多个方面的提升:

  • 思考能力
  • 日志驱动总结能力
  • 任务切片能力

沉稳的思考

这是花花着重强调的一个点, 基本上每天的例会上都会提到. 我觉得作为一个开发者, 这是必须要具备的一个 基本能力.

拿以前来说, 我需要用 JS 去写一个插件, 那么我会分别从以下几个方面去构建:

  • 插件需求分析(需要实现什么功能采用何种构建方式)
  • 插件逻辑梳理(首先从使用者的角度出发, 使用文字的形式梳理每个功能点)
  • 代码书写
  • 提取可配置项(插件的核心, 所有可配置项必须是要用户去配置的)
  • 代码优化(提取一些公共方法、减少冗余)

而在花花的淳淳教导下, 我个人对于 思考 又有了更深层次的认识, 就如我下面要说的 程序思维理性思维.

程序思维 VS 理性思维

可能日常接触程序比较多, 所以不自觉地养成了一种程序化的惯性思维, 对于一件事情, 会按照程序的思路去思考和分析, 这就出现了一个很严重的问题, 那就是 半机械化. 这是我一直在极力规避的一个点. 那么, 在接受了集训之后, 我会去在 程序思维理性思维 中寻求一种平衡, 以更加理性化的思想去分析事物.

日志驱动总结

集训期间, 每晚都要写一份日志, 记录自己的心得体会, 这一点我是深有同感的, 在前端学习的过程中, 时刻保持写博客的习惯, 一个知识点、一篇总结、一篇配置经验, 都可以为博客所记录. 但是呢, 经过花花姐的教诲, 其实 工作日志读书笔记 两者是有细微差别的:

工作日志 VS 读书笔记

  • 工作日志偏向于纯的心得总结, 必须明确的告诉其他人, 你的日志的重点是什么, 没有人有闲时间去看一大篇废话
  • 读书笔记则可以多一些自己的情感发挥, 不会有那么多的局限性

合理任务切片

在集训前, 我会通过一些任务管理工具, 比如 Microsoft Todo番茄时钟等, 来逐步规划我的学习、生活、娱乐计划.

但是呢, 集训之后, 我对于此的理解又加深了一些:

工作任务更加细致

工作流程和自己平时的学习流程不太一样, 前者较为繁琐(细微化), 所以就需要将工作任务拆分为更加小的粒度, 就像 Fiber 一样, React 团队将其作为一个任务单元, 在每一帧的的空闲时间(requestIdleCallback)去更新应用, 这样做的优势在于, 在某个环节受阻的时候, 可以先跳过其进行下面的区块, 节省时间.

最后, 我想说的是, 很开心认识了其它八位小伙伴, 一起加油!

2019-11-25


正式到岗实习第一天, 今天任务不多, 在俊哥有条不紊的安排下持续进行. 但是, 有两个点还是需要记录一下:

  • 关于及时回复
  • 关于快速适应环境

及时回复

收到通知, 请及时回复

今天收到了很多的部门业务通知, 但是自己并没有一一回复确认, 花花也强调了这一点. 个人觉得, 回复别人的通知, 是对其最起码的尊重, 所以在日后, 会更加注重这一点.

快速适应环境

今天, 阅读了我们前端团队的 规范文档, 一时间竟有些难以适从. 回想之前, 都是独立开发, 单打独斗, 按照自己的套路来.

但是企业不一样, 它有自己的开发规范, 你要去积极适应它, 当然也不是一蹴而就, 并不是看一遍, 就说我懂了. 需要在后续的开发中强化理解.

2019-11-26


今天主要是配置 Git 相关, 第一次在单机上配置多个 Git 账号、多个 Git 服务器, 期间遇到了很多坑, 统统记录在了博客:

期间, 看到了我们团队以前的项目, 发现一个点: 大多数的 commit 记录很简单, 都是短短的一句 update, 并且中英文混用.

这对于自己团队来说是可以的, 但是对于其它组的人来说, 完全是个噩梦. 包括我自己看代码, 也会去浏览一下 commit 记录, 了解一下项目的大致走向.

2019-11-27


今天的两个任务:

  • 了解团队项目规范
  • 配置 hexo 多终端同步

团队项目规范

看了团队最近的一个项目: sj-20190514-plat, 对于一些开发规范, 有了简单的了解, 包括:

  • 目录划分、文件命名规范
  • 组件命名规范
  • 代码格式(prettier + ESlint)

其中, 有一些是与自己的代码风格截然不同的, 这也就需要我尽快去适应.

hexo 多端同步配置

由于想在公司的电脑上更新博客, 但是 hexo 的源配置文件都在自己的笔记本上, 所以需要去做一些手脚, 便于在不同的终端上无缝同步.

期间遇到的坑挺多的, 花了点时间总结在了博客:

2019-11-28


今天的任务还是阅读前端 PMTech 组的项目, 这里记录两个知识点:

  • git-flow
  • git rebase 和 git merge

git-flow 简单梳理

以前未有耳闻的一个知识点, 看了下 官方文档 对其的解释, 其实就是一个 自动化的工作流.

个人理解, 其和 vue-clicreate-react-app 的性质有些相似, 都是通过封装基础的 command, 使得开发者可以很方便的管理项目. 当然, 对规范整个团队的 git 操作, 有很大作用.

记录下 git-flow 的几个分支:

  • master
  • develop(开发分支, 保持最新的提交)
  • feature/(功能分支, 合并到 develop)
  • release/(发布分支, 创建发布标签)

其和 git 命令的对应关系(简单画了个脑图, 更好梳理):

git_flow命令和git的对应关系

git rebase VS git merge

这两个命令真是困扰了我大学两年多, 平时用的多的是 git merge, 但是对于 git rebase 并没有过多了解, 今天看到了掘金大佬的文章:

写了一个简单的 demo, 有了一个浅显的了解:

  • git rebase 可以实现 git merge 的功能, 也可以通过 git rebase -i 命令, 合并多个 commit, 避免 commit 冗余, 这一点我深有感触, 我自己的项目也是存在过多的 commit, 导致 review 时非常麻烦
  • 最重要的一点, git rebase 可以去除比如 Merge branch feature-2019-11-24 into branch/dev 的无用提交记录, 表示深受其害——我的 ts-utility-plugins 项目, 充斥着多余的 Merge branch..., 看起来很难受

2019-11-29


今天定了两个计划:

  • 玩星辰奇缘
  • 学习 vue

星辰奇缘

  1. 快速升级的新途径

今天分配多了些时间去玩《星辰奇缘》, 发现了一个 快速升级 的方法——工会任务.

在集训周期间, 因为剧情任务的需要, 加入了一个比较活跃的工会, 会长制定了一系列的考核目标, 很不幸, 由于考核不达标, 所以被无情的踢出了工会. 今天在 日程 面板发现了这一任务, 舒舒服服.

  1. 不能看到 NPC 的血量

这算是一个设计缺陷吧, 在对战的时候, 敌方 NPC 的血量经常会无法显示, 用户体验贼差. 比如我的 狂剑 角色, 想手动选择一个技能, 并且这个技能是根据敌方的血量多少来选择的, 这时就很尴尬.

  1. 趣味玩法——知识问答

在相对于比较单调的 MMO 游戏中加入多样化的元素, 比如我今天无意间玩过的知识问答环节, 可以激起 学生 玩家群体的答题心理, 并且题目的类型保持多元化. 另外, 我有一个小建议:

  • 答错继续机制
    • 就比如说, 我答错了一道题, 这时系统可以提示我: “需要花费宝石来获得本题的奖励?”, 因为等级提升, 到了后面是很难的. 所以玩家肯定会抓住一切升级的机会, 进而产生消费行为

学习 vue

vue 相对来说, 还是比较容易上手的, 在看 鉴华 同学的项目的时候, 发现一个迷糊的知识点:

关于 vuex 的 mutation 和 action

通过阅读掘金大佬的文章: dispatch 和 commit 来调用 mutations 的区别, 了解到——vuex 规定必须由 mutation 改变 state, 而:

  • mutation 约定俗成的被用来执行同步的更新 state 操作
  • action 则执行一个异步任务, 等到该异步任务 resolve 的时候, 自动调用 mutation, 去更新 state

关于衍生出来的 commit 和 dispatch

  • 关于 dispatch, 想了下, 其实它与 redux 的思想很相似, 也是 dispatch 一个 action, 有一点不同的是, 它规定了只能作用于异步 action
  • 而, commit, 则用来触发 mutation, 也就是同步任务

2019-12-2


今日任务:

  • vue 实践项目接收
  • 继续玩《星辰奇缘》

vue 实践项目

项目背景

仿 墨刀 的动效区块, 实现一个 Vue 组件, 要求:

  • 不能使用第三方 UI 组件库
  • 可以使用 Vue 脚手架
  • 兼容主流浏览器即可
  • 对外暴露出实例方法(instance.output(options)), 输出 CSS 样式代码

环境搭建(prettier、vscode、eslint)

vscode 配置 prettier + eslint, 中途遇到一个严重的问题, 暂未解决——如果在 vscode 中配置了 "eslint.autoFixOnSave": false 项, 并且安装了 vetur 插件, 两者会产生冲突, 暂定的计划是采用手动格式化(右键 + 格式化)

今日完成

今日完成 环境的搭建基本的布局, 项目地址:

https://github.com/ddzy/vue-3k-demo-modao/tree/branch/dev

明日计划

学习了解 vue 的组件封装, 封装 animationType dialog 组件, 见: https://github.com/ddzy/vue-3k-demo-modao/blob/branch/dev/CHANGELOG.md

星辰奇缘今日体验

宠物终于在今日升到 60 级, 貌似是最高等级, 出现了一个很尴尬的问题:

  • 宠物和角色的等级不能相差 >= 5, 否则宠物经验会停止获取

我想, 这可能是另外一种刺激消费的方式, 因为在升到 55 级左右, 我已经明显感受到了等级提升的困难(PS: 在简短的游戏时间段内), 此时我可能就需要氪金, 去购买经验书提升等级…

2019-12-3


今日份任务:

  • vue 墨刀 demo
  • 星辰奇缘体验

墨刀 demo

  1. 今日完成

封装基础的 BaseSelectToolTip 组件, 并将其与 Config 组件的每一项结合, 通过通用组件的封装, 对于一下几个知识点加以应用:

  • 兄弟组件传值
    • 我参照 React 的形式, 使用父组件来管理公共状态, 但是需要在父组件中定义大量状态, 这种方式我个人觉得比较容易想到, 其实还有其它方式, 有待深入体会
  • slot 应用
    • 可以通过 slot 的 name 属性, 来指定其挂载的位置
  • props 命名规范
    • .vue 父组件中, 驼峰 形式的 props 需要转换为 连字符 形式传递
  1. 代码链接

https://github.com/ddzy/vue-3k-demo-modao/commits/branch/dev

  1. 明日计划
  • 实现动画预览

星辰奇缘

今日花费了 两万 多金币去学习宠物的新技能, 之前并不知道技能是需要手动学习的. 对于雪狐来说, 由于其强大的群攻效果, 所以我果断学习了价格适中并且魔法伤害显著的巨刺藤曼, 更多的特性需要慢慢发掘.

2019-12-4


今日任务概览:

  • 继续完成 vue 的墨刀 demo

今日完成

昨天将 ConfigPreview 组件的结构写好, 今日结合动画的配置项, 实现了动画即时预览功能, 中途遇到了几个问题:

  • vue 的 transition 组件
    • 由于动画类型需要动态配置, 所以需要动态改变 transition 组件的 enterActiveClass, 起初依照普通的 class 来设置数组类型的类名, 但是报错, 所以将其放入 state 管理
  • 切换配置区块的动画类型项(activityType), 预览试图无法重新渲染
    • 正常情况下的过渡效果, 都是用户点击某个按钮, 通过 单个变量 + v-if 来判断是否渲染组件, 但是今天使用这种方式, 发现视图并不能正常渲染, 所以我将其中一步切换操作放入 $nextTick 中, 进行异步渲染, 解决了这个问题(代码参考)
  • 动画只执行一次
    • 预览区动画只执行一次, 设置 animation-iteration-count 属性无效, 经摸索, 原来是首次动画执行完成之后, 自动去除了 animation-name 属性, 将其追加到过渡元素的样式上即可(代码参考)

源码链接

https://github.com/ddzy/vue-3k-demo-modao/commits/branch/dev

明日计划

  • 细节完善
    • 布局样式, 做到与墨刀基本贴合
  • 主流浏览器兼容处理

2019-12-5


今日任务:

  • 墨刀组件完善

今日完成

接着昨天的进度, 今天主要是依据墨刀的组件样式, 继续完善项目, 包括样式逻辑细节等, 确保完全贴合.

踩坑处理

  1. 动态计算 tooltip 弹出位置

解决办法: 比对 输入框中的值弹出框中的每一项 的文本值是否相等, 来计算弹出框的位置. 但是存在一个问题:

多个弹出框都位于页面上(都会被初始化渲染, 只是通过 display: none/block 来切换), 这就导致使用 document.querySelectorAll 会获取到所有的条目, 进而导致位置计算异常, 考虑使用 v-if 解决.

使用 v-if 会导致弹出框的位置计算失效, 解决方法是: 将输入框的值通过 props 传递进 tooltip 组件, 便于比对.

  1. 通过 :value 绑定值, 但是无法让输入框与父组件同步

解决办法: 使用 v-model 来代替

  1. Firefox 下, 父元素设置了 display: flex, 子元素填充宽度异常

解决办法: 给每个子元素指定固定的 width 即可.

  1. IE 不兼容 Vue-cli@4

解决办法: 等待官方处理-issue

代码地址

https://github.com/ddzy/vue-3k-demo-modao/tree/branch/dev

2019-12-6


今日任务:

  • 完善墨刀项目
  • 初步接触 PM 组的活动项目

墨刀项目

gitlab 项目迁移

  1. 踩坑处理

今天想将 github 的项目迁移到 gitlab 的 group, 需要在 group 下创建一个仓库, 但是始终无法成功.

解决方法: 最终发现是权限问题, group 的 owner 只分配给了我 developer 权限, 查了下, 其实 gitlab 有五种权限(owner、master、developer、reporter、guest), 而只有 master+ 权限才可以创建仓库.

  1. 代码地址

https://github.com/ddzy/vue-3k-demo-modao/tree/master

PM 组活动项目

  1. 项目流程梳理
  • 获取设计稿(PSD + Azure 网页版)
    • PSD 主要用来切图, 获取图片素材, 能用图代替的尽量用图片代替, 少写布局
    • Azure 用来查看项目的大致结果, 不过比较粗糙, 还是以 PSD 为准
  • 查看 PSD, photoshop + pxcook 切图, 标注页面的模块位置、结构信息
  • 初步构建页面布局
  • 与后台联调
  1. 项目踩坑

暂无, 今天主要熟悉了 pxcook 等工具的用法, 等开发项目时在做总结.

2019-12-7


昨天收到俊哥的年会任务安排, 这是第一次真正的接触到业务项目. 所以格外重视, 今天来到公司, 想了解一下各种前端工具的使用, 但是和一凡, 另外一个校招小伙伴聊了一下午的天, 计划赶不上变化, 只能推迟计划.

2019-12-9


今日实习任务:

  • 跟进业务项目

业务项目实战

  1. 前言

距正式到岗实习已经过了两周, 这周开始接触团队的业务项目, 今天俊哥安排我来参与年会项目的开发, 初次接触正式的开发流程, 面对突如其来的各种 开发工具规范要点 等, 竟有些难以适从, 将几个重要的点记录下来:

  • photoshop
    • 按住 Ctrl 键, 可多选图层并同时切取
    • 按住 Ctrl 键, 选中 n 个图层, 接着按住 Ctrl + E, 可以合并图层, 避免繁杂的 css 样式书写
    • 如果只需要切位于可视区域的图层, 使用 选区 工具, 再选中需要的图层, 按下 Ctrl + J 复制图层后再切取(PS: 鉴华小伙伴帮了大忙)
  • pxcook
    • 在开发模式下, 按住 空格 + 鼠标左键, 可以拖动设计稿, 避免来回切换手型按钮的尴尬
  • css
    • 文字渐变效果, 可使用 Webkit 渲染引擎所支持的 background-image: -webkit-gradient 属性, 结合 -webkit-background-clip: text-webkit-text-fill-color: transparent 来实现
  • 移动端
    • 微信浏览器顶部有个大约 40px 高度的 titleBar, 需要做特定的兼容处理(PS: 采用内网 + qrcode的方式, 可以使用扫一扫功能在微信浏览器上预览)
  1. 今日完成
  • 评优页面一的基本页面布局和终端适配
  1. 明日计划
  • 完成评优页面二的布局和兼容
  • 实现页面保存为图片的功能

2019-12-10


今日日志汇总:

  • 继续完善业务项目

业务项目

  1. 今日完成

接着昨天的任务规划, 今天主要完成评优二的布局工作, 但是在 video 和长按保存图片部分遇到了一些坑点

  1. 踩坑记录
  • [移动端视频问题]: 通过 video 标签插入的视频, 在 Chrome 中黑屏, 在 iOS 微信浏览器上无法显示
    • 某些 url 的视频可以显示, 但是大多数都不行, 推测是跨域的问题
  • [移动端视频问题]: 微信浏览器的 video 会浮动于容器上方
    • X5 内核搞的鬼, 根据文档, 在 video 标签中声明 x5-video-player-type: "h5" 即可
  • [知识点-移动端 web 的载体]: 在 PC 端, H5 页面的载体是诸如 Chrome、Safari 等浏览器, 但是在移动端, 则有几种形式:
    • 一般浏览器
    • Hybrid App 的内嵌页面
    • 手机自带浏览器
  1. 明日计划
  • 完成长按存图

2019-12-11


今日实习计划:

  • 继续完成业务项目
  • 移动端知识汇总博客创作

业务项目

  1. 昨日补充

昨天的日志总结中提到了几个比较重要的问题:

  • video 在微信 iOS 端的问题
  • 移动端 web 的载体

今天花了些时间, 写了几篇博客分别记录这些问题:

  1. 今日完成
  • 微信浏览器长按保存图片功能
  1. 明日计划
  • 看本项目其它模块的代码, 熟悉 hd 类项目的结构

移动端汇总博客

由于在接触业务项目之前, 并没有真正的移动端开发经验, 对于移动端的各种兼容问题、基本知识点了解的不是很多, 故将接触到的, 全部汇总于博客中:

2019-12-12


今日学习计划:

  • 改进业务项目代码
  • 更新个人 Github 项目

业务项目代码改进

  1. 前言

今天在组内大佬的 Code Review 下, 发现昨天写的代码存在一定的问题, 比如 CSS 的大小数值不严谨.

  1. 今日完成
  • 改进 CSS 样式和组件的代码结构规范, 必须保证严谨性, 每一个样式都要严格按照 pxcook 来定义
  • 移除多余的无用文件夹和文件
  1. 踩坑总结
  • git 删除 origin 仓库的多路径文件
    • 原本使用比较熟悉的 git rm -r --cached xxx 来删除, 但是发现并不能删除, 进而采用 git filter-branch --force --index-filter 'git rm -r --cached --ignore-unmatch public/photos' --prune-empty --tag-name-filter cat -- --all 命令来实现
    • 但是出现 fatal: bad revision 'rm' 错误, 原因是 windows 系统下必须要使用双引号
  • 强制推送到 Gitlab 报错: remote: GitLab: You are not allowed to force push code to a protected branch on this project
    • 原因是 master 分支处于 protected 状态
  1. 明日计划
  • 查看本项目其它模块的代码, 深入了解每个代码区块的功能

更新个人 Github 项目

近半个月没有更新自己项目的代码了, 今天主要更新两个仓库:

  • fe-necessary-book: 添加新的国内优质程序员交流社区-Gitchat, 摸鱼无意发现的
  • ts-utility-plugins: utility/object 下新增类 lodash 的 forOwn 方法, 遍历对象的自身属性

2019-12-13


今日任务概览:

  • 新的业务项目
  • 知识点总结
  • 明日计划

新的业务项目

  • 第八神谕独立游戏官网(移动端)

知识点总结

  1. 昨日复盘

昨天在改良业务项目结构的过程中, 遇到了两个问题:

  • 删除 origin 仓库的多路径下的文件夹(git filter-branch --force ...)
  • 强制推送到 Gitlab 报错(remote: GitLab: You are not allowed to force push code to a protected branch on this project)

今天将其归纳到博客: git 常用命令集锦 中, 便于后续的参考.

  1. Photoshop 技巧
  • 直接自定义选区 + 复制图层(Ctrl + J) + 切取一个图层组, 会导致所有的图层都被切到, 很尴尬
    • 选中图层组 -> 复制图层组(Ctrl + J) -> 右键 -> 合并组 -> 在生成的新图层上进行上述的操作即可
  • 视图 -> 新建参考线 -> 选区 -> 可以将大的活动页面模块划分切图
  • 上述第二步骤会出现无法新建图层的问题, 先用选区工具选取后, 再点击裁剪工具, 选中 基于参考线的切片 选项卡, 可以看到按照参考线被分为了几个区块, 接着按 Ctrl + Shift + Alt + S 即可保存为 web 格式的多张图片文件夹

明日计划

  • 新的博客文章: Photoshop 常用操作集锦
  • 完善业务项目

2019-12-14


今日学习任务:

-第八神谕移动端官网项目

photoshop 踩坑

  • 矩形选区 + Ctrl + N + Ctrl + V, 避免切的图层不存在
  • 去除所有的参考线
    • 视图 -> 显示 -> 取消勾选参考线
  • 去除所有的切片标记
    • 视图 -> 显示 -> 取消勾选切片
  • 参考线分片之后, pxcook 并不能检测出自己定义的每一块, 需要根据 图片的大小 / 100, 来计算 height

明日计划

  • 写博客: 总结 photoshop 的技巧

2019-12-16


今日实习任务:

  • 博客总结 photoshop 技巧
  • 完成 & 对接第八神谕移动端官网
  • 完成年会评优的剩余需求

博客总结

初次接触 ps, 对于一系列的操作和坑点, 在上周的几篇日志中都有记录到, 今天将其统统糅合在一起, 归纳到博客——切图修炼之道 中.

[开发任务]-第八神谕

总结

  • 独立游戏需要与后端商讨, 返回不同类型的 module 字段

[开发任务]-年会评优

总结

  • 禁止微信分享链接 & 分享到朋友圈
    • 页面挂载完成之后, 将 URL 中的用户 id 字段替换掉即可, 但是要注意, 使用 location.href 会二次刷新页面, 故使用 history.pushState 代替
  • 打包前端项目
    • 打包时, 报错: Error: EINVAL: invalid argument(-4071)
    • 指定路径中存在未识别的特殊字符, 比如 \n, 将其替换掉即可. 比如我使用了 const branch = c.execSync('git branch --show-current',{encoding:'utf-8'}); 来获取分支的名称, 但是返回的值是类似于 wap\n 的字符串, 导致了错误的发生, 通过 branch.replace(/\s+/g, '') 命令, 将其去掉即可
  • 丢到指定仓库
    • 使用 git clone -b xxx https://xxx.com/xx.git 来 clone 指定分支

2019-12-17


🌴 今日任务 🌴:

  • 第八神谕提交测试

第八神谕

  1. 踩坑总结

提交至测试服后出现了几个 BUG:

  • [iOS 系统问题]: video 视频在 Chrome 和 Safari 上不能自动播放
    • 起初, 我给 video 添加 muted 属性, 也就是静音后才能自动播放, 但是微信浏览器中不起作用]
    • 接着, 我观察到问题所在, 存放 video 的组件不能卸载(使用 v-show 代替 v-if), 因为 WeixinJSBridgeReady 事件只触发一次, 在 WeixinJSBridgeReady 事件内部手动触发 video.play() 方法, 并且需要时刻监听 video 弹出层的显隐状态, 手动开始播放(PS: 弹出层在 display: none 的状态下, 其内部的视频会停止播放)
  • [iOS 系统问题]: position: fixed 的元素, 在 UC 浏览器上会出现 1px 的间距
    • 解决方法: 为 fixed 状态的元素设置 margin-top: -1px, 用外边距填充
  • [移动端问题]: video.play 报错——Uncaught (in promise) DOMException
    • 解决方法: Chrome、Safari 会返回一个 Promise, UC 会返回 undefined, 所以需要分别判断处理
  • [移动端问题]: UC 浏览器无法自动播放视频
    • 取消之前的 autoplay 自动播放策略, 在组件挂载之后模拟一次点击, 但是在首次刷新时, 会出现弹窗并消失, 给定一个 isFirstlyMounted 变量来标识是否首次加载, 将 mask 和 video 的 opacity: 0
  1. 今日 CHANGELOG
    d
  1. 明日计划
  • 将今日踩到的坑总结至博客中

2019-12-18


🚩 今日任务规划 🚩:

  • 第八神谕完善需求

第八神谕

  1. 昨日回顾

昨天解决了一部分本项目在 iOS、Android 真机上存在的问题:

  • video 自动播放问题
  • iOS UC 浏览器 1px 间距问题
  • video.play() 方法的返回值问题

但是在提交给测试后, 发现还有一个细微的 BUG, 那就是, 在 iOS 真机上, position: fixed 的元素会出现各种各样的问题, 比如:

  • 边缘滑动时, 滚动区域会遮挡 fixed 元素
  • iOS12 下, 双击图片元素, 页面会放大
  1. 踩坑总结
  1. 今日 CHANGELOG

http://git.3k.com/web/PM/dl-20191213-d8sy/commits/wap

  1. 明日计划
  • 更新博客, 总结最近遇到的坑点

2019-12-19


⛑ 今日任务概述 ⛑:

  • 第八神谕改需求
  • 总结博客

第八神谕

  1. 今日总结
  • 和’老板’(产品)的沟通之道
    • 适当在页面上添加一些动画效果
    • 可以预设多种结果, 让产品来挑选, 不然等到交付的时候, 又提了一堆新需求, 说不定还要重写代码
  1. 踩坑处理
  1. 今日 CHANGELOG

http://git.3k.com/web/PM/dl-20191213-d8sy/commits/wap

总结博客

把前两天遇到的问题, 做个整体总结:

2019-12-20


📃 今日任务概览 📃:

  • 第八神谕交付上线
  • 年会评优细节处理
  • 更新个人仓库

第八神谕

此处无字胜有字

年会评优

  1. 细节处理
  • iphonex 下, html2canvas 截图出现白边, 但是 iPhone7 正常
    • 问题来源: 问题出在某两张背景图片上, 由于直接给 div 设置了 background-image, 但是具体的原因可能是由于 html2canvas 的渲染机制有关
    • 解决方式: 使用 img 标签代替背景图片的方式
  • 微信浏览器禁止分享 & 复制链接
    • 解决方式: 通过微信浏览器提供的 js 桥接事件——WeixinJSBridgeReady, 来隐藏分享和复制链接按钮
  1. 今日 CHANGELOG

http://git.3k.com/web/PM/hd-20191206-nianhui-prize/commits/develop

个人 github 更新

  1. blog
  • git 常用命令集合
    • 使用 git tag newTagName oldTagNamegit tag -d oldTagName 来重命名旧的标签, 但是需要注意, 这种方式不能更改已经推送到 origin 仓库的 tag
  1. ts-utility-plugins
  • 新增 zip 工具方法, 旨在模拟 lodash.zip 方法, 提取二维数组每项的同位置的值
  • 发布 v1.1 版本

2019-12-23


⛑ 今日任务概述 ⛑:

  • 年会活动 BUG 修复
  • 第八神谕代码优化
  • 阅读业务 SDK 项目源码
  • 更新个人 Github 项目

年会活动

  1. 今日修复
  • 修复 prize_name 字段未显示的问题
    • 起初以为这是一个常量, 所以并没有想到用后台数据加以渲染, 是自己的一个判断失误, 并且没有及时和后端沟通, 个人失误, 吃一堑长一智.
  • 文字渐变
    • mask
      • 会忽略自定义的颜色
    • background-clip
      • html2canvas 截图会出现完整的背景
    • svg
  1. 今日 CHANGELOG

http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/master/CHANGELOG.md#2019-12-23

第八神谕

  1. 今日修复
  • 完善代码注释, 增强代码可读性
  1. 今日 CHANGELOG

http://git.3k.com/web/PM/dl-20191213-d8sy/blob/master/CHANGELOG.md#2019-12-23

H5SDK 项目

  1. 任务概述

对于 SDK 项目有一个初识, 对这一块还是很陌生的.

  1. 知识点总结
  • 游戏研发、发行、渠道的异同
    • 研发: 也就是由游戏程序员开发, 负责整个游戏模块的构建
    • 发行: 包括运营、评测、数据分析、策划等多个步骤, 每一步都是紧密不可分的; 也可以说发行就是决定了一款游戏的命运
    • 渠道: 简单来说, 就是下载平台, 比如: iOS 上的 App Store、Android 上的 Taptap、360 软件管家、小米商店等

个人项目

  1. fe-necessary-book

2019-12-24


今日任务概览:

  • 年会活动优化
  • 接受新项目(古今江湖联合活动)

年会活动

  1. 知识点回顾
  • sessionStorage
    • 会话存储, 与 localStorage 最大的区别在于生命周期, 会随当前标签页关闭而消失, 可用来记录页面上次的滚动位置
  • 微信的分享问题
    • 由于微信提供了多种分享策略: webview 复制链接、webview 分享到朋友圈、公众号推送消息分享, 所以要做禁止分享的话, 需要考虑这几种情况, 做不同的权限处理
  1. 今日 CHANGELOG

http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/develop/CHANGELOG.md#2019-12-24

古今江湖

  1. 今日 CHANGELOG

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

  1. 明日任务
  • 构建页面布局

2019-12-25


今日任务概述:

  • 古今江湖联合官网

古今江湖

  1. 今日踩坑
  • 手机扫码无法预览
    • 电脑与手机不在同一个 IP 下, 修改项目的 config.js 的 host 配置项, 将其修改为本机 ip 地址即可
  • Chrome 手机调试预览出现白边, 但是手机显示正常
    • 浏览器的默认样式, 使用 reset.css 重置一下即可
  • [swiper]: swiper 自定义分页器
  • [swiper]: Error in mounted hook: “TypeError: Cannot read property ‘classList’ of undefined”
    • 出现原因: loop = true 时会出现这个问题
    • 解决方式: 将其删掉即可, 但是会违反需求, 更新 swiper 的版本(4.4.6)即可
  • [swiper]: 在 vue 的 mounted 生命周期中初始化 swiper, 出现滚动错位
    • 使用 setTimeout 即可
  • [swiper]: 自定义 pagination 后, 无法点击切换
    • 给每个 pagination 项绑定点击事件, 通过每一项的 index, 调用 swiper.slideToLoop(index), 来手动控制滑动
  • 雪碧图制作
  • [swiper]: this.activeIndex 和 this.realIndex 的异同
    • 两者的区别主要在于是否处于 loop 模式下, 前者返回当前激活的 slider 在所有的 slider 中的位置, 包括复制的 slider, 而 relIndex 则返回原始的位置
  1. 今日 CHANGELOG

http://git.3k.com/web/PM/dl-20191223-gjjh-lhhd/commits/develop

2019-12-26


📃 今日任务 📃:

  • 年会评优细节优化
  • 古今江湖联合官网

年会评优

  1. 今日坑点
  • [其它]: 根据手机屏幕的可视区域高度, 动态计算内容区的高度
    • getBoundingRect()
  1. 今日 CHANGELOG

http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/develop/CHANGELOG.md

古今江湖

  1. 今日坑点
  • [其它]: 对应动态的背景图片或者小图标, 可以采用雪碧图
  • [Vue]: 使用 v-for 遍历数组, 渲染 component
    • vue 默认会将所有数据渲染成字符串形式, 动态组件也一样, 在使用 v-for 遍历的时候, 使用 :is 属性即可
  • [移动端]: margin 塌陷
  1. 今日 CHANGELOG

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

2019-12-27


🚧 今日任务概述 🚧:

  • 古今江湖联合官网

古今江湖

  1. 踩坑宝典

[微信浏览器]: a 标签锚点跳转, 底部产生白条

微信底部的白条真的很烦人, 使用传统的 a href="#id" 会产生 history 历史, 导致白条的出现, 所以使用 element.scrollIntoView 代替

[技巧]: vue 限制输入框只能输入数字

[iOS]: 弹起的键盘关闭后, 页面底部空白, 空白的高度为键盘的高度

监听输入框失去焦点, 使用 window.scrollTo(0, 0) 调整位置即可

1
2
3
handleVCodePhoneBlur() {
window.scrollTo(0, 0)
}

但是当当前可视区有多个输入框, 从当前输入框 blur, 跳到另一个输入框, 会出现页面跳动的问题, 解决办法是标识一个变量

  1. 今日 CHANGELOG

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

2019-12-28


✈今日任务概览✈:

  • 古今江湖融合活动官网

古今江湖

  1. 知识点总结
  • [vue]: 通过 this._vm 在 vuex 中访问当前 vue 实例
  • [chrome]: 巧计查看后端返回的 json 数据
    • 控制台打印后, 右键 -> Save as global variable -> copy(variable) -> JSON View
  1. 踩坑秘籍

iOS 下不能手动调用 input.focus 方法

项目中, 想通过 watch 一个变量, 根据该变量的值来手动决定输入框是否获得焦点:

1
2
3
4
5
6
7
8
export default {
watch: {
isBtnDisabled(v) {
// iOS 浏览器均失效
this.$refs.input.focus();
},
},
};

但是 iOS 环境下, 均不起作用, 故采取 addEventListener 绑定事件的方式来解决

  1. 今日更新

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

2019-12-29


🚦今日任务🚦:

  • 古今江湖融合活动官网

古今江湖

  1. 知识点总结

[css]: 使用 word-break: break-all 来强制断句, 让长文本换行

  1. 踩坑秘籍

[UC浏览器]: 通过 scrollIntoView 跳转至指定区块后, 页面白屏, 触摸屏幕后才显示

UC 浏览器对于 element.scrollIntoView 的兼容性并不是很好, 故采用原始的 a 标签锚点跳转的方式.

[Clipboard]: 页面首次挂载, 需要点击两次按钮才能复制文本

使用 vue-clipboard2 代替即可

[iOS]: 手动调用 input.focus(), 或者 input.blur(), 不起作用

这是由于 iOS 自身的安全策略引起的, 必须由用户的动作才能触发输入框, 弹起键盘.

我的解决办法是, 在页面添加一个空的 div 元素, 给其添加点击事件, 在需要的时候, 手动调用其 click() 方法即可

1
2
3
4
<input id="nameInput" ref="nameInputRef" />

<!-- 虚拟元素 -->
<div id="dummy" ref="dummyRef"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default {
mounted() {
const $input = this.$refs.nameInputRef;
const $dummy = this.$refs.dummyRef;

// iOS 下无效
// $input.focus();
// $input.blur();

// 解决方式
$dummy.click();

$dummy.addEventListener('click', () => {
$input.focus();
$input.blur();
});
},
};
  1. 今日更新

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

2019-12-30


🥗今日任务概述🥗:

  • 古今江湖联合活动官网
  • 年会评优

古今江湖

  1. 今日完成
  • 完成埋点需求
  • 解决冲突(志哥细节优化)
  • 页面相关文案修改
  • 需求优化
  1. 知识点总结

熟记于心

  1. 踩坑总结
  • 对于有特殊位置需求的元素, 应该动态计算其位置信息
  1. 今日 CHANGELOG

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

年会评优

  1. 今日优化
  • 完成视频的全屏播放功能
  1. 今日踩坑

[QQ浏览器]: video 第一次播放结束时会黑屏, 无法重复播放

监听 video 的 ended 事件, 等待其播放结束之后, 动态替换新的 src, 顺便吐槽一句, QQ 浏览器真的反人类.

  1. 今日 CHANGELOG

http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/develop/CHANGELOG.md

2019-12-31


⛱今日日志概览⛱:

  • 年会评优项目
  • 古今江湖项目
  • 个人博客更新

年会评优

  1. 今日踩坑
  1. 今日知识点

getBoundingRect 的妙用

见下方

  1. 今日 CHANGELOG

http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/develop/CHANGELOG.md

古今江湖

  1. 今日踩坑

[swiper]: swiper 开启 loop 模式后, swiper 内部的元素会出现无法点击的情况

问题原因: loop 为 true 时, swiper 会复制多个 swiper, 但是 swiper 内部元素绑定的事件并不会被复制, 故点击事件不会触发

解决方法: 直接给 swiper 容器添加 swiper-no-swiping, 禁止用户滑动, 如果需求强制要求的话, 在 swiper 提供的统一事件绑定对象里面, 使用 click 绑定器..

[swiper]: swiper 禁止外层滑动效果(类似tab切换), 内层如果有嵌套的 swiper, 内部的 swiper 会停止滑动

问题原因: 给父级 swiper 设置了 swiper-no-swiping 类名, 禁止其滑动, 但是其内部嵌套的子 swiper 也会停止滑动.

解决方式: 使用 detachEvents() 解决

1
2
3
4
const $swiper = new Swiper('.swiper-container', {

});
$swiper.detachEvents();
  1. 今日知识点

getBoundingRect 的妙用

项目中多次使用到了 getBoundingRect 这个 API, 它的作用是获取其上下左右四条边到屏幕视口的距离, 比如一个宽高都为 100 的盒子, 它位于页面的左上角, 那么它的 getBoundingRect 的值是这样的(不考虑默认边距的问题):

1
<div id="wrapper"></div>
1
2
3
4
5
const $wrapper = document.querySelector('#wrapper');
const wrapperRect = $wrapper.getBoundingRect();

// { top: 0, bottom: 100, left: 0, right: 100 }
console.log(wrapperRect);

而在项目中, 有一些特殊的需求, 需要根据不同长度尺寸的屏幕, 动态计算某个元素的位置, 就需要结合该元素的 getBoundingRect, 通过简单的算法, 做一个边界处理, 得到最终位置.

  1. 今日 CHANGELOG

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

博客更新

2020-1-2


今日任务:

  • 头铁主公玩家站(新任务)
  • 更新博客

头铁主公玩家站

  1. 今日踩坑

[vue-router]: 提示 Navigating to current location (“/news”) is not allowed

新的项目需要使用到 vue-router 作路由跳转, 由于想自定义导航的样式, 所以不想采用 vue-router 提供的 router-link 组件, 使用自定义的 a 标签来代替:

1
2
3
4
<a
href="javascript:void(0)"
@click="handleTriggerBtnClick($event, 'news')"
></a>
1
2
3
4
5
6
7
8
export default {
methods: {
handleTriggerBtnClick(_, type) {
// 多次点击同一链接会报错
this.$router.push(`/${type}`);
}
},
};

但是上面的方式会报错: Navigating to current location ("/news") is not allowed, 所以还是采用 router-link.

  1. 今日 CHANGELOG

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

博客更新

2019-1-3


🎭今日实习任务🎭:

  • 头铁主公玩家站
  • 年会评优

头铁主公

1. 今日踩坑

[less]: less 会将 ‘/‘ 符号识别并做除法运算

项目中有个特殊多边形的需求, 想使用 border-radius 来绘制, 但是在使用的过程中发现了一个严重的问题:

1
<div></div>
1
2
3
div {
border-radius: 0 10px 0 0 / 0 10px 0 0;
}

上述的方法, 在浏览器中预览的时候, 发现会报错, 提示: 0 不能做被除数, 也就是说, less 将 / 识别为除法运算. 几经周折, 找到了解决办法:

1
2
3
div {
border-radius: ~"0 10px 0 0 / 0 10px 0 0";
}

使用 ~ 将属性值包裹为字符串, 这样 less 编译器就将其看作普通的字符串了.

2. 今日知识点

[css]: 块级元素的行内子元素变为块级, 其宽度不填充

子元素使用普通的 display: block, 会导致其宽度继承父级, 违反了我的需求. 那么有没有什么方法, 既可以让行内元素变为块级元素, 又可以保持原有宽度(即由内容撑开)呢? 经过一番查找, 发现 display: table 可以完美的解决这个问题.

[css]: display:box 布局踩坑

之前的几个项目中, 都有遇到这样一个需求: 通过判断设备的高度, 动态计算单个或者多个 DOM 元素的高度, 以此来增强用户体验. 我采用的是使用 JS 动态获取屏幕高度, 来计算并设置 div 的高度, 这样做很暴力, 但是很有效. 但是当需要适配的 DOM 元素变多了, 会极大的增加代码量.

今天, 尝试使用兼容性较好的 display: -webkit-box 布局, 它是 flex 布局的前身, 使用的过程中, 还是发现了很多的问题.

3. 今日 CHANGELOG

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

年会评优

1. 今日知识点

段落的最后一行居左

需求是一段长文本的最后一行需要居左, 使用 text-align-last 可以很好的解决这个问题.

2. 今日 CHANGELOG

http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/develop/CHANGELOG.md