目的:
在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/ 最后一定要加'/',不然就会出错;
问题三:在调用微信拍照时候,微信浏览器会重启
关于这个问题,问了微信的技术,他们那边给出的原因是:手机内存不足,拉起相机的时候后台网页进程被系统回收,并没有好的解决方案;如果遇到该问题,请先拍照,然后通过选择相册来上传图片