SPA在微信浏览器中的兼容问题

目的：

在web移动端项目开发中，经常会遇到各种各样的兼容性问题，但是之前都缺少总结，以前踩的坑可能还会再去踩一遍，所以这边做个总结，让之后来的新同事能够知道、了解我们之前踩的坑，并且之后开发中避免再入坑，提升开发效率；

问题：

问题一：当使用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有区别，当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/ 最后一定要加'/'，不然就会出错；

问题三：在调用微信拍照时候，微信浏览器会重启

关于这个问题，问了微信的技术，他们那边给出的原因是：手机内存不足，拉起相机的时候后台网页进程被系统回收，并没有好的解决方案；如果遇到该问题，请先拍照，然后通过选择相册来上传图片