微信扫码登录

在index.html里面引入js

<script src='https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'></script>

<nz-tabset [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)">
    <nz-tab [nzTitle]="'账号登录'">
    </nz-tab>
    <nz-tab [nzTitle]="'扫码登录'">
      <div id='login_container'></div>
    </nz-tab>
  </nz-tabset>

ts：

switch({ index }: NzTabChangeEvent): void {
   // console.log(index);
    // 扫码登录
    if ( index === 1){
      // @ts-ignore
      const obj = new WxLogin({
        self_redirect: true,
        id: ' ',
        appid: ' ',
        scope: ' ',
        redirect_uri: ' ',
        response_type: ' ',
        state: ' ',
        style: ' ',
        href: ''
      });
      const that = this;
      // tslint:disable-next-line:only-arrow-functions typedef
      window.addEventListener('message', function(event) {
        console.log(event.data);
        const resinfo = event.data;
        console.log(resinfo.data.LoginByOauthPc);
        const token = {
          token: resinfo.data.LoginByOauthPc.token
        };
        const data: any = {
          token: resinfo.data.LoginByOauthPc.token,
        };
        // 设置用户Token信息
        that.tokenService.set(token);
        that.settingsService.setUser(data);
        // 重新获取 StartupService 内容，我们始终认为应用信息一般都会受当前用户授权范围而影响
        that.startupSrv.load().then(() => {
          // @ts-ignore
          let url = that.tokenService.referrer.url || '/';
          if (url.includes('/passport')) {
            url = '/';
          }
          that.router.navigateByUrl('/');
        });
      });
    }
  }