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

# 内网穿透

# 移动端调试神器

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

# 微信公众号开发文档

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

  1. 通过 userAgent 判断

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

    // 需要在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

方法:

//设置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 "";
}

使用

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

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

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

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

  1. 生成带参数的二维码
    1. 生成二维码 (opens new window)
  2. 用户扫描二维码
    1. 用户扫码后-获取用户 openid (opens new window)获取
    2. 用户关注/取关推送 (opens new window)获取 openid 和关注状况
  3. 关注后获取用户 openid
    1. 通过 openid 获取用户基本信息 (opens new window),可根据 openid 和 unionid 添加到用户信息中。
    2. 获取关注者用户列表 (opens new window),可以判断与用户是否关注
  4. 总结逻辑:用户通过扫码生成带有参数的二维码后可以获得微信的推送,拿到 openid 和订阅状态,然后通过 openid 可以获取 unionid 和微信基本信息,在与我们的数据做一个绑定,然后订阅之后可以获得推送,判断已经订阅就给他返回登录态(前端轮询/webStoket)。
上次更新: 3/9/2021, 7:54:33 PM