高保真还原设计图

1. 开发之前要对设计图进行开发角度的分析，有疑问及时跟设计沟通解决；多注意一些空白页，异常数据情况，是否有相应的设计图。
2. 开发过程中，要严格按照设计图进行编码，高保真还原设计图；
3. 开发完成之后，让设计确认实现结果，发现问题，及时解决。
4. 要根据自己的开发经验，确定设计是否合理，扁平化的图标，是否建议设计使用font-icon

高保真还原产品需求

1. 开发之前认真参加需求评审，站在前端的角度考虑需求的合理性，有问题及时提出；
2. 开发过程中发现需求的细节问题，及时跟产品沟通解决；
3. 开发完成之后，要对照产品原型，自测自己开发的功能是否百分百符合需求。

空白页

尤其是列表页，在没有内容时，要显示类似“暂无数据”这样的提示，开发过程中要注意这一细节，如果没有设计，要跟设计沟通，让设计提供相关页面；如果没有文案，要跟产品确认提示文案。

按钮交互样式

这个属于用户体验方面的细节，用户进行了任何操作，界面上要给予及时的反馈，让用户知道，他进行了什么样的操作。发送请求时，按钮置为disabled（或者loading），防止重复发请求。

pc端：

1. 鼠标移入移出按钮，要有交互反馈，可以通过:hover实现。
2. 鼠标点击返回，可以通过:active实现。

移动端：

1. 点击按钮：可以通过:active实现。

文字过长如何显示

设计有时会按照理想状况出设计图，但是如果文字过长如何显示，是直接截断？还是显示省略号？可以跟设计、产品沟通确认

图片

1. 图片在保证清晰度的情况下，尽量压缩，移动端不同屏幕考虑提供2x 3x等规格的图片
2. 图片裁剪，拼接@200_w（阿里的oss），要根据实际的场景，合理拼接参数
3. 图片是否需要懒加载
4. 图片加载loading站位图
5. 图片加载失败站位图

title和页面icon

<title>Title</title> <link rel="icon">之前都是写死的开发的时候需要注意下。跨平台的时候是统一还是显示平台或者商户的title和icon需要和产品沟通一下。

请求

1. 适当显示loading
2. 发起请求时，对应按钮disabled（或者loading），防止重复请求
3. 请求失败，错误提示

项目发布之前

1. 多余的调试（console.log、alert）代码是否已删除（尤其是alert）。检查方法：可以全局搜索一下，发现调试代码，及时删除
2. 安装第三方包是否同时修改了package.json（—save，—save-dev参数未加引起的）。检查方法：将本地的node_moduls文件夹删除，重新npm install 启动项目，查看是否缺包。
3. 生产环境的构建配置是否正确。检查方法：一般测试环境和线上环境使用的配置相同，测试环境没问题，一般问题不大；还可以本地模拟正式环境，进行一次构建。
4. 微信调试是否关闭。检查方法：wx.config中的debug是否为false
5. 第三方库的调试是否关闭。检查方法：以vue为例，在webpack配置中，设置new webpack.DefinePlugin({‘process.env’: ‘production’}),可以去掉调试信息，有的库是提供全局方法，具体情况具体分析。