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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 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函数eval()介绍和使用示例
2014/08/20 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
jquery选择器使用详解
2014/04/08 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
js如何打印object对象
2015/10/16 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
js闭包用法实例详解
2016/12/13 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
python unittest实现api自动化测试
2018/04/04 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
高校辅导员推荐信范文
2013/12/25 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
校园新闻广播稿
2014/01/10 职场文书
施工安全责任书范本
2014/07/24 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
大四学生个人总结
2015/02/15 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
小学英语教学随笔
2015/08/14 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书