自定义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 相关文章推荐
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 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
mysql 性能的检查和优化方法
2009/06/21 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
python实现XML解析的方法解析
2019/11/16 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
python实现猜单词游戏
2020/05/22 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
一份比较全的PHP面试题
2016/07/29 面试题
DataList 能否分页,请问如何实现?
2015/05/03 面试题
司机岗位职责
2013/11/15 职场文书
大专会计自我鉴定
2014/02/06 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
国企干部对照检查材料
2014/08/22 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
民用住房租房协议书
2014/10/29 职场文书
出国留学自荐信模板
2015/03/06 职场文书
电工生产实习心得体会
2016/01/22 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
Redis如何实现分布式锁
2021/08/23 Redis