一个人的前端项目，踩过的那些坑，一一道来。

【第一道坑】：ios微信环境下，对于单页应用(spa)项目，会存在document.title不会生效的问题。

终极解决方案，如下：

if((/iphone|ipad/gi).test(window.navigator.appVersion)){
     var $body = $('body');
     document.title = o;
     // hack在微信等webview中无法修改document.title的情况
     var $iframe = $('<iframe src="/favicon.ico"></iframe>').on('load', function() {
     setTimeout(function() {
     $iframe.off('load').remove()
     }, 0)
   }).appendTo($body)
}else{
     document.title = o;
}

 

【第二道坑】： 最新的微信JSSDK遇到的问题， spa 生产签名出现的问题

1> ios 微信环境下，对于单页应用（spa）项目，会存在 根绝url,生成的签名失效的问题。发现，直接点击url进去的签名 是没有问题的。

2> android 没有问题的

终极解决方案：把需要用到的签名页面，还是老老实实的换成  .html 页面，去掉路由。

 

【第三道坑】：页面切换动画，会执行2次情况，找到原因。发现是 display 和  visibility 的区别。

1>  页面的 display 显示隐藏是导致动画的再次执行

2>  visibility 不会出现这种问题。

 

【第四道坑】：最新的微信JSSDK， "获取地理位置"

1> android机器出现了在弱wifi的网络情况下，会出现获取失败的情况。（解决方案：开启移动数据包就应该没有问题了）；

2> ios 地理位置 弱wifi 网络也没有问题。

 

【第五道坑】：关于Html5的range的兼容性 问题

 

百度统计，如何针对单页面结构做统计分析 ：

第一步，引入js文件：

var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?d7ac9c8c30d1bf83e99cf6e29c855c09";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();

第二步，针对router做统计：

var currentUrl = window.DDCore.router.getRouter();
currentUrl = '/#!' + currentUrl;
_hmt.push(['_trackPageview', currentUrl]);