公众号网页开发经验总结

摘要：用户通过扫码生成带有参数的二维码后可以获得微信的推送，拿到 openid 和订阅状态，然后通过 openid 可以获取 unionid 和微信基本信息，在与我们的数据做一个绑定，然后订阅之后可以获得推送

内网穿透

sunny-Ngrok：https://www.ngrok.cc(opens new window)

修改 webpack-dev-server 的 disableHostCheck: true

移动端调试神器

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

微信公众号开发文档

公众号开发文档(opens new window)

JS-WX-SDK 文档(opens new window)

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

通过 userAgent 判断

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

通过 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");

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

扫码关注公众号登录网站

生成带参数的二维码

生成二维码(opens new window)

用户扫描二维码

用户扫码后-获取用户 openid(opens new window)获取

用户关注/取关推送(opens new window)获取 openid 和关注状况

关注后获取用户 openid

通过 openid 获取用户基本信息(opens new window)，可根据 openid 和 unionid 添加到用户信息中。

获取关注者用户列表(opens new window)，可以判断与用户是否关注

总结逻辑：用户通过扫码生成带有参数的二维码后可以获得微信的推送，拿到 openid 和订阅状态，然后通过 openid 可以获取 unionid 和微信基本信息，在与我们的数据做一个绑定，然后订阅之后可以获得推送，判断已经订阅就给他返回登录态（前端轮询/webStoket）。

原文来自：https://www.zhangningle.top/articles/WeApp/公众号网页开发经验总结.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_10265