VueWeChatパブリックアカウント開発h5許可ログイン

Vueパブリックアカウントh5Webページは、WeChat許可ログインを実現します

このブログは、公式アカウントを開始した友人の落とし穴を避けるために書かれています。私は私のようにバックグラウンドでこの機能を実行したことはありません。多くのブログを検索しました。プロセスは非常に困難です。難しくはありません。上記のコード（直接コピーできます）。

1.公式アカウントh5のWebページ認証は、公式アカウント設定で構成されています

2. h5 Webページの承認で最も重要なことは、コールバックアドレスです。このアドレスは、承認後に戻るページです。バックエンドを構成することを忘れないでください。そうしないと、機能しません。

3.フロントエンドロジックは1.ページコールバック、2。コードの取得、3。インターセプトコード、4。バックエンドインタラクションコード、appidは自分の公式アカウントのappidです。変更することを忘れないでください。ローカルでは通常変更せず、URIComponent分析を直接エンコードします。

 //拿到微信code
    async toWx() {
      // 授权回调
      let local = window.location.href.split("#")[0];
      let url =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5e173bc64f0b0888&redirect_uri=" +
        encodeURIComponent(local) +
        "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      console.log("window.location.href", window.location.href);
      let code = this.GetParam(window.location.href.split("#")[0], "code");
      if (!code) {
        window.location.href = url;
        // console.log("code", code);
      } else {
        this.code = this.GetParam(window.location.href, "code");
        console.log("code", code);
      }
    },
    // 截取code
    GetParam(url, code) {
      url = url + "";
      let regstr = "/(\\?|\\&)" + code + "=([^\\&]+)/";
      let reg = eval(regstr);
      //eval可以将 regstr字符串转换为 正则表达式
      let result = url.match(reg);
      if (result && result[2]) {
        return result[2];
      }
    },
   
  },

ブログを書き始めたばかりです。あまり書いていないのでご容赦ください。ご不明な点がございましたら、直接差し引くか、メッセージを残してください。