自定义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在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 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
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
js静态作用域的功能。
2006/12/25 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python基于socket实现网络广播的方法
2015/04/29 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python实现简易云音乐播放器
2018/01/04 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python实现文字版扫雷
2020/04/24 Python
Python异常处理机制结构实例解析
2020/07/23 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
给同事的道歉信
2014/01/11 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
社团文化节策划书
2014/02/01 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
教师师德考核自我评价
2014/09/13 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
个人售房合同协议书
2016/03/21 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
Ajax实现三级联动效果
2021/10/05 Javascript