前端工作遇到的小知识点

  1. 顶部子元素的margin-top直接到父元素上,目前简单的处理方法将子元素margin-top变成父元素padding-top,感觉其他方式也可以解决比如改变BFC,需要补一下BFC,还不太熟
  2. 微信小程序中,纵向的高度一定不要px,否则到不同屏幕上差异很明显,横向如果写滑动的效果,计算的left值可以用px,因为获取到的屏幕的宽度是一个以px为单位的值,用px才不会出现位置上偏移的问题。
  3. 文本溢出无法实现时,使用height,line-height,overflow做
  4. 做列表勾选同步时,前端修改了数据勾选状态,如果请求后端同步时失败,应回滚前端勾选状态,这中列表数据自带勾选状态的做法,也是一种性能优化的经验
  5. 接口全局配置,如果有两套环境(生产和测试),在页面里用到相关接口url,必须通过配置文件来引用,而不是直接写,如果有不同,就切分字符串,不然你绝对会不停的改来改去。
  6. 原生小程序,setData方法绝对不能set一个undefined值,否则真机会报一个null的错误,同时定位这种错误的方法是打console看这个null的log在console的前面还是后面来定位,巨坑哦
  7. 原生小程序组件在一个页面多次使用,并且要实现使用父组件的data作为组件的property,即在子组件要改变父组件data,来引起子组件properties变化,从而引起视图变化,达到一中父子组件通信的目的,可以充分使用triggerEvent方法,并且在触发时传入type字符串,以实现多态。
  8. 遇到一个问题,小程序在audio播放toggle时flag不生效,起初以为是flag的原因,结果是因为每次都生成了新的播放实例,在新的播放实例上调stop是无效的
  9. calc运算符号是要空格的,要不然calc出不来;
  10. 小程序wxs出错弹层类型拿数据后会在真机直接奔溃,如果你确定template等传值都是对的,那么这个时候你需要看看wxs传入的值是否正确,这在控制台是不会报错的
  11. 列表点击弹出列表选取列表项逻辑应该是,点第一个列表时记录该列表项id,然后在第二个列表点确定时设置下一个id,并跑接口,取消则清空两个id;
  12. 生产环境小程序在打开时有两种情况,第一种是打开后到首页,这种无疑会触发onLaunch;还有一种是打开后进入其它页面然后关闭,再马上打开,这时还在之前显示的页面,这时并没有触发onLaunch;
  13. 小程序中innerAudioContext使用必须开启铃声状态才有声音哦,同时oncanplay可能会有问题
  14. 防止同时播放问题,保证运行的父组件中只有一个播放context,同时再播放前将其他全部标志设置为false
  15. cpm config set registry http://fjdsklajf.com;
  16. scss _前缀是用在一个文件不需要编译时,引入时可以去掉下划线
  17. this.$parent就是app实例,在wepy的page中
  18. 调试一个框架的api,可以在方法里面console.log(arguments),看看需要传什么,然后可以相应知道怎么用
  19. 背景大圆弧可以用border-bottom-left-radius结合right来做,给具体的值
  20. wepy中报找不到wxss目前发现了两个原因,第一子组件sass引用路径错误,第二命名使用了toast这种的保留组件名
  21. 小程序wepy框架 unexpected attribute near .sync(.once),检查是否在components中引入了组件
  22. textarea的换行符,可以用white-space: pre-wrap显示生效
  23. font-size,text-indent百分数值表示总是根据父元素继承的大小来计算,font-size可以继承(小程序button下子元素字体大小不能继承),继承的是计算值而不是百分数也就是计算了以后得到的具体的值,border,margin,padding,background不能继承,继承的值没有特殊性,连0都不如,比如通配选择器的样式就可以覆盖继承值
  24. 特殊性:id 0100 .some-class(类) *[alt](属性选择器) :first-child(伪类) 0010 img :before(伪元素)0001
  25. text-indent只用于块级元素(如果块级首行有一个图像,则图像也会移动),同时可以为负
  26. margin-top,margin-bottom的百分数值是相对于父元素宽度而不是高度,否则会出现高度地狱
  27. 行内非替换元素上下位置的margin现实上与没有是一样,同时负外边距时,上下外边距和行高不受影响
  28. 输入框要加样式,占满整行,并且要有高度
  29. 子view有margin-top会有滚动条,可以flex column 和min-height 100%,来解决
  30. line-height居中与flex居中不要混用
  31. laya中居中一个元素可以用宽度除以2和高度除以2
  32. 小程序里面的模板消息需要表单支持

此文长期更新,遇到什么就写什么,mark


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com

×

喜欢就点赞,疼爱就打赏