work notes

本喵，一个快乐的web开发肥宅程序媛，参与过手机端、电视TV端、电脑端的开发。工作之余，总结了一些经验【避坑指南】分享给大家～

1.　　webView内嵌h5页面时，如果内嵌的页面有出现手机自带键盘或者任何可能触发手机自带键盘操作的需求，答应我，页面顶部导航栏一定要让客户端小伙伴来做。不然，且不说顶部高度需要根据各设备分辨率进行适配，单单手机自带键盘的弹出导致页面高度值及offsetTop值的变化就够你搞一个通宵的补救方案【就算搞出来了，也没有原生的顶部导航辣么完美】。对了，想要用position:fixed定位顶部导航栏的小伙伴听好了，木有用的，不要问我是怎么知道的QAQ……

2.　　想要非a标签、input标签等允许获取焦点的元素获取焦点的话，加上tabIndex="1"，tabIndex的值正常情况下是不影响的，可以随便填。除非你有用tab键切换焦点的需求，这样的话，需要注意一下，tabIndex值越大，tab值切换越先获取焦点。如果某元素上加上了tabIndex，不想让其点击获取焦点，只想让其按键【keyDown、keyUp等】，给这个元素加上style="pointer-events:none;"就行啦。

3.　　使用jq-treetable插件的时候，需要全部展开可以用：$(元素).treetable('expandAll');即可。使用data-tt-id，和data-tt-parent-id的时候，一定注意两个值不能相同，相同会导致代码循环调用，浏览器会直接由于out of memory崩溃掉【鬼知道我为了找这个由于数据引起的bug找了多久。。。】

4.　　使用bootstrap写后台代码的时候，经常会遇到自带插件不够用的情况，右转度娘：metronic，这个网站上的很多插件都可以用，源码需要付费才能下载。但是其实它里面用的插件也是网上公用的，很少有它自行开发的那种。所以这就意味着，你可以在网页上查看Element、Network等找出这个插件的名字就能用了。

5.　　做手机端开发的时候，经常性有个需求就是，从客户端分享网页去微信或者QQ或者微博啥的。在微信、QQ、微博打开分享网页，有个需求是用户点击查看更多时，需要判断用户是否安装此应用，如果安装了就去打开客户端，未安装跳转到AppStore或者应用市场。

　　　做这部分，一般需要客户端配置短链处理，网页打开直接使用location.href或者iframe打开短链即可。讨厌就讨厌在需要在社交软件里打开，QQ还好，软件未做处理，微信和微博会在打开时做拦截处理，根本不会跳转到短链上去【当然这也是为了用户的信息安全】。

　　　在这里说一下，想去网上搜如何判断用户是否安装某应用的小伙伴不用费心了，是木有的。这时候会有小伙伴跳出来说，不对啊，为啥我从微信里打开部分软件的链接是可以一键跳转的呢？比如网易新闻啥的。哈哈，当时我的亲爱的PM也是这么质问我的。。。

　　　脸上笑嘻嘻，心里MMP的我又跑去调研了。原来IOS9+提供了universal link的处理，可以在微信和QQ等直接打开，Android版和IOS9-的网页会直接跳转到应用宝网页版，应用宝会判断此应用是需要打开还是下载。这时候心里就琢磨，凭啥应用宝会给网易新闻这样的处理呀，不服不服！去应用宝网站一看，，，原来网易是应用宝的客户，人家花了钱的。。。

　　　所以曲线救国，当时的处理方式为：准备一个引导页。点击分享页面，if{是IOS设备，1s后直接跳转到引导页}，else{ if{是微信或微博，直接跳转至引导页}else{尝试使用iframe和location.href打开，3s延时后默认打不开软件跳转至引导页}}。引导页逻辑：判断是微信或微博【QQ可以直接打开】尝试使用iframe[仅android]和location.href打开，3s延时后默认打不开软件跳转至下载页[应用宝或AppStore]。

6.　　强制不换行 p{white-space:nowrap;}  自动换行 p{word-wrap:break-word;word-break:normal;} 　强制英文单词断行 p{word-break:break-all;}

　　　*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

　　 嗒哒！今天先到这里喵，欢迎大家批评指正～～～