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 面向对象 命名空间
May 13 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
js轮播图代码分享
Jul 14 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
SSI指令
2006/11/25 PHP
php date()日期时间函数详解
2010/05/16 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
JS实现简单随机3D骰子
2019/10/24 Javascript
python实现电子词典
2020/04/23 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python 自动去除空行的实例
2018/07/24 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
python缩进长度是否统一
2020/08/02 Python
个人实用的自我评价范文
2013/11/23 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
中国好声音广告词
2014/03/18 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
青春奉献演讲稿
2014/05/08 职场文书
房地产开发项目建议书
2014/05/16 职场文书
年会主持人开场白台词
2015/05/29 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
Python中Selenium对Cookie的操作方法
2021/07/09 Python