公众号网页开发经验总结
内网穿透
sunny-Ngrok：https://www.ngrok.cc(opens 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;
}
通过 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");
同样的，也可以做登录状态保存。
扫码关注公众号登录网站
生成带参数的二维码
用户扫描二维码
用户扫码后-获取用户 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
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
