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

PC微信扫码登录

近期做一个PC端微信扫码登录的需求，微信扫码有两种方式，一种是新开一个二维码页面，另一种是内嵌入产品网页。本次以内嵌二维码为例，具体怎样在页面中显示一个登陆二维码，文档说的很清楚，就不赘述了，文档地址：https://open.weixin.qq.com/cg...

解决自定义微信二维码样式问题

当一切准备妥当之后，网页上的二维码初始默认是这个样子。

特别大不说（默认二维码大小280x280），还有微信登录的title，下方也有扫码登录的提示。
幸运的是，微信留了一个api给我们自定义样式的机会，在之前实例化一个二维码的时候，实例对象中href属性，允许设置样式。

var obj = new WxLogin({
      id:"login_container",
      appid: "",
      scope: "",
      redirect_uri: "",
      state: "",
      style: "",
      href: "../qrcode.css"//就是这个属性
      });

不幸的是，在href中传入样式文件的地址，会报错。貌似微信为了安全考虑，只允许访问https的资源。于是现在采用第二种解决办法data-url。

通过访问data-url解决样式问题

写一个nodejs，脚本将刚才的css资源转换为data-url。具体代码实现为：

var fs = require('fs');
// function to encode file data to base64 encoded string
function base64_encode(file) {
 // read binary data
 var bitmap = fs.readFileSync(file);
 // convert binary data to base64 encoded string
 return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
}
console.log(base64_encode('./qrcode.css'))

运行node脚本，复制打印出来的data-url，然后赋值给刚才的href。

var obj = new WxLogin({
      id:"login_container",
      appid: "",
      scope: "",
      redirect_uri: "",
      state: "",
      style: "",
           href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lf
Q0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="//data-url
      });

注意这里的MIME类型，一定要返回text/css。

自定义二维码：

赞 (0)

相关推荐

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

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

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

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

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

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

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

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

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

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

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

  • 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. 授权

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

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

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

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

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

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

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

  • 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

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

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

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

随机推荐