vue 微信掃碼登錄(自定義樣式)

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

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>

參數(shù)說明

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()編碼

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。

上一篇：Vuejs中的watch實例詳解(監(jiān)聽者)

欄目：JavaScript

下一篇：Node中對非阻塞I/O、事件循環(huán)的知識點總結

本文標題：vue 微信掃碼登錄(自定義樣式)

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9294.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

vue 微信掃碼登錄(自定義樣式)

您可能感興趣的文章

閱讀排行

本欄相關

隨機閱讀