前言

今天在做web端扫码登录时，前端需要定义二维码的样式。官方文档如图

经测试，以下两种方法可以实现自定义样式。

提供css文件的https地址。
此方式需要将css文件放到公网上并且可以通过https的形式访问，此处不再介绍。
提供css文件的data-url地址。
本文是通过Java生成的data-url地址，将生成后的data-url赋值给href即可。

Java生成data-url

1.工具类pom

<dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.4.0</version>
</dependency>

2.代码实现

import cn.hutool.core.codec.Base64;
import java.io.File;public class Test {public static void main(String[] args) {//此处是本地的css文件地址String encode = Base64.encode(new File("F:\\wx-login.css"));System.out.println("data:text/css;base64," + encode);}
}

生成后的结果如下：

data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKICBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGV7CiAgYm9yZGVyOiBub25lOwp9Cg==

将data-url赋值给href

var obj = new WxLogin({self_redirect:true,id:"login_container", appid: "", scope: "", redirect_uri: "",state: "",style: "",href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKICBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGV7CiAgYm9yZGVyOiBub25lOwp9Cg=="});

微信扫码登录自定义二维码样式相关推荐

微信扫码登录自定义二维码显示信息
微信扫码登录,自定义二维码显示信息 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js& ...
(用微信扫的静态链接二维码)微信native支付模式官方提供的demo文件中的几个bug修正...
原文:(用微信扫的静态链接二维码)微信native支付模式官方提供的demo文件中的几个bug修正 native支付模式一demo(用微信扫的静态链接二维码)BUG修复,一共4个BUG 1.nativ ...
修改微信扫码登录，二维码样式
开工后的第一篇博客,记得在去年给自己定的计划是每月一篇博客,看来有点没有持之以恒,抱歉-,进入正题: 过完年来一直在赶项目进度,期间也遇到很多问题,很想把它分享出来,时间问题吧,没有及时写出来,今天遇 ...
vue 实现PC端微信扫码登录（二维码内嵌网页版）
1.先在index.html中引入js文件 <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogi ...
扫码登录、二维码登录功能设计
完整流程 1.server生成一张二维码,同时为二维码生成唯一的标识token 2.app端扫描二维码 3.app端携带token访问服务端.使用自己的身份认领这张二维码. 到这里,已经完成了认证,w ...
12306抢票系统（登录功能---二维码+账号密码）
文章目录一.二维码登录方式二.账号密码登录方式超级鹰第三方库账号密码登录代码汇总: 一.二维码登录方式二维码登录方式:用户手机端扫描网页二维码登录,比账号密码登录更简易话不多说,先上代码 ...
Spring Cloud OAuth2 扩展登录方式：帐户密码登录、手机验证码登录、二维码扫码登录
本文扩展了spring security 的登录方式,增长手机验证码登录.二维码登录. 主要实现方式为使用自定义filter. AuthenticationProvider. AbstractAuth ...
微信生成带参数的二维码,合成海报,扫码后推送小程序？
微信服务号渠道二维码功能,支持生成带参数二维码,合成海报二维码,微信扫码后推送内容:结合微号帮平台48小时信息推送,推送微信小程序. 带参二维码海报二维码微信扫码后回复 48小时信息推送在微号帮 ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...

微信扫码登录自定义二维码样式

微信扫码登录自定义二维码样式

前言

Java生成data-url

1.工具类pom

2.代码实现

将data-url赋值给href

微信扫码登录自定义二维码样式相关推荐

最新文章

热门文章