脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 微信扫码登录

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

 更新时间：2020年01月06日 10:29:42   作者：张旭超  
这篇文章主要介绍了vue 微信扫码登录(自定义样式)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

使用插件

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://www.jb51.net/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
}

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

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

4、需要注意的地方

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue实现循环滚动图片

    vue实现循环滚动图片

    这篇文章主要为大家详细介绍了vue实现循环滚动图片，多图片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue项目之数量占比进度条实现方式

    vue项目之数量占比进度条实现方式

    这篇文章主要介绍了vue项目之数量占比进度条实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • vue create、vue webpack init创建vue项目产生的项目文件的区别

    vue create、vue webpack init创建vue项目产生的项目文件的区别

    这篇文章主要介绍了vue create、vue webpack init创建vue项目产生的项目文件的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 利用vue+turn.js实现翻书效果完整实例

    利用vue+turn.js实现翻书效果完整实例

    这篇文章主要给大家介绍了关于利用vue+turn.js实现翻书效果的相关资料,turn.js是使用了jquery书写的,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • Vue如何获取url路由地址和参数简单示例

    Vue如何获取url路由地址和参数简单示例

    这篇文章主要给大家介绍了Vue如何获取url路由地址和参数的相关资料,通过简单的代码示例,帮助读者快速掌握Vue路由的基本用法,需要的朋友可以参考下
    2023-03-03
  • vue的指令和插值总结(非常详细)

    vue的指令和插值总结(非常详细)

    这篇文章主要给大家介绍了关于vue指令和插值的相关资料,大家应该对指令和插值都不陌生,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue3中如何检测数组的变化方式

    Vue3中如何检测数组的变化方式

    这篇文章主要介绍了Vue3中如何检测数组的变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 在vue中使用公共过滤器filter的方法

    在vue中使用公共过滤器filter的方法

    这篇文章主要介绍了在vue中使用公共过滤器filter的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-06-06
  • 关于Element-ui中Table表格无法显示的问题及解决

    关于Element-ui中Table表格无法显示的问题及解决

    这篇文章主要介绍了关于Element-ui中Table表格无法显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue的ElementUI form表单如何给label属性字符串中添加空白占位符

    vue的ElementUI form表单如何给label属性字符串中添加空白占位符

    这篇文章主要介绍了vue的ElementUI form表单如何给label属性字符串中添加空白占位符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论