vue 微信掃碼登入(自定義樣式)
阿新 • • 發佈：2020-01-09
使用外掛
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()編碼
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。