微信小程序扫码登录-PC

1,170 阅读1分钟
准备工作
网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。

实现方式
使用插件 vue-wxlogin
1: 安装并引入组件
// 安装
npm install vue-wxlogin --save-dev
// 组件中引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }  
2: 页面中使用。例如:
<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,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=='"
>
</wxlogin>
微信官方文档参数说明:

3FF567D805C24B07815BB55BCC02E125.png

补充:

  • 1:href自定义样式
  • // 1:使用https链接地址。
    //  只需要把写好的css样式上传服务器 然后使用上传文件的链接 缺陷: 网络很慢时,会使用默认样式 存在一个闪烁的过程
    
    // 2: 使用base64方式 网站地址:(http://tool.chinaz.com/Tools/Base64.aspx) 例如: 
    // href必须使用 text/css模式,生成的base64添加到'data:text/css;base64,'后面就可以了
    .impowerBox .status.status_browser {
      display: none;
    }
    
    .impowerBox .qrcode {
      border: none;
      width: 150px;
      height: 150px;
    }
    
    
  • 2:redirect_uri: 回调地址,必须使用encodeURLComponent()编码
  • 3:回调页面 可以使用watch 也可以是用路由守卫钩子函数(建议使用路由钩子函数)