vue 微信扫码登录(自定义样式)


Posted in Javascript onJanuary 06, 2020

使用插件

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_login'"
  :theme="'black'"
  :redirect_uri="encodeURIComponent($store.getters.base_url + 'new-home/#/new-home/structure')"
  :href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=='" rel="external nofollow" 
>
</wxlogin>

参数说明

  • appid: 应用唯一标识(前面认证网页应用中获得)
  • scope: 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi\_login即可
  • theme: 提供"black"、"white"可选,默认为黑色文字描述。
  • href: 自定义样式链接,只能使用https链接或者base64编码的地址

href自定义样式

1、使用https链接地址。

这个很简单,只需要把自定义的css文件上传到服务器,然后使用服务器上的css文件即可(缺点:如果网络比较慢,首先加载默认样式,然后才回使用自定义样式,有一个闪烁的过程)

2、使用base64

https://3water.com/tools/base64.htm(转换base64编码工具)

// 自定义二维码样式
.impowerBox .title {
 display: none;
}
.impowerBox .status.status_browser {
 display: none;
}
.impowerBox .qrcode {
 border: none;
 width: 200px;
 height: 200px;
}
.impowerBox .status{
 display: none
}

vue 微信扫码登录(自定义样式)

3、href必须使用 text/css模式,生成的base64添加到'data:text/css;base64,'后面就可以了

href="data:text/css;base64,
LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=="

4、需要注意的地方

redirect_uri: 回调地址,必须使用encodeURLComponent()编码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
javascript初学者常用技巧
Sep 02 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
React学习之JSX与react事件实例分析
Jan 06 #Javascript
vue学习之Vue-Router用法实例分析
Jan 06 #Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 #Javascript
React学习之受控组件与数据共享实例分析
Jan 06 #Javascript
Node.js创建一个Express服务的方法详解
Jan 06 #Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 #Javascript
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
You might like
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
深入php list()函数的详解
2013/06/05 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
python多线程http下载实现示例
2013/12/30 Python
python中类的一些方法分析
2014/09/25 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
理论讲解python多进程并发编程
2018/02/09 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python实现感知器算法(批处理)
2019/01/18 Python
python属于跨平台语言码
2020/06/09 Python
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
地道战观后感400字
2015/06/04 职场文书
七年级上册生物的课件
2019/08/07 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
python实现简单的聊天小程序
2021/07/07 Python