公众号网页开发经验总结

更新日期: 2021-05-09阅读: 1.5k标签: 公众号

内网穿透

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

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


扫码关注公众号登录网站

生成带参数的二维码

    生成二维码(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://www.fly63.com/article/detial/10265

推荐几款常用的微信公众号排版工具

作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。

微信公众号默认背景为灰色的解决方法

最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调。 使用单纯的CSS没能解决这个问题,在网上查了些资料也没发现特别好的方法,最后还是采用了JS解决这个问题。

Vue微信公众号兼容微信JS-SDK,使用分享等功能

最近项目是基于微信公众号的Vue项目,有一个非常重要的分享功能,不搞不知道一搞不得了,发现vue-router和微信SDK配置有很大的兼容性问题,我们一起一个一个方法、一个一个api尝试才找到解决办法

Node微信公众号开发 cheerio网页抓取和memory-cache缓存模块

运用以上模块,对我个人的公众号做了如下修改:access_token 存储方式由 fs.writeFile 写入本地文件改为利用缓存,由于 wp-json 会导致原站点安全性降低,故数据获取改用 cheerio 爬取网站内容对象获得

微信公众号网页授权

在微信公众号开发时候,一般需要使用到微信登录功能,这里就需要加入微信授权,来获取用户的openid(或unionid),利用openid(或unionid)做唯一的身份识别。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!