【Web前端】Vue项目中遇到的坑

开发环境

一开始只使用cnpm，一方面是墙的原因，另一方面是项目中使用了sass，不想再装ruby再build，而cnpm可以快速安装，基于这两点就愉快的使用起了cnpm；
用了一段时间还挺正常，直到项目引入了vux，使用loading组件的时候发现老是报$t未定义，上vux页面看了下，其已经提供了解决方案，说是用cnpm安装的依赖有问题，建议使用npm，这下吐血了。
最后只能搞了个曲折方案，把原来cnpm安装的vux卸载了，只是针对vux这个组件专门用npm安装，其他的还是用cnpm，居然可以工作起来，不管了，就先这样吧

微信开发者工具

用的是从官网下载的x64 0.7版本，但是一开始死活无法进行移动调试，在手机上装了个网络诊断的app，发现无法ping通同在一个局域网下的开发机，折腾了会，终于发现是win10开发机的网络发现被关闭导致，打开之后终于可以正常ping通了。
但是新问题又出现了，照着移动调试的操作说明进行，但是微信上还是无法打开网页，换用fidlle做http代理尝试，发现可以正常抓http包，且网页也能打开，怀疑是微信开发者工具的问题。
卸载微信开发者工具，重新安装，安装的时候发现x64版本的安装路径居然默认是C:\Program Files(x86)，不知道这个是否有影响，先将其改成C:\Program Files，然后安装成功启动后弹出的防火墙例外把公用网络和专用网络都勾上，再次进行移动调试，这次终于可以在微信上打开网页了，泪流满面！！

Vue

1. vue的组件式开发，一般使用单文件组件形式，且style使用scoped属性来是组件内的css设置与外界隔离，实现的手段是通过给组件内的所有元素赋予一个唯一的属性data-v-xxxxx，然后最终的生成的类选择器是带了这个属性选择的，从而实现了唯一性，但是有一点需要特别注意，就是组件的根元素，其同时是组件内部的元素，也是其父组件内部的一个子元素，所以会同时有两个data-v-xxx的属性，如果恰好该根元素上定义了一个class，其父组件的其他元素也定义了一个同名class的话，就会发生冲突，造成内部定义的class被覆盖，这点要尤为注意。
2. 使用css的时候建议使用类选择子而不是id选择子，因为id并没有做组件隔离，所以是全局的，容易和外部冲突，同时方便后续使用BEM命名规则

• 为了避免组件外部对组件进行css设置同时组件的根元素也进行了css设置从而有可能发生的class名字冲突，建议在组件外部设置时用组件名字命名class，而组件内部的根元素class用组件名字作前缀并结合后缀，来避免同名class的冲突而被覆盖的情况；另外，组件的定位，大小这些建议在组件外部来决定；
• 不要打印this.$refs.xxxx，vue会告警
• 在移动端，虚拟键盘弹出后，window.innerHeight会变小，如果开启一个定时器去不停观察组件this.$el.getBoundingClientRect()，会发现其返回的rect还是虚拟键盘弹出之前的值，并没有动态响应更新。但是通过document.getElementById('xxxx').getBoundingClientRect()直接操作DOM来获取的rect是正确的，且对比this.$el === document.getElementById('xxx')也是true。怀疑这是vue的一个bug。
  所以，用getBoundingClientRect来判断组件是否在可视范围内的时候，要注意这点。

Vuex + Vue-Router

1. router的onReady回调发生在所有的vue组件创建之前（包括App.vue），所以此时router.app.$store（router.app就是根实例Vue组件）是未定义，因为$store是在组件创建的生命周期回调中注入的（beforeEach的第一个回调也是同样的情况）

微信JS-SDK

• 无论wx.config是否成功失败，wx.ready注册的回调总是会被调用，只是失败的时候，wx.error注册的回调也会被调用
• iOS下如果使用audio标签，那么由于苹果不允许自动播放，需要用户手动点击才能触发播放（audio的loadstart事件都没有）；但是可以借助微信sdk，在ready回调中play或者getNetworkType函数的回调中play都行
• iOS环境，config要使用初始进入页面的url；Android则使用当前页面url（微信开发者工具虽然ua模拟ios，但是具体工作表现和android一样，这点要注意）

第三方库

• vux：感觉上不稳定，版本之间的兼容性很糟糕，即使是rc版本，也发生过另一个同事升级到稍高的一个rc版本，结果出现运行时$route找不到的问题
• 手淘的flexible自适应库，主要是针对iOS设备设置了dpr，并且把布局视口放大到和屏幕分辨率一样，虽然带来了像素级适配的好处，但是也给mint-ui这样的库使用带来了麻烦，会这些库中使用的字体和界面的ui变得比较小；还带来一个问题就是有可能会让大屏设置的微信二维码长按无法识别（微信二维码是截屏后识别的）

CSS

• 背景
  一般会使用background-attachment:fixed来使得背景图片固定，但是要注意这个fixed的设置是使得背景图变成类似元素的fixed定位，依据浏览器的视口来定位的，所以理解不到位容易出现设置了这个之后图片不见了的情况

ES6

• 默认vue的工程是不会引入babel-pollyfill的，所以尤其要注意对ES6新增的api和对象的使用，Promise这样的对象由于在移动端浏览器的支持相对完善，所以直接使用一般不会有问题；但是想Proxy这样的对象，比如在iOS 9.2下就不被原生支持，直接导致页面无法打开。解决方案也比较简单，要么不使用出问题的对象或api，要么引入babel-pollyfill（需要在入口就import，会引入一个运行时来支持）