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

使用插件

// 安装
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

（转换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()编码

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