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 相关文章推荐
jquery的键盘事件修改代码
Feb 24 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
vue实现弹幕功能
Oct 25 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 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
PHP调用三种数据库的方法(2)
2006/10/09 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP模块memcached使用指南
2014/12/08 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
vue生成token并保存到本地存储中
2018/07/17 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
在pycharm中显示python画的图方法
2019/08/31 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
Html5新标签解释及用法
2012/02/17 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
售后主管岗位职责
2013/12/08 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
年终工作总结范文
2019/06/20 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android