开发小手册

发表于 | 分类于 |
字数统计: 1.4k 字 | 阅读时长 ≈ 5 分钟

Html

1
<a href='//hongbao.mogu.com/h5/list'></a> 可以自适应 http、https

兜底

开发中，时刻注意兜底，比如展示一个图片，要考虑到后台没有返回数据时的兜底；展示数据时，要做兼容处理 this.arr = result || [],不然会有很多报错，因为变量Undefined，页面无法渲染

Git

Fork

在刚开始实习时，为了谨慎起见，学姐要求fork项目来进行开发，开发完毕，再到gitlab提mr，学姐查看完毕再合到正式的分支上，过程如下

  • 先在项目中fork到自己的远程仓库
  • 打开命令行，进入文件夹
  • git status 查看是否更改
  • git pull 更新远程仓库
  • git remote -v 查看关联的远程仓库的详细信息
    • 一个别名仓库下会有两个地址
      • fetch 用于从远程仓库拉代码
      • push 用于向远程仓库提交代码
  • git remote add 别名 [fork的仓库地址]
  • git push 别名 [远程仓库分支名]
  • 在gitlab 进行和并提交
  • 删除仓库信息
    • git remote remove 别名

建立并切换远程分支

一种办法是直接在gitlab-Commits-Branches创建分支

一种是命令行建

  • clone代码后，新建且切换分支 git checkout -b feature/reason
  • 提交时 git push -u origin feature/reason feature/reason

commit

1
2
3
git commit -am === git commit -a -m == git add . git commit -m

git commit --amand 可以重写commit内容

查看Log树

1
git log --oneline --graph

stash

当自己在develop分支开发时，远端develop有新的更改，只需要把本地的修改stash，pull拉取远端的develop新代码后再pop出存起来的本地修改，会自动合并，有冲突会提示

微信小程序

控制台诸多报错/卡掉/突然无数据返回

重启微信开发者工具，重新导入项目，一次不行试两次，基本都是玄学问题

简单写法总结

1
2
this.$couponlist.setData({tabType}) == this.$couponlist.setData({tabType:tabType})
// 因为小程序赋值还挺麻烦的，需要setData,使用这种方法还是省力不少

当触发 点击事件 的按钮为遍历出来时

1
does not have a method 'logger' to handle event 'tap'

需要在绑定点击事件时：bindtap=”$.logger”

vscode

断点

直接在代码中写一句debugger，断点完毕~

开启 emmet语法

1
2
3
4
5
6
7
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
"emmet.showExpandedAbbreviation": "always",
"emmet.includeLanguages": {
  "vue-html": "html",
  "vue": "html"
}

开项目

终端切到目录，直接code .

CSS

渐变线

有时候标题两边会有渐变线，可以用css解决，linear-gradient默认是从上到下的顺序渐变，可以在第一个参数设置方向，然后是 颜色 从哪个地方开始变（很有用~）

1
background-image: linear-gradient(-90deg, #FFFFFF 0%, #D8D8D8 100%);

React

constructor及super

  • constructor
    • 表示父类的构造方法，用来新建父类的this对象，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。
  • super( )子类
    • 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错，因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法；子类就得不到this对象。
  • super()和super(props)的区别
    • 就是你是否需要在构造函数内使用this.props，如果需要那么你就必须要写props，如果不需要，那么写不写效果是一样的

jsx不能实现常规的换行操作

1
2
3
4
const html  = reason.replace(/\&/g,'<br/>')
return (
    <div dangerouslySetInnerHTML={{_html:html}}></div>
)

JS

简单写法总结

1
2
3
!isMoreloading && this.setData({.}) 相当于if(!isMoreloading) {this.setData({.})}

reset(tabType='',isResetList=false) 可以设置默认参数

forEach不能break跳出循环，需要换成for循环

1
会报错 VM192:3 Uncaught SyntaxError: Illegal break statement

从数组中随机取指定数目的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getRandomArrayElements(arr, count) {
    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}


var items = ['1','2','4','5','6','7','8','9','10'];
console.log( getRandomArrayElements(items, 4) );

过滤数组内不想要的元素

在项目中比较常用到哦！比如把已经选择的元素从数组中剔除

1
arr = arr.filter( item => item.emotionName != tab.emotionName)

操作系统

端口占用

1
2
lsof -i :端口号
kill 9 端口号

Npm

当我们本地开发一个模块时，可以在模块里

1
npm link

模块会被链接到全局，然后再到引用这个模块的项目里

1
npm link 模块文件名

即可实现模块到项目的映射

头条小程序

  • 不支持引入json文件，需要把数据放到js文件中，export default，然后在所需要的文件中import即可
  • 不支持css嵌套书写，但支持element, element选择器，所以不必头疼命名啦

移动端

输入框

上下跳动

有试过类似滑动卡片效果的项目，里面有输入框，当移动端书写的时候，输入法上有 上/下 跳动的按钮，如果用户点击 上/下，会相应跳到 上/下 的输入框，因为是滑动卡片，所以也会相应跳到上/下一个卡片，体验非常不好。

解决：需要把输入框的上下跳转禁掉；把输入框全部置为disabled，点击的当前输入框移除disabled属性即可。