移动端调试

VConsole：https://github.com/Tencent/vConsole

网页仅在微信中打开

通过 userAgent 判断是否是微信环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1、
function getIsWxClient() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    }
    return false;
}
// 2、
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isAndroid = ua.indexOf('android') != -1;
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (!isWeixin) {
    document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"><linkrel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
    document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><divclass="weui_text_area"><h4class="weui_msg_title">请在微信客户端打开链接</h4class=></div></div>';
} else {
    // 
}

通过 WeixinJSBridge 判断(推荐)

1
2
3
4
5
6
7
8
// 需要在JS-SDK加载之后判断
function getIsWxClient() {
    if (typeof WeixinJSBridge !== "undefined") {
        return true;
    } else {
        return false;
    }
}

公众号内保持登录状态

微信内网页不可使用 local/sessionStorage 储存，因为它只是一个 webview 组件，并不是一个浏览器。 但是我们可以使用 cookie 储存的方式
参考：关于微信中的 localStorage 及使用 cookie 的解决方案：https://my.oschina.net/crazymus/blog/425650

方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 设置cookie
function setCookie(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) + (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
}

// 取回cookie
function getCookie(c_name) {
    if (document.cookie.length > 0) {
        let c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
        if (c_end == -1) c_end = document.cookie.length;
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

使用：

1
2
3
4
5
//设置cookie，有效期为365天
setCookie("username", "123", 365);

//取回，若cookie失效，将返回空
getCookie("username");

同样的，也可以做登录状态保存。

ios 端的时间格式问题

在做移动端开发的时候，使用 new Date() 转换后台返回的格式时，在 chrome 之类浏览器和安卓手机上都显示正常，但是在 ios 上显示 Invalid Date。
例如: new Date(“2020-05-25 11:11:11”).getTime() 正常情况下可以获取时间戳，但是在 iOS 端解析不了。
后来查找发现 ios 只识别 yyyy/mm/dd 这类斜杠格式的日期。

解决办法：

1
2
freedomTime = freedomTime.replace(/-/g, "/");
new Date(freedomTime).getTime();

判断设备

需要解决 ios 和安卓的兼容，首先你的判断当前的设备类型，可以使用mobile-device-detect 这个库来判断。

微信 H5 页面兼容的坑

  • ios 端兼容 input 光标高度
  • ios 端微信 H5 上下滑动时卡顿，页面丢失
  • ios 键盘唤起，键盘收起以后页面不归位
  • 安卓弹出的键盘遮盖文本框
  • Vue 中路由使用 hash 模式，开发微信 H5 页面分享时在安卓上设置分享成功，但是 ios 的分享异常

这五个问题可以在 微信 H5 页面前端开发，大多数人都会遇到的几个兼容性坑 中查看原因和解决方法