公司官网前端开发经验分享

公司官网的重要性和特殊性不言而喻。很多前端都会经历这个项目，笔者有幸在所就职的每家公司都负责过官网的前端开发工作。开发中遇到过很多问题，反思起来值得和大家一起分享，以减少或者减低大家可能遇到的问题。

理想开发流程 UI => 开发 =》测试 =》上线

现实开发流程 需求方 =》 UI => 开发 =》需求方 =》 UI => 测试 =》需求方 =》 ...... UI => 上线 =》需求方 =》 UI => 开发测试 =》上线

实际开发中需求及UI会一直调整，直到上线以后仍会不停调整。所以，前期的需求评审至关重要。一定要让需求方（一般是市场部负责人）评审通过以后再开发。

吐槽：官网是我见到为数不多的产品总监PK不过市场总监的项目之一。一般项目，前端展示效果产品总监拍板即可。

0. 特性

跨部门沟通
跨项目耦合
PWA
测试的重要性
工期的紧迫性
项目重要性
SEO的重要性

1. 跨部门沟通

由于官网的特殊性，官网通常会涉及多部门协作。

市场部：需求方，一般官网都必须满足市场部推广需求
销售部：半需求方，一般官网都必须满足市场部推广需求
人力部：半需求方，辅助招聘需求
客服部：半需求方，辅助客服需求
产品部：设计，对UI及UE负责
开发部：开发，对技术及开发进度负责
测试部：测试，对质量、效果负责，保证测试充分
运维部：运维，对网络及服务器负责
运营部：文案，对文案及SEO推广负责
国际化：翻译，保证文案翻译的准确性及效率（一般小公司会外包，所以必须保证时效）

2. 跨项目耦合

用户系统：实现单点登录（SSO）功能
公司产品：涉及到公司产品的子项目
官方博客：如blog、wiki、zendesk等
客服功能：WeChat、App、小程序、微博等功能的集成

3. PWA

1. 可靠性

跨终端可用性
离线可以访问基本功能
保证服务长期可访问

2. 快速性

可交互等待时长
加载速度

3. 友好性

合理的布局
友好的UI设计
便捷的交互
适合不同国家的用户使用习惯，如阿拉伯语国家 direction
无障碍阅读

4. 测试的重要性

自测
产品
测试部门
公司内测

5. 工期的紧迫性

由于官网是企业对外宣传的重要工具，所以一般会要求时效性，如新闻、咨询、招聘信息等及时更新。

以及活动页的开发，如周年庆、春节、促销、展会、推广等活动。

6. 项目重要性

由于官网是企业的门面，一般公司（中小型企业）的老板都会对官网亲自把关，通过官网来展现公司的企业文化。所以，倘若你在中小型企业，接手官网的话，拿出看家本领把官网做好也是非常值得的。

7. SEO的重要性

由于官网的特殊性，往往公司会付费做SEO推广，所以，官网的SEO友好性不言而喻。这就要求我们在项目技术选型期要慎重考虑，想办法将SEO做的更好，这样就可以大幅节省推广成本，达到事半功倍的效果。

现在适合SEO的方法比较多，如SSR、Prerender等其他方式。

检查清单

参与需求评审，待定稿后开始开发
工期预估，按正常工时的1.5-2倍时间进行预估，后期更改会比较频繁
硬件条件提前准备，如服务器、SSL、HTTPS等需要提前准备，待项目上线前搞定。
对老官网的兼容性，新官网发布前务必邮件告知公司全部高管，让大家自行修改，处理新老官网更换代理的问题。如，页面路径发生变化。
统计工具兼容（友盟、GA等）
埋点及上报代码不应遗漏
公测（公司内部测试，尽量保证1周左右的时间，让大家体验并上报问题）

转载于:https://juejin.im/post/5d046fd4f265da1b725c0066