公众号网页开发经验总结

内网穿透

sunny-Ngrok：https://www.ngrok.ccopen in new window
修改 webpack-dev-server 的 disableHostCheck: true

移动端调试神器

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

微信公众号开发文档

如何让网页只在微信内打开

通过 userAgent 判断

// 判断是否是微信环境
function getIsWxClient() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  }
  return false;
}

1
2
3
4
5
6
7
8

通过 WeixinJSBridge 判断(推荐)

// 需要在JS-SDK加载之后判断
function getIsWxClient() {
  if (typeof WeixinJSBridge !== "undefined") {
    return true;
  } else {
    return false;
  }
}

1
2
3
4
5
6
7
8

公众号内保持登录状态

微信内网页不可使用 local/sessionStorage 储存，因为它只是一个 webview 组件，并不是一个浏览器。但是我们可以使用 cookie 储存的方式

参考：关于微信中的 localStorage 及使用 cookie 的解决方案：https://my.oschina.net/crazymus/blog/425650

方法：

//设置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
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

使用

//设置cookie，有效期为365天
setCookie("username", "123", 365);

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

1
2
3
4
5

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

ios 端的时间格式问题

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

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

1
2

判断设备

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

扫码关注公众号登录网站

生成带参数的二维码
1. 生成二维码open in new window
用户扫描二维码
1. 用户扫码后-获取用户 openidopen in new window获取
2. 用户关注/取关推送open in new window获取 openid 和关注状况
关注后获取用户 openid
1. 通过 openid 获取用户基本信息open in new window，可根据 openid 和 unionid 添加到用户信息中。
2. 获取关注者用户列表open in new window，可以判断与用户是否关注
总结逻辑：用户通过扫码生成带有参数的二维码后可以获得微信的推送，拿到 openid 和订阅状态，然后通过 openid 可以获取 unionid 和微信基本信息，在与我们的数据做一个绑定，然后订阅之后可以获得推送，判断已经订阅就给他返回登录态（前端轮询/webStoket）。

微信 H5 页面兼容的坑

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

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

# 公众号网页开发经验总结

# 内网穿透

# 移动端调试神器

# 微信公众号开发文档

# 如何让网页只在微信内打开

# 公众号内保持登录状态

# ios 端的时间格式问题

# 判断设备

# 扫码关注公众号登录网站

# 微信 H5 页面兼容的坑