附件预览项目采坑记

该项目是以前的老项目进行定制化开发，首先url上面进行改造，以前的路由是index.html#/docDetail/fileToken,现在在fileToken后面拼接了好多参数，路由匹配时候需要过滤掉/，防止路由匹配不上，所以先进行了base64转义，还有urlEncode，urlDecode，然后过滤掉url里面的/。采坑记如下：

1，第一天，页面死活是白屏，先判断路由后来发现后面有多余的/，匹配不到路由，但是后来没有多余的/，还是匹配不到，看了生产的路径配置也没问题，后来无意间发现cordova.js文件被我生产上面覆盖了，后来打开后就OK了，这是个大Bug。

2，第二天，各种小bug，因为移动端原生设备的调试，所以调试相当麻烦，原以为我已经把功能都调试完成了，然而事实并非我想象的那样，bug整理如下：

（1）首先base64转义问题，使用npm包进行base64下载后，各种module的缺失，后来网上找了一个方法，改了又改，chrome的console里面运行正常，但是safari浏览器下面运行报错，是几个参数未定义就使用报错，后来加上后Base64转义成功。
其实加Base64转义是因为路由匹配问题，用urlEncode进行加密，然后微服务再进行解密即可，后来因为Base64加密后仍然存在多余/，就改为用encode，decode进行加密解密。

encodeURIComponent   VS encodeURI

前者：传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。

后者：进行url跳转时可以整体使用encodeURI

我们只是针对url后面的参数进行了加密，所以应该用的是encodeURIComponent，相应的解密是：decodeURIComponent；误用后可能导致解密失败。这是个大bug；

3，再说到vue组件之间，这个调试了好久。原因是子组件需要修改props，响应的传递给父组件，知道vue的数据单向流传递，vue不允许子组件修改父组件的值，本来想用bus，试着将bus写在vue的根部，但是貌似实际打包之后用的时候不行，alert都没出来，最后自己新建了一个bus.js文件，进行Bus.$emit和Bus.$on进行数据的发射和接收。但是在接收后，发现computed计算属性里面的值并没有被改变，所以Bus接收过来的数据不能篡改computed计算属性里面的参数。就又将computed里面的参数写到data里面，给data里面的数据写了个method方法用于计算，然后Bus接收的参数才能改变data里面的数据。

4，开发调试过程实在艰难，原生的调试必须用到手机，但是webpack进行了混淆代码的操作，在chrome://inspect里面很难进行调试，所以如何打包时候将源码放进去，然后在谷歌浏览器里面进行调试，这个需要进行研究下。

 

【完】

世界在你的心里，而不是你的眼里