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页面

   

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