vue 微信扫码登录(自定义样式)

使用插件

https://www.npmjs.com/package/vue-wxlogin

// 安装
npm install vue-wxlogin --save-dev
// 组件中引入
import wxlogin from 'vue-wxlogin'
...
components: { wxlogin }
...

html中使用

<wxlogin
  :appid="$store.getters.wechat_app_id"
  :scope="'snsapi_login'"
  :theme="'black'"
  :redirect_uri="encodeURIComponent($store.getters.base_url + 'new-home/#/new-home/structure')"
  :href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=='" rel="external nofollow"
>
</wxlogin>

参数说明

  • appid: 应用唯一标识（前面认证网页应用中获得）
  • scope: 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi\_login即可
  • theme: 提供"black"、"white"可选，默认为黑色文字描述。
  • href: 自定义样式链接，只能使用https链接或者base64编码的地址

href自定义样式

1、使用https链接地址。

这个很简单，只需要把自定义的css文件上传到服务器，然后使用服务器上的css文件即可（缺点：如果网络比较慢，首先加载默认样式，然后才回使用自定义样式，有一个闪烁的过程）

2、使用base64

https://www.jb51.net/tools/base64.htm（转换base64编码工具）

// 自定义二维码样式
.impowerBox .title {
 display: none;
}
.impowerBox .status.status_browser {
 display: none;
}
.impowerBox .qrcode {
 border: none;
 width: 200px;
 height: 200px;
}
.impowerBox .status{
 display: none
}

3、href必须使用 text/css模式,生成的base64添加到'data:text/css;base64,'后面就可以了

href="data:text/css;base64,
LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=="

4、需要注意的地方

redirect_uri: 回调地址，必须使用encodeURLComponent()编码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue+abp微信扫码登录的实现代码示例

    Vue+abp微信扫码登录的实现代码示例

    最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册微信开放平台账号# 在微信开放平台注册,注意是开放平台不是公众平台,这里需要300元,然后申请网站应用.审核通过后获取到AppID和AppSecret以及登记的网站url.只有此url下的地址微信扫码后才能回调. 具体申请条件见官方文档. 生成登录二维码# 在vue登录页面嵌入登录二维码,根据官方文

  • vue 微信扫码登录(自定义样式)

    vue 微信扫码登录(自定义样式)

    使用插件 https://www.npmjs.com/package/vue-wxlogin // 安装 npm install vue-wxlogin --save-dev // 组件中引入 import wxlogin from 'vue-wxlogin' ... components: { wxlogin } ... html中使用 <wxlogin :appid="$store.getters.wechat_app_id" :scope="'snsapi_log

  • 自定义PC微信扫码登录样式写法

    自定义PC微信扫码登录样式写法

    PC微信扫码登录 近期做一个PC端微信扫码登录的需求,微信扫码有两种方式,一种是新开一个二维码页面,另一种是内嵌入产品网页.本次以内嵌二维码为例,具体怎样在页面中显示一个登陆二维码,文档说的很清楚,就不赘述了,文档地址:https://open.weixin.qq.com/cg... 解决自定义微信二维码样式问题 当一切准备妥当之后,网页上的二维码初始默认是这个样子. 特别大不说(默认二维码大小280x280),还有微信登录的title,下方也有扫码登录的提示. 幸运的是,微信留了一个api给我

  • 企业微信扫码登录网页功能实现代码

    企业微信扫码登录网页功能,代码如下所示: //jq写法完善版 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>信息平台</title> <script src="http://res

  • 基于 Swoole 的微信扫码登录功能实现代码

    基于 Swoole 的微信扫码登录功能实现代码

    随着微信的普及,扫码登录方式越来越被现在的应用所使用.它因为不用去记住密码,只要有微信号即可方便快捷登录.微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实现.这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录.大体流程如下: 客户端打开登录界面,连接到 WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户扫描展示的带参数二维码 微信服务器回调扫码事件并通知开发者服务

  • vue3 微信扫码登录及获取个人信息实现的三种方法

    目录 一.流程: 二.前置条件: 三.具体登录实现 实现方式一: 方式二: 方式三:结合后端获取到二维码 四.登录微信后获取微信中用户头像和昵称 一.流程: 微信提供的扫码方式有两种,分别是: 跳转二维码扫描页面 内嵌式二维码 根据文档我们可以知道关于扫码授权的模式整体流程为: 1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据 code 参数: 2. 通过 code 参数加上 AppID 和AppSecret等,通过 API

  • 浅析微信扫码登录原理(小结)

    浅析微信扫码登录原理(小结)

    微信扫码登录原理解析 扫码登录是现在流行的登录方式,使用这种方式及其方便,而且安全 扫码登录流程 原理 获取唯一的uuid, 以及包含uid信息的二维码 // 获取uuid getUUID: function() { var e = t.defer(); return window.QRLogin = {}, $.ajax({ url: i.API_jsLogin, dataType: "script" }).done(function() { 200 == window.QRLogi

  • Spring Boot实现微信扫码登录功能流程分析

    Spring Boot实现微信扫码登录功能流程分析

    目录 1. 授权流程说明 第一步:请求CODE 第二步:通过code获取access_token 第三步:通过access_token调用接口 2. 授权流程代码 3. 用户登录和登出 4. Spring AOP校验用户有没有登录 5. 拦截登录校验不通过抛出的异常 微信开放平台:微信扫码登录功能 官方文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 1. 授权

  • java实现微信扫码登录第三方网站功能（原理和代码）

    目录 一.查看微信扫码登录官方文档 二.实现微信第三方登录流程: 三.代码实现: 为避免繁琐的注册登陆,很多平台和网站都会实现三方登陆的功能,增强用户的粘性.这篇文章主要介绍了java实现微信扫码登录第三方网站功能(原理和代码),避免做微信登录开发的朋友们少走弯路. 一.查看微信扫码登录官方文档 官方文档:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&

  • .NET微信开发之PC 端微信扫码注册和登录功能实现

    .NET微信开发之PC 端微信扫码注册和登录功能实现

    一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网站做授权,确切来说是在微信端下做的一个授权.今天遇到的一个问题是,项目支持微信端以及 PC 端,并且开放注册.要求做到无论在 PC 端注册或者是在微信端注册之后都可以在另外一个端进行登录.也就是说无论 PC 或是微信必须做到"你就是你"(通过某种方式关联). 二.寻找解决方案 按传统的方式

随机推荐