自定义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 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
Ext 今日学习总结
Sep 19 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
基于模板引擎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中用正则表达式清除字符串的空白
2011/01/17 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
javascript中的new使用
2010/03/20 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
党员年终民主评议的自我评价
2013/11/05 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
学习雷锋主题班会
2015/08/14 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS