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