准备工作
网站应用微信登录是基于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>
微信官方文档参数说明:
补充:
// 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;
}