week1总结

week1总结

1. 开发上线工具流程以及规范类

• 规范：
  
  css注释：/* Comment Text*/
  
  Css嵌套选择器：请不要让嵌套选择器的深度超过 3 层！
  
  再说一遍: 永远不要嵌套 ID 选择器！
  
  css命名：

  1. 类名使用破折号代替驼峰法
  2. 都使用小写字母
  3. 模块下的css用模块名称作为前缀
  4. 变量使用小驼峰式命名方法

• 项目接口问题：
  
  plugins下的requestmodel文件是封装的fetch请求方法。
  
  Common.js下是一些配置参数，其中有请求地址以及开发环境，其中开发环境中dev为内测环境（开发时使用），debug为公测环境，release为正式发布版本。
  
  common.js文件里调接口时一定要注意地址，如看到接口文档给的测试地址是https://fundmobapitest.eastmoney.com/FundMCApi/FundMBNew/CommunityMyAnswerList?pageIndex=&pageSize=&userid=&passportid=&ctoken=&utoken=&deviceid=&version=&product=&plat=，线上地址是 https://jijinbaapi.eastmoney.com/FundMCApi/FundMBNew/CommunityMyAnswerList?pageIndex=&pageSize=&userid=&passportid=&ctoken=&utoken=&deviceid=&version=&product=&plat=，则要把dev和debug地址设为https://fundmobapitest.eastmoney.com，把release地址和默认的改为"https://jijinbaapi.eastmoney.com"
  
  static serverList = {
  
  "marketServer": "https://jijinbaapi.eastmoney.com" //默认

  "release": {

  },
  
  "dev": {

  },
  
  "debug": {

  }
  
  }

• 项目上线：
  
  项目打包使用grunt（任务自动管理工具）命令，会完成打包，出现public文件夹，使用虚拟机打开win10系统，登录堡垒机网站，运行服务器，再将public目录下的文件复制到相应目录下（或新建目录），即可访问。

• Charles抓包工具的使用

2. 前端知识类

• 解决opacity属性覆盖子元素的问题：
  
  使用rgba解决,如opacity：0.1 可写成
  
  background-color: rgba(0, 123, 228, 0.1);

• react 路由跳转 ：
  
  import {Link} from "react-router-dom";

点击回到问题详情页

• git代码提交时，注意.gitignore文件，此文件的作用是忽略一些不需要提交到远程仓库的文件，比如依赖文件夹，.idea文件（编辑器），以及打包后生成的public文件夹以及其他文件。常用.gitignore文件内容为：public/
  
  node_modules/
  
  .idea/
  
  dist/
  
  release/
  
  package-lock.json
  
  若没有该文件可用vim新建。

• css布局实现单行文字水平居中，多行文字靠左(常用)：
  
  见https://blog.csdn.net/weixin_39855431/article/details/80210820

• 善用搜索 *
  
  用英文搜索，如图片默认有padding，需要取消默认样式，则搜img has extra padding.

• 图片默认会有padding，影响样式，应使用vertical-align: middle;一行代码即可解决该问题。

• React-router4.0路由切换后使页面在顶部：
  
  react-router4.0把路由当成了组件去用。你可以在顶部组件的生命周期中去写判断。例如这样。

componentWillReceiveProps(nextProps){

        //当路由切换时
        if(this.props.location !== nextProps.location){
            window.scrollTo(0,0)
        }
    }

• es6变量的解构赋值

3. 常用快捷键类（提高开发效率）

• webstorm下：
  
  command+option+L 格式化代码
  
  command+F 搜索

• Mac下：
  
  电脑锁屏：CTRL + SHIFT + Power
  
  option+空格 搜索软件
  
  开发者工具：option＋command＋i
  
  截图：command+shift+4
  
  浏览器刷新页面 Command + R

4. 备忘录类

• combo-show-detail项目本地入口主页：
  
  http://localhost:3117/#/?id=10066715

• 接口文档查找 问/答

• 手机app暗门：pppppp