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/ 最后一定要加'/',不然就会出错;

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

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

推荐阅读更多精彩内容