目的：

在web移動端項目開發(fā)中，經常會遇到各種各樣的兼容性問題，但是之前都缺少總結，以前踩的坑可能還會再去踩一遍，所以這邊做個總結，讓之后來的新同事能夠知道、了解我們之前踩的坑，并且之后開發(fā)中避免再入坑，提升開發(fā)效率；

問題：

問題一：當使用vue等SPA框架時候，頁面跳轉時候IOS的微信標題不會改變

• 問題 SPA項目路由跳轉時候，android手機與pc端通過document.title方法都會改變網頁標題，但是ios中不能改變；

• 解決

export const setTitle = (title) => {
// 微信瀏覽器中設置對應頁面的標題
//解決：IOS微信瀏覽器中用document.title 設置標題無效
   var body = document.getElementsByTagName('body')[0];
   document.title = title;
   var iframe = document.createElement("iframe");
   iframe.setAttribute("src", "logo.png");
   iframe.setAttribute("style", "display:none");
   iframe.addEventListener('load', function() {
       setTimeout(function() {
           try{
               iframe.removeEventListener('load');
           }catch (err){}
           document.body.removeChild(iframe);
       }, 0);
   });
   document.body.appendChild(iframe);
};

問題二：hash與history模式下，請求調用微信jssdk的config的坑

history的 缺點

1、需要額外配置 nginx

2、如果你每一個頁面都需要微信分享，那么每一個子路由都需要用當前的 URL 換取微信分享 config

3、android與ios有區(qū)別，當android通過localhost.href獲取當前網頁的鏈接時候，會獲得開始進入頁面的路由，而不是當前頁面的路由；意思是：我剛進入頁面是http://www.XXXXXXX.com/home ,然后之后我又到了列表頁面：http://www.XXXXXXX.com/list ，但是當我獲取的時候，我始終獲取的是 http://www.XXXXXXX.com/home ；所以config配置一直是錯誤的，不能調用對應的jssdk； IOS是正常的；

4、使用history模式時候，需要對機型做判斷，不然config參數錯誤，并且也會出現意想不到的問題；

hash的 缺點

1、URL 里面有個 # ，不好看。但是在移動端看不到url，沒有太大影響

所以最終還是使用hash更佳方便； 在hash模式下，用當前的 URL 換取微信分享 config配置時候，只需要把當前域名傳給后臺換config就可以了，并且只需要做一次配置即可；可以這樣寫：

const url = window.location.href.split('#')[0]

或者直接寫主域名。例如http://wwww.baidu.com/ 最后一定要加'/'，不然就會出錯；

問題三：在調用微信拍照時候，微信瀏覽器會重啟

關于這個問題，問了微信的技術，他們那邊給出的原因是：手機內存不足，拉起相機的時候后臺網頁進程被系統(tǒng)回收，并沒有好的解決方案；如果遇到該問題，請先拍照，然后通過選擇相冊來上傳圖片