记录我的实习生活
更新
[2019-11-18]
- Initial Release
[2019-11-19]
[2019-11-20]
[2019-11-22]
[2019-11-25]
[2019-11-26]
[2019-11-27]
[2019-11-28]
[2019-11-29]
[2019-12-2]
[2019-12-3]
[2019-12-4]
[2019-12-5]
[2019-12-6]
[2019-12-7]
- 更新日志
[2019-12-9]
- 更新实习日志
[2019-12-10]
[2019-12-11]
[2019-12-12]
[2019-12-13]
[2019-12-14]
[2019-12-16]
[2019-12-17]
[2019-12-18]
[2019-12-19]
[2019-12-20]
[2019-12-23]
[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
简要分析
用户画像
策略选择
- 建筑养成(基本建筑、资源建筑)
- 兵种养成(基本兵种、进阶兵种)
- 攻击方式
- 多样化的玩法(六宫格、光环加成)
用户追求
- 新系统随等级开放
- 后期社交
- 跨服玩法
职场建议
- 确认目标(找好切入点, 构建任务清单)
- 用好手段(多交流)
- 做好复盘(积极审查过往经历)
- 重新出发(适当调整心态)
- 持久性
研发部功能
- 游戏的版本迭代
(游戏)急速 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
今天的任务还是阅读前端 PM
、Tech
组的项目, 这里记录两个知识点:
- git-flow
- git rebase 和 git merge
git-flow 简单梳理
以前未有耳闻的一个知识点, 看了下 官方文档 对其的解释, 其实就是一个 自动化的工作流.
个人理解, 其和 vue-cli、create-react-app 的性质有些相似, 都是通过封装基础的 command
, 使得开发者可以很方便的管理项目. 当然, 对规范整个团队的 git
操作, 有很大作用.
记录下 git-flow 的几个分支:
- master
- develop(开发分支, 保持最新的提交)
- feature/(功能分支, 合并到 develop)
- release/(发布分支, 创建发布标签)
其和 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
星辰奇缘
- 快速升级的新途径
今天分配多了些时间去玩《星辰奇缘》, 发现了一个 快速升级 的方法——工会任务.
在集训周期间, 因为剧情任务的需要, 加入了一个比较活跃的工会, 会长制定了一系列的考核目标, 很不幸, 由于考核不达标, 所以被无情的踢出了工会. 今天在 日程
面板发现了这一任务, 舒舒服服.
- 不能看到 NPC 的血量
这算是一个设计缺陷吧, 在对战的时候, 敌方 NPC
的血量经常会无法显示, 用户体验贼差. 比如我的 狂剑
角色, 想手动选择一个技能, 并且这个技能是根据敌方的血量多少来选择的, 这时就很尴尬.
- 趣味玩法——知识问答
在相对于比较单调的 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
- 今日完成
封装基础的 BaseSelectToolTip
组件, 并将其与 Config
组件的每一项结合, 通过通用组件的封装, 对于一下几个知识点加以应用:
- 兄弟组件传值
- 我参照 React 的形式, 使用父组件来管理公共状态, 但是需要在父组件中定义大量状态, 这种方式我个人觉得比较容易想到, 其实还有其它方式, 有待深入体会
- slot 应用
- 可以通过 slot 的 name 属性, 来指定其挂载的位置
- props 命名规范
- 在
.vue
父组件中, 驼峰 形式的 props 需要转换为 连字符 形式传递
- 在
- 代码链接
https://github.com/ddzy/vue-3k-demo-modao/commits/branch/dev
- 明日计划
- 实现动画预览
星辰奇缘
今日花费了 两万 多金币去学习宠物的新技能, 之前并不知道技能是需要手动学习的. 对于雪狐来说, 由于其强大的群攻效果, 所以我果断学习了价格适中并且魔法伤害显著的巨刺藤曼, 更多的特性需要慢慢发掘.
2019-12-4
今日任务概览:
- 继续完成 vue 的墨刀 demo
今日完成
昨天将 Config
和 Preview
组件的结构写好, 今日结合动画的配置项, 实现了动画即时预览功能, 中途遇到了几个问题:
- 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
今日任务:
- 墨刀组件完善
今日完成
接着昨天的进度, 今天主要是依据墨刀的组件样式, 继续完善项目, 包括样式、逻辑细节等, 确保完全贴合.
踩坑处理
- 动态计算 tooltip 弹出位置
解决办法: 比对 输入框中的值
与 弹出框中的每一项
的文本值是否相等, 来计算弹出框的位置. 但是存在一个问题:
多个弹出框都位于页面上(都会被初始化渲染, 只是通过 display: none/block 来切换), 这就导致使用 document.querySelectorAll 会获取到所有的条目, 进而导致位置计算异常, 考虑使用 v-if 解决.
使用 v-if 会导致弹出框的位置计算失效, 解决方法是: 将输入框的值通过 props 传递进 tooltip 组件, 便于比对.
- 通过 :value 绑定值, 但是无法让输入框与父组件同步
解决办法: 使用 v-model 来代替
- Firefox 下, 父元素设置了
display: flex
, 子元素填充宽度异常
解决办法: 给每个子元素指定固定的 width 即可.
- IE 不兼容 Vue-cli@4
解决办法: 等待官方处理-issue
代码地址
2019-12-6
今日任务:
- 完善墨刀项目
- 初步接触 PM 组的活动项目
墨刀项目
gitlab 项目迁移
- 踩坑处理
今天想将 github 的项目迁移到 gitlab 的 group, 需要在 group 下创建一个仓库, 但是始终无法成功.
解决方法: 最终发现是权限问题, group 的 owner 只分配给了我 developer 权限, 查了下, 其实 gitlab 有五种权限(owner、master、developer、reporter、guest), 而只有 master+ 权限才可以创建仓库.
- 代码地址
https://github.com/ddzy/vue-3k-demo-modao/tree/master
PM 组活动项目
- 项目流程梳理
- 获取设计稿(PSD + Azure 网页版)
- PSD 主要用来切图, 获取图片素材, 能用图代替的尽量用图片代替, 少写布局
- Azure 用来查看项目的大致结果, 不过比较粗糙, 还是以 PSD 为准
- 查看 PSD, photoshop + pxcook 切图, 标注页面的模块位置、结构信息
- 初步构建页面布局
- 与后台联调
- 项目踩坑
暂无, 今天主要熟悉了 pxcook 等工具的用法, 等开发项目时在做总结.
2019-12-7
昨天收到俊哥的年会任务安排, 这是第一次真正的接触到业务项目. 所以格外重视, 今天来到公司, 想了解一下各种前端工具的使用, 但是和一凡, 另外一个校招小伙伴聊了一下午的天, 计划赶不上变化, 只能推迟计划.
2019-12-9
今日实习任务:
- 跟进业务项目
业务项目实战
- 前言
距正式到岗实习已经过了两周, 这周开始接触团队的业务项目, 今天俊哥安排我来参与年会项目的开发, 初次接触正式的开发流程, 面对突如其来的各种 开发工具、规范要点 等, 竟有些难以适从, 将几个重要的点记录下来:
- 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
来实现
- 文字渐变效果, 可使用 Webkit 渲染引擎所支持的
- 移动端
- 微信浏览器顶部有个大约 40px 高度的 titleBar, 需要做特定的兼容处理(
PS: 采用内网 + qrcode的方式, 可以使用扫一扫功能在微信浏览器上预览
)
- 微信浏览器顶部有个大约 40px 高度的 titleBar, 需要做特定的兼容处理(
- 今日完成
- 评优页面一的基本页面布局和终端适配
- 明日计划
- 完成评优页面二的布局和兼容
- 实现页面保存为图片的功能
2019-12-10
今日日志汇总:
- 继续完善业务项目
业务项目
- 今日完成
接着昨天的任务规划, 今天主要完成评优二的布局工作, 但是在 video 和长按保存图片部分遇到了一些坑点
- 踩坑记录
- [移动端视频问题]: 通过 video 标签插入的视频, 在 Chrome 中黑屏, 在 iOS 微信浏览器上无法显示
- 某些 url 的视频可以显示, 但是大多数都不行, 推测是跨域的问题
- [移动端视频问题]: 微信浏览器的 video 会浮动于容器上方
- X5 内核搞的鬼, 根据文档, 在 video 标签中声明
x5-video-player-type: "h5"
即可
- X5 内核搞的鬼, 根据文档, 在 video 标签中声明
- [知识点-移动端 web 的载体]: 在 PC 端, H5 页面的载体是诸如 Chrome、Safari 等浏览器, 但是在移动端, 则有几种形式:
- 一般浏览器
- Hybrid App 的内嵌页面
- 手机自带浏览器
- 明日计划
- 完成长按存图
2019-12-11
今日实习计划:
- 继续完成业务项目
- 移动端知识汇总博客创作
业务项目
- 昨日补充
昨天的日志总结中提到了几个比较重要的问题:
- video 在微信 iOS 端的问题
- 移动端 web 的载体
今天花了些时间, 写了几篇博客分别记录这些问题:
- 今日完成
- 微信浏览器长按保存图片功能
- 通过请教前端小伙伴, 基本思路就是: 页面挂载完成之后, 结合 html2canvas 库将 DOM 绘制到 canvas 画布上面, 接着将 canvas 转为图片 base64 码即可.
- 当然, 过程中遇到了不少坑, 统统记录在了博客中: 移动端知识集锦系列之——微信浏览器长按保存为图片
- 明日计划
- 看本项目其它模块的代码, 熟悉 hd 类项目的结构
移动端汇总博客
由于在接触业务项目之前, 并没有真正的移动端开发经验, 对于移动端的各种兼容问题、基本知识点了解的不是很多, 故将接触到的, 全部汇总于博客中:
2019-12-12
今日学习计划:
- 改进业务项目代码
- 更新个人 Github 项目
业务项目代码改进
- 前言
今天在组内大佬的 Code Review 下, 发现昨天写的代码存在一定的问题, 比如 CSS 的大小数值不严谨.
- 今日完成
- 改进 CSS 样式和组件的代码结构规范, 必须保证严谨性, 每一个样式都要严格按照 pxcook 来定义
- 移除多余的无用文件夹和文件
- 踩坑总结
- 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 状态
- 明日计划
- 查看本项目其它模块的代码, 深入了解每个代码区块的功能
更新个人 Github 项目
近半个月没有更新自己项目的代码了, 今天主要更新两个仓库:
- fe-necessary-book: 添加新的国内优质程序员交流社区-Gitchat, 摸鱼无意发现的
- ts-utility-plugins: utility/object 下新增类 lodash 的 forOwn 方法, 遍历对象的自身属性
2019-12-13
今日任务概览:
- 新的业务项目
- 知识点总结
- 明日计划
新的业务项目
- 第八神谕独立游戏官网(移动端)
知识点总结
- 昨日复盘
昨天在改良业务项目结构的过程中, 遇到了两个问题:
- 删除 origin 仓库的多路径下的文件夹(
git filter-branch --force ...
) - 强制推送到 Gitlab 报错(
remote: GitLab: You are not allowed to force push code to a protected branch on this project
)
今天将其归纳到博客: git 常用命令集锦 中, 便于后续的参考.
- 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
代替
- 页面挂载完成之后, 将 URL 中的用户 id 字段替换掉即可, 但是要注意, 使用
- 打包前端项目
- 打包时, 报错:
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
🌴 今日任务 🌴:
- 第八神谕提交测试
第八神谕
- 踩坑总结
提交至测试服后出现了几个 BUG:
- [iOS 系统问题]: video 视频在 Chrome 和 Safari 上不能自动播放
- 起初, 我给 video 添加
muted
属性, 也就是静音后才能自动播放, 但是微信浏览器中不起作用] - 接着, 我观察到问题所在, 存放 video 的组件不能卸载(使用 v-show 代替 v-if), 因为
WeixinJSBridgeReady
事件只触发一次, 在 WeixinJSBridgeReady 事件内部手动触发video.play()
方法, 并且需要时刻监听 video 弹出层的显隐状态, 手动开始播放(PS: 弹出层在 display: none 的状态下, 其内部的视频会停止播放)
- 起初, 我给 video 添加
- [iOS 系统问题]:
position: fixed
的元素, 在 UC 浏览器上会出现1px
的间距- 解决方法: 为 fixed 状态的元素设置
margin-top: -1px
, 用外边距填充
- 解决方法: 为 fixed 状态的元素设置
- [移动端问题]: video.play 报错——
Uncaught (in promise) DOMException
- 解决方法: Chrome、Safari 会返回一个 Promise, UC 会返回 undefined, 所以需要分别判断处理
- [移动端问题]: UC 浏览器无法自动播放视频
- 取消之前的 autoplay 自动播放策略, 在组件挂载之后模拟一次点击, 但是在首次刷新时, 会出现弹窗并消失, 给定一个
isFirstlyMounted
变量来标识是否首次加载, 将 mask 和 video 的opacity: 0
- 取消之前的 autoplay 自动播放策略, 在组件挂载之后模拟一次点击, 但是在首次刷新时, 会出现弹窗并消失, 给定一个
- 今日 CHANGELOG
d
- 明日计划
- 将今日踩到的坑总结至博客中
2019-12-18
🚩 今日任务规划 🚩:
- 第八神谕完善需求
第八神谕
- 昨日回顾
昨天解决了一部分本项目在 iOS、Android 真机上存在的问题:
- video 自动播放问题
- iOS UC 浏览器
1px
间距问题 video.play()
方法的返回值问题
但是在提交给测试后, 发现还有一个细微的 BUG, 那就是, 在 iOS 真机上, position: fixed
的元素会出现各种各样的问题, 比如:
- 边缘滑动时, 滚动区域会遮挡 fixed 元素
- iOS12 下, 双击图片元素, 页面会放大
- 踩坑总结
- iOS 下
position: fixed
固定定位失效 - iOS 下
position: fixed
出现抖动问题 - iOS safari 下绝对定位的元素部分区域被固定定位的元素遮挡, 无法滑动
- 微信浏览器使用使用 a 标签打开链接, 返回后, 底部会出现白条, 遮挡页面元素
- https://segmentfault.com/q/1010000015158396/a-1020000016175512
- 采用
window.location.replace('url')
来进行页面链接跳转
- UC 浏览器必须等到 onscroll 行为停止之后, 才能改变 fixed 元素的位置
- 也就是说, 手指在可滚动元素上滑动, 可以正常触发 scroll 事件, 但是当手指离开时, 就无法触发, 目前无法解决
- http://andyshora.com/mobile-scroll-event-problems.html
- iOS12, 双击会放大页面, 通过监听
touchend
, 比对新旧时间即可
- 今日 CHANGELOG
http://git.3k.com/web/PM/dl-20191213-d8sy/commits/wap
- 明日计划
- 更新博客, 总结最近遇到的坑点
2019-12-19
⛑ 今日任务概述 ⛑:
- 第八神谕改需求
- 总结博客
第八神谕
- 今日总结
- 和’老板’(产品)的沟通之道
- 适当在页面上添加一些动画效果
- 可以预设多种结果, 让产品来挑选, 不然等到交付的时候, 又提了一堆新需求, 说不定还要重写代码
- 踩坑处理
- [git]: Fatal: out of memory, malloc failed (tried to allocate 1514190 bytes)
- 出现原因: git 传输的数据大小超出了限制
- 解决方式:
git config http.postbuffer 8888888
- 博客记录: https://blog.yyge.top/blog/2019/03/12/git%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4%E9%9B%86%E5%90%88/
- [git]: Fatal: another git process seems to be running in this repository
- 出现原因: 同一个仓库被多个 git 进程占用
- 解决方式: 删除 .git 或者 .deploygit 文件夹下的 index.lock 文件
- 博客记录: https://blog.yyge.top/blog/2019/03/12/git%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4%E9%9B%86%E5%90%88/
- 今日 CHANGELOG
http://git.3k.com/web/PM/dl-20191213-d8sy/commits/wap
总结博客
把前两天遇到的问题, 做个整体总结:
2019-12-20
📃 今日任务概览 📃:
- 第八神谕交付上线
- 年会评优细节处理
- 更新个人仓库
第八神谕
此处无字胜有字
年会评优
- 细节处理
- iphonex 下, html2canvas 截图出现白边, 但是 iPhone7 正常
- 问题来源: 问题出在某两张背景图片上, 由于直接给 div 设置了 background-image, 但是具体的原因可能是由于 html2canvas 的渲染机制有关
- 解决方式: 使用 img 标签代替背景图片的方式
- 微信浏览器禁止分享 & 复制链接
- 解决方式: 通过微信浏览器提供的 js 桥接事件——WeixinJSBridgeReady, 来隐藏分享和复制链接按钮
- 今日 CHANGELOG
http://git.3k.com/web/PM/hd-20191206-nianhui-prize/commits/develop
个人 github 更新
- blog
- git 常用命令集合
- 使用
git tag newTagName oldTagName
、git tag -d oldTagName
来重命名旧的标签, 但是需要注意, 这种方式不能更改已经推送到 origin 仓库的 tag
- 使用
- ts-utility-plugins
- 新增 zip 工具方法, 旨在模拟 lodash.zip 方法, 提取二维数组每项的同位置的值
- 发布 v1.1 版本
2019-12-23
⛑ 今日任务概述 ⛑:
- 年会活动 BUG 修复
- 第八神谕代码优化
- 阅读业务 SDK 项目源码
- 更新个人 Github 项目
年会活动
- 今日修复
- 修复 prize_name 字段未显示的问题
- 起初以为这是一个常量, 所以并没有想到用后台数据加以渲染, 是自己的一个判断失误, 并且没有及时和后端沟通, 个人失误, 吃一堑长一智.
- 文字渐变
- mask
- 会忽略自定义的颜色
- background-clip
- html2canvas 截图会出现完整的背景
- svg
- mask
- 今日 CHANGELOG
http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/master/CHANGELOG.md#2019-12-23
第八神谕
- 今日修复
- 完善代码注释, 增强代码可读性
- 今日 CHANGELOG
http://git.3k.com/web/PM/dl-20191213-d8sy/blob/master/CHANGELOG.md#2019-12-23
H5SDK 项目
- 任务概述
对于 SDK 项目有一个初识, 对这一块还是很陌生的.
- 知识点总结
- 游戏研发、发行、渠道的异同
- 研发: 也就是由游戏程序员开发, 负责整个游戏模块的构建
- 发行: 包括运营、评测、数据分析、策划等多个步骤, 每一步都是紧密不可分的; 也可以说发行就是决定了一款游戏的命运
- 渠道: 简单来说, 就是下载平台, 比如: iOS 上的 App Store、Android 上的 Taptap、360 软件管家、小米商店等
个人项目
- fe-necessary-book
- [新增]: 国外优质博客社区: Medium
- [更新日志]: CHANGELOG.md
2019-12-24
今日任务概览:
- 年会活动优化
- 接受新项目(古今江湖联合活动)
年会活动
- 知识点回顾
- sessionStorage
- 会话存储, 与 localStorage 最大的区别在于生命周期, 会随当前标签页关闭而消失, 可用来记录页面上次的滚动位置
- 微信的分享问题
- 由于微信提供了多种分享策略: webview 复制链接、webview 分享到朋友圈、公众号推送消息分享, 所以要做禁止分享的话, 需要考虑这几种情况, 做不同的权限处理
- 今日 CHANGELOG
http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/develop/CHANGELOG.md#2019-12-24
古今江湖
- 今日 CHANGELOG
http://git.3k.com/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md
- 明日任务
- 构建页面布局
2019-12-25
今日任务概述:
- 古今江湖联合官网
古今江湖
- 今日踩坑
- 手机扫码无法预览
- 电脑与手机不在同一个 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)
, 来手动控制滑动
- 给每个 pagination 项绑定点击事件, 通过每一项的 index, 调用
- 雪碧图制作
- [swiper]: this.activeIndex 和 this.realIndex 的异同
- 两者的区别主要在于是否处于 loop 模式下, 前者返回当前激活的 slider 在所有的 slider 中的位置, 包括复制的 slider, 而 relIndex 则返回原始的位置
- 今日 CHANGELOG
http://git.3k.com/web/PM/dl-20191223-gjjh-lhhd/commits/develop
2019-12-26
📃 今日任务 📃:
- 年会评优细节优化
- 古今江湖联合官网
年会评优
- 今日坑点
- [其它]: 根据手机屏幕的可视区域高度, 动态计算内容区的高度
- getBoundingRect()
- 今日 CHANGELOG
http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/develop/CHANGELOG.md
古今江湖
- 今日坑点
- [其它]: 对应动态的背景图片或者小图标, 可以采用雪碧图
- [Vue]: 使用 v-for 遍历数组, 渲染 component
- vue 默认会将所有数据渲染成字符串形式, 动态组件也一样, 在使用 v-for 遍历的时候, 使用 :is 属性即可
- [移动端]: margin 塌陷
- 今日 CHANGELOG
http://git.3k.com/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md
2019-12-27
🚧 今日任务概述 🚧:
- 古今江湖联合官网
古今江湖
- 踩坑宝典
[微信浏览器]: a 标签锚点跳转, 底部产生白条
微信底部的白条真的很烦人, 使用传统的 a href="#id"
会产生 history 历史, 导致白条的出现, 所以使用 element.scrollIntoView
代替
[技巧]: vue 限制输入框只能输入数字
[iOS]: 弹起的键盘关闭后, 页面底部空白, 空白的高度为键盘的高度
监听输入框失去焦点, 使用 window.scrollTo(0, 0)
调整位置即可
1 | handleVCodePhoneBlur() { |
但是当当前可视区有多个输入框, 从当前输入框 blur, 跳到另一个输入框, 会出现页面跳动的问题, 解决办法是标识一个变量
- 今日 CHANGELOG
http://git.3k.com/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md
2019-12-28
✈今日任务概览✈:
- 古今江湖融合活动官网
古今江湖
- 知识点总结
- [vue]: 通过
this._vm
在 vuex 中访问当前 vue 实例 - [chrome]: 巧计查看后端返回的 json 数据
- 控制台打印后, 右键 -> Save as global variable -> copy(variable) -> JSON View
- 踩坑秘籍
iOS 下不能手动调用 input.focus 方法
项目中, 想通过 watch 一个变量, 根据该变量的值来手动决定输入框是否获得焦点:
1 | export default { |
但是 iOS 环境下, 均不起作用, 故采取 addEventListener 绑定事件的方式来解决
- 今日更新
http://git.3k.com/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md
2019-12-29
🚦今日任务🚦:
- 古今江湖融合活动官网
古今江湖
- 知识点总结
[css]: 使用 word-break: break-all
来强制断句, 让长文本换行
- 踩坑秘籍
[UC浏览器]: 通过 scrollIntoView 跳转至指定区块后, 页面白屏, 触摸屏幕后才显示
UC 浏览器对于 element.scrollIntoView
的兼容性并不是很好, 故采用原始的 a
标签锚点跳转的方式.
[Clipboard]: 页面首次挂载, 需要点击两次按钮才能复制文本
使用 vue-clipboard2 代替即可
[iOS]: 手动调用 input.focus(), 或者 input.blur(), 不起作用
这是由于 iOS
自身的安全策略引起的, 必须由用户的动作才能触发输入框, 弹起键盘.
我的解决办法是, 在页面添加一个空的 div
元素, 给其添加点击事件, 在需要的时候, 手动调用其 click()
方法即可
1 | <input id="nameInput" ref="nameInputRef" /> |
1 | export default { |
- 今日更新
http://git.3k.com/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md
2019-12-30
🥗今日任务概述🥗:
- 古今江湖联合活动官网
- 年会评优
古今江湖
- 今日完成
- 完成埋点需求
- 解决冲突(志哥细节优化)
- 页面相关文案修改
- 需求优化
- 知识点总结
熟记于心
- 踩坑总结
- 对于有特殊位置需求的元素, 应该动态计算其位置信息
- 今日 CHANGELOG
http://git.3k.com/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md
年会评优
- 今日优化
- 完成视频的全屏播放功能
- 今日踩坑
[QQ浏览器]: video 第一次播放结束时会黑屏, 无法重复播放
监听 video 的 ended 事件, 等待其播放结束之后, 动态替换新的 src, 顺便吐槽一句, QQ 浏览器真的反人类.
- 今日 CHANGELOG
http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/develop/CHANGELOG.md
2019-12-31
⛱今日日志概览⛱:
- 年会评优项目
- 古今江湖项目
- 个人博客更新
年会评优
- 今日踩坑
- 今日知识点
getBoundingRect 的妙用
见下方
- 今日 CHANGELOG
http://git.3k.com/web/PM/hd-20191206-nianhui-prize/blob/develop/CHANGELOG.md
古今江湖
- 今日踩坑
[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 | const $swiper = new Swiper('.swiper-container', { |
- 今日知识点
getBoundingRect 的妙用
项目中多次使用到了 getBoundingRect
这个 API, 它的作用是获取其上下左右四条边到屏幕视口的距离, 比如一个宽高都为 100 的盒子, 它位于页面的左上角, 那么它的 getBoundingRect
的值是这样的(不考虑默认边距的问题):
1 | <div id="wrapper"></div> |
1 | const $wrapper = document.querySelector('#wrapper'); |
而在项目中, 有一些特殊的需求, 需要根据不同长度尺寸的屏幕, 动态计算某个元素的位置, 就需要结合该元素的 getBoundingRect, 通过简单的算法, 做一个边界处理, 得到最终位置.
- 今日 CHANGELOG
http://git.3k.com/web/PM/dl-20191223-gjjh-lhhd/blob/develop/CHANGELOG.md
博客更新
2020-1-2
今日任务:
- 头铁主公玩家站(新任务)
- 更新博客
头铁主公玩家站
- 今日踩坑
[vue-router]: 提示 Navigating to current location (“/news”) is not allowed
新的项目需要使用到 vue-router 作路由跳转, 由于想自定义导航的样式, 所以不想采用 vue-router 提供的 router-link 组件, 使用自定义的 a 标签来代替:
1 | <a |
1 | export default { |
但是上面的方式会报错: Navigating to current location ("/news") is not allowed
, 所以还是采用 router-link.
- 今日 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 | div { |
上述的方法, 在浏览器中预览的时候, 发现会报错, 提示: 0 不能做被除数, 也就是说, less 将 /
识别为除法运算. 几经周折, 找到了解决办法:
1 | div { |
使用 ~
将属性值包裹为字符串, 这样 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