Vue 前端开发微信公众号总结

最新推荐文章于 2024-09-20 09:02:16 发布

Bayi·

最新推荐文章于 2024-09-20 09:02:16 发布

阅读量2.6k

点赞数 1

文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_42044542/article/details/115249791

版权

1.vue开发微信公众号页面需要的工具

vs code
微信开发者工具，用来调试公众号页面

2.会遇见的坑

用户使用微信公众号需要授权，而授权是需要跳到小程序的授权页面来进行的，用户授权完毕，微信会自动跳回公众号页面

//local就是完成授权后，微信会跳转的页面
const local = "http://xxxxx.com";

var wxappid = "wx321321321321";
var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wxappid}&redirect_uri=${local}/&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect`;

//window.location.replace(url) 将目前浏览器的地址替换掉，调用这个方法的网页，将不会被写入浏览记录
window.location.replace(url);

授权流程：前端拿到 👆 返回的code，扔给后端，后端拿code去换取openId等用户信息。

// 通过路由守卫判断用户是否授权
router.beforeEach((to, from, next) => {
    // 如果本地以存有 openId,说明用户已经登录，执行next放行
  let openId = sessionStorage.getItem("openId");
  if (openId) {
    next()
  } else {
    // 如果本地没有openId,就去路由中看看有没有用户授权后返回的code，然后拿code去和服务器换openId
    let code = getUrlKey("code");
    if (code) {
      api.getOpenId(code).then((res) => {
        sessionStorage.setItem("openId", res.openid);
        next()
      });
    } else {
      const local = window.location.href;
      var wxappid = "xxxxxxx";
      var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wxappid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect`;

      window.location.replace(url);
    }
  }
})
// 获取授权后的参数
function getUrlKey(name2) {
  var reg = new RegExp("(^|&)" + name2 + "=([^&]*)(&|$)");
  let url = window.location.href.split("#")[0];
  let search = url.split("?")[1];
  if (search) {
    var r = search.substr(0).match(reg);
    if (r !== null) return unescape(r[2]);
    return null;
  } else {
    return null;
  }
}

使用vue进行开发，npm run serve 后只会在本地运行，并不能作为上面说的 local 的跳转地址! 非常坑。十分不利于开发调试，解决办法：让后端同学配置 内网穿透，或者模拟登录(假数据，等完成流程打包上线在接入授权步骤），最干脆的办法就是前后端不分离，写完页面扔给后端让他套版去！毕竟公众号的本质就是 H5页面

个人经验，如有错误请及时告知。谢谢