-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
366 lines (365 loc) · 16.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>申啸天的简历</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="block">
<div class="title block-line block-item">
<h1>申啸天</h1>
<div>
<span>邮箱：13303309012@163.com</span>
<span class="person-phone">电话：+13303309012</span>
</div>
<div class="person-tag">个人标签：Vue，React，小程序</div>
</div>
<div class="block-line block-item skill">
<div class="intro">技能</div>
<div class="skill-item">
<h3>掌握现代框架实现原理，能独⾃实现MVVM</h3>
<div>
<p>前端：</p>
<ul class="skill-list">
<li>
Vue:掌握框架实现原理（会使用 defineProperty,Proxy实现MVVM）
</li>
<li>React:掌握Redux/createElement实现原理，熟悉hooks运作机制</li>
<li>
熟练使用umi，了解umi运行机制。通过umi实现项目的多环境
多配置部署。熟悉插件机制
</li>
<li>移动端兼容处理经验：pdf预览/下载等</li>
<li>
⼩程序: 熟练掌握Flex+rpx布局
有uni-app开发经验；掌握小程序规范；熟悉微信和支付宝生态圈
</li>
<li>
项目中全面使用ES6；会利用闭包、函数式理念封装组件；熟练使用ts
对ts高级用法有掌握
</li>
</ul>
</div>
<div>
<p>其他：</p>
<ul class="skill-list">
<li>熟悉Koa2, Express，有SSR经验</li>
</ul>
</div>
</div>
</div>
<div class="block-line block-item skill">
<div class="intro">工作经验</div>
<div class="skill-item">
<div>
<div class="company">
<p>北京琥玥天地科技有限公司</p>
<p>2023-03 ~ 至今</p>
</div>
<ul class="skill-list">
<li>负责印花猫从0到1项目搭建</li>
<li>负责腾讯两癌筛查项目从0到1项目搭建</li>
<li>腾讯新基石用户端及管理后台研发</li>
</ul>
</div>
<div>
<div class="company">
<p>脉脉</p>
<p>2021-03 ~ 2022-11</p>
</div>
<ul class="skill-list">
<li>负责招聘商业增长产品开发落地</li>
<li>从0到1完成公司级别技术后台</li>
<li>从0到1开发业务组件库包含支付等业务组件</li>
<li>负责招聘增长产品，并承担onwer</li>
<li>通过sql追踪数据，建立数据看板分析指标</li>
</ul>
</div>
<div>
<div class="company">
<p>北京洋葱学院</p>
<p>2019-04 ~ 2021-03</p>
</div>
<ul class="skill-list">
<li>负责小学部落增长侧前端开发，以及项目的重构工作</li>
<li>重构了完整的支付流程</li>
<li>负责内部submodule维护，公共组件库的开发</li>
<li>参与小学部落中后台开发（crm/admin）</li>
<li>参与小学学习体验开发（学生学习做题/老师批改一体的项目）</li>
</ul>
</div>
<div>
<div class="company">
<p>北京三节课</p>
<p>2017-06 ~ 2019-04</p>
</div>
<ul class="skill-list">
<li>负责公司⼩程序端开发和项目底层架构搭建</li>
<li>参与公司其他业务线产品研发</li>
<li>负责产品前端开发</li>
</ul>
</div>
</div>
</div>
<div class="block-line block-item skill">
<div class="intro">项目经验</div>
<div class="skill-item company-item">
<div>
<div class="company"><p>1. 印花猫管理后台</p></div>
<div class="info">
<span
>介绍：搜索印花猫小程序，印花猫服务的管理后台帮助运营管理订单以及商品</span
>
</div>
<ul class="skill-list">
<li>
基于Vue3和微前端生态思想，将整个管理后台分成两个项目，登录、菜单、权限和业务逻辑拆分
</li>
<li>
外层登录、菜单通过iframe嵌套内层业务逻辑，两者通过postmessage实现通信方案
</li>
<li>
在内侧业务逻辑项目监听路由行为，当发生路由行为时通知外层，保证两个项目交互保持一致
</li>
<li>
使用vite
proxy代理访问路径。解决往常需要本地运行两个项目的弊端，一般开发只需运行内层项目即可
</li>
<li>
通过自定义指令管理权限，通常在按钮上添加v-perssion.add.remove
即可添加权限实现按钮的禁用 也可扩展更多html属性的控制
</li>
</ul>
</div>
<div>
<div class="company">
<p>2.腾讯新基石ssv</p>
</div>
<div class="info">
<span>介绍：</span>
<p>
<a target="_block" href="https://www.newcornerstone.org.cn/"
>线上地址：新基石官网</a
>
</p>
</div>
<ul class="skill-list">
<li>
基于vue3生态+腾讯tdesign-ui，权限基于接口获取后使用动态路由处理
在前端通过hook+插槽+自定义指令封装权限
</li>
<li>
基于业务有大量表单情况，开发Pro-Form组件。优势是只需要options配置即可，表单样式、嵌套、状态流动以及rule校验封装在组件内部
</li>
<li>
充分利用组合式函数，封装复杂逻辑。将表单选项互斥逻辑封装成hook，
并结合上一条中的options就能完成表单复杂功能
</li>
<li>
通过vite提供原生import能力，无需配置route文件
自动分析pages目录自动创建路由文件
</li>
<li>有下载/pdf预览经验，兼容安卓和ios（部分较低版本）</li>
<li>
开发项目相关npm插件在项目中引用，并借助vite搭建服务
在本地快速调试插件功能
</li>
<li>
模仿阿里开源的useRequest 在项目内部封装自己的fetch
hook工具。好处是在hook内部即可处理好业务逻辑并暴露出响应式变量，在页面中就像使用props一样方便。
</li>
<li>
通过vue-router路由守卫结合权限
实现路由拦截和更细微颗粒度的页面控制
</li>
</ul>
</div>
<div>
<div class="company">
<p>3.脉脉招聘商业产品</p>
</div>
<div class="info">
<span>介绍：</span>
<p>
<a target="_block" href="https://maimai.cn"
>线上地址：maimai.cn</a
>
</p>
<p>招聘服务已经成为脉脉第一大收入来源</p>
</div>
<ul class="skill-list">
<li>
使用ssr来完成整体架构搭建，node层负责请求接口和页面渲染。确保能被爬虫捕捉
</li>
<li>使用hooks实现小型store，useContext+useReducer</li>
<li>关键交互页面用RN代替H5保证交互流畅性</li>
<li>使用koa2作为中间层，负责转发接口和数据范式化</li>
<li>使用dumi来开发业务组件并发布成npm包</li>
<li>
职位分享使用RN重构，分享到站外使用node+puppeteer 动态生成图片
</li>
</ul>
</div>
<div>
<div class="company">
<p>4.技术平台</p>
</div>
<div class="info">
<span>介绍：</span>
<p>技术平台面向产研团队，封装了sql bug查询等功能</p>
<p>截止目前有100+同事使用过该平台</p>
</div>
<ul class="skill-list">
<li>基于umi+antPro搭建框架，定制Table组件 做到高可用</li>
<li>封装sql查询方法，让sql查询可视化 方便初学者使用</li>
<li>
基于纯函数理念，功能可复用。基于上述做到了json化配置low-code
</li>
<li>通过bash npm script配合完善工程化</li>
<li>
在后台采用了装饰器的思想，在装饰器内埋了钩子。当相应组件被import时
装饰器会获取到相应组件信息并传递给store
</li>
<li>
使用fabric
canvas库来渲染img。并利用canvas的api做到翻转/绘制图形。并最后输出照片
</li>
</ul>
</div>
<div>
<div class="company">
<p>5.洋葱小学增长侧h5</p>
</div>
<div class="info">
<span>介绍：</span>
<p>
<a target="_block" href="https://yangcong345.com/pg/s?sellId=12"
>线上地址：yangcong345.com</a
>
</p>
<p>增长h5是小学对外投放/营收的入口。负责小学业务的营收</p>
<p>2020年 小学业务增长营收2000W+。实现盈亏自负</p>
<p>有两大投放方式：依托洋葱APP 作为其中一个入口；浏览器h5投放</p>
<p>
服务运行良好，截止目前Google
GA统计到的users为314.3K。sentry统计到的bug在150左右
</p>
</div>
<ul class="skill-list">
<li>使用umi.js开发。首页使用了webp+layzLoad来保证首屏加载时间</li>
<li>可以设计完整的支付流程，会使用ping++或sdk支付</li>
<li>使用代理者模式，将Local用proxy代理。便捷操作Local对象</li>
<li>
重写了umi中的ts类型，解决了umi.js中dispatch和其他定义难用的情况
</li>
<li>
创建history插件，在start时注入项目。解决umi3不支持promtp的问题
</li>
<li>
基于umi-request封装了加解密、自动处理token失效、后端status返回异常时的处理逻辑
</li>
<li>基于umi wrapper/hooks 做了鉴权，登录，微信授权的HOC</li>
<li>
全平台埋点统一方案，根据所运行的容器来判断使用js增强还是接口发送
</li>
<li>
submodule+可视化方案。将产品需要的功能封装成组件，在后台配置好组件的props和顺序后渲染在h5
减少产研需求量
</li>
<li>context+useReducer/redux覆盖了项目所有数据存储的场景</li>
<li>使用env+git CI做多环境同时部署</li>
</ul>
</div>
<div>
<div class="company">
<p>6.乐猩电商小镇(H5端和小程序端)</p>
</div>
<div class="info">
<span>介绍：</span>
<p>
<a target="_block" href="https://m.pilipa.cn/lexing"
>线上地址：m.pilipa.cn/lexing</a
>
</p>
<p>乐猩电商小镇旨在帮助中小电商企业办理营业执照并代理记账</p>
<p>
打通了线上办理营业执照的渠道，现在企业主无需到工商局自己申请营业执照，在线上就可办理营业执照
</p>
<p>
乐猩电商小镇分为H5端，小程序端。H5端依托噼里啪官网，小程序端与阿里巴巴合作，上架淘宝商家应用和千牛服务市场。是淘宝商家/千牛服务市场唯一的代理记账报税业务
</p>
</div>
<ul class="skill-list">
<li>
乐猩H5端采用<span class="fw">React+Next.js</span
>框架开发，在部署服务器后能保证访问速度和SEO
</li>
<li>
OCR识别，前端使用input调起相册功能，选择照片后由前端调阿里OSS
</li>
<li>使用WithRouter高阶组件来创建可访问的props.router</li>
<li>上传身份证使用OSS+OCR识别，小程序端调用my.uploadFle上传</li>
<li>
使用HOC高阶组件，将获取用户信息和可复用业务代码抽离到高阶组件当中
</li>
<li>自定义Modal组件，使用React.createPortal将DOM渲染在body层</li>
<li>使用createRef+ref转发，确保能获取到正确的示例内容</li>
<li>
编写支付组件和支付函数，能识别支付宝，微信和H5环境。根据环境不同调用相应API
</li>
<li>小程序端使用原生开发，熟练掌握AXML规范；使用Flex+rpx适配</li>
<li>封装fetch函数，统一处理请求回调</li>
<li>
小程序端支付使用web-view和H5使用同一套接口。环境判断是否为小程序端，通过PostMessage传递消息
</li>
<li>
服务端使用淘宝聚石塔业务和小程序云服务（鉴权，userInfo等API必须使用云）
</li>
</ul>
</div>
<div>
<div class="company">
<p>7.三节课校园小程序</p>
</div>
<div class="info">
<span>介绍：</span>
<p>线上地址：微信小程序搜索 ‘三节课校园’</p>
<p>
三节课校园团队为⼤学⽣就业服务的⼩程序，为大学生提供在线实习和提高能力课程
</p>
</div>
<ul class="skill-list">
<li>熟练使⽤Flex+rpx布局</li>
<li>使用wx.login和session实现用户鉴权和用户token过期判断</li>
<li>
批量上传上传图⽚(wx.uploadFile)，并使⽤promise.all保证返回顺序
</li>
<li>
上课页⾯使⽤promise实现对话流⾃动播放；使⽤call保证this指向正确
</li>
<li>跳转⼩实习裂变⼩程序，并根据参数判断后续⾏为</li>
<li>使⽤wx.reportAnalytics上报信息做数据埋点</li>
<li>Canvas实现进度条并用cover-view保证层级最高</li>
</ul>
</div>
</div>
</div>
<div class="block-line block-item skill">
<div class="intro">教育经历</div>
<div class="skill-item">华北理工大学</div>
</div>
<div class="block-line block-item skill no-boder">
<div class="intro">个人评价</div>
<div class="skill-item">
<p>励志成为能横跨多端的选⼿</p>
<p>⽬前在学习Fullter/dart和python</p>
<p>喜欢翻MDN，思否和掘⾦</p>
<p>会在论坛和个人github发一些分享～</p>
</div>
</div>
</div>
</body>
</html>