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


Posted in Javascript onDecember 12, 2017

PC微信扫码登录

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

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

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

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

特别大不说(默认二维码大小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。

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

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。

自定义二维码:

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

Javascript 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
传智播客学习之JavaScript基础篇
Nov 13 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 #Javascript
jquery获取transform里的值实现方法
Dec 12 #jQuery
JS排序算法之希尔排序与快速排序实现方法
Dec 12 #Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 #Javascript
详解vue渲染函数render的使用
Dec 12 #Javascript
谈谈vue中mixin的一点理解
Dec 12 #Javascript
Vue集成Iframe页面的方法示例
Dec 12 #Javascript
You might like
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php生成gif动画的方法
2015/11/05 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
js操作二进制数据方法
2018/03/03 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
实例讲解React 组件
2020/07/07 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
python读取文件名并改名字的实例
2019/01/07 Python
python opencv实现图像边缘检测
2019/04/29 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
3种python调用其他脚本的方法
2020/01/06 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
生日宴会祝酒词
2015/08/10 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript