The preparatory work
Website application wechat login is a wechat OAuth2.0 authorized login system based on OAuth2.0 protocol standard. Before wechat OAuth2.0 authorized login and access, register a developer account on wechat open platform, and have an approved website application, and obtain the corresponding AppID and AppSecret. After applying for wechat login and passing the approval, the access process can start.


implementation
Use the plug-in VUe-wxLogin
1: Installs and imports components 
NPM install vue-wxlogin --save-dev import wxlogin from 'vue-wxlogin' components: {wxlogin}Copy the code
2: used on the page. Such as: 
<wxlogin :appid="$store.getters.wechat_app_id" :scope="'snsapi_login'" :theme="'black'" :redirect_uri="encodeURIComponent($store.getters.base_url + 'new-home/#/new-home/structure/? num=' + Math.ceil(Math.random() * 1000))" :href="'data:text/css; base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBka XNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4O w0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=='" > </wxlogin>Copy the code
Parameter description of wechat official document:

Supplement:

  • 1:href custom style
    • // 1: use HTTPS to link to the address. // Just upload the CSS style to the server and use the link to upload the file. Flaw: When the network is slow, the default style will be used and there is a flicker process. Using base64 way web site address: (http://tool.chinaz.com/Tools/Base64.aspx), for example: / / href must use text/CSS mode, the generated base64 added to the 'data: text/CSS; Impowerbox.status_browser {display: none; } .impowerBox .qrcode { border: none; width: 150px; height: 150px; }Copy the code
  • 2: redirect_URI: callback address, must be encoded using encodeURLComponent()
  • 3: The callback page can use watch or the router guard hook function (recommended).