快捷導(dǎo)航

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

更新時(shí)間：2020年01月06日 10:29:42 作者：張旭超

這篇文章主要介紹了vue 微信掃碼登錄(自定義樣式)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

使用插件

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: 應(yīng)用唯一標(biāo)識(shí)（前面認(rèn)證網(wǎng)頁應(yīng)用中獲得）
scope: 應(yīng)用授權(quán)作用域，擁有多個(gè)作用域用逗號(hào)（,）分隔，網(wǎng)頁應(yīng)用目前僅填寫snsapi\_login即可
theme: 提供"black"、"white"可選，默認(rèn)為黑色文字描述。
href: 自定義樣式鏈接，只能使用https鏈接或者base64編碼的地址

href自定義樣式

1、使用https鏈接地址。

這個(gè)很簡(jiǎn)單，只需要把自定義的css文件上傳到服務(wù)器，然后使用服務(wù)器上的css文件即可（缺點(diǎn)：如果網(wǎng)絡(luò)比較慢，首先加載默認(rèn)樣式，然后才回使用自定義樣式，有一個(gè)閃爍的過程）

2、使用base64

http://m.fzitv.net/tools/base64.htm（轉(zhuǎn)換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: 回調(diào)地址，必須使用encodeURLComponent()編碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue+echarts圖表使用的問題記錄
由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,也就是用圖表展示,眾所周知echarts是非常強(qiáng)大的插件,所以這篇文章主要給大家介紹了關(guān)于vue+echarts圖表使用的相關(guān)資料,需要的朋友可以參考下
2021-09-09
詳解Vue中如何避免濫用watch
這篇文章主要為大家詳細(xì)介紹了Vue中濫用watch帶來的問題以及如何解決,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
Vue之mixin全局的用法詳解
這篇文章主要介紹了Vue之mixin全局的用法詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
一文帶你了解Vue?和?React的區(qū)別
這篇文章主要介紹了Vue和React的區(qū)別，畢竟是兩個(gè)框架，不像兩個(gè)?API，要說細(xì)節(jié)上的區(qū)別就太多太多了，本文就簡(jiǎn)單的帶大家說說Vue?和?React?的區(qū)別,需要的朋友可以參考下
2023-05-05
使用Vue.js 和Chart.js制作絢麗多彩的圖表
這篇文章主要介紹了使用Vue.js 和Chart.js制作絢麗多彩的圖表，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06
Vue實(shí)現(xiàn)商品詳情頁的評(píng)價(jià)列表功能
這篇文章主要介紹了Vue實(shí)現(xiàn)商品詳情頁的評(píng)價(jià)列表功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
Vue全局監(jiān)測(cè)錯(cuò)誤并生成錯(cuò)誤日志實(shí)現(xiàn)方法介紹
在做完一個(gè)項(xiàng)目后，之后的維護(hù)尤為重要。這時(shí)，如果項(xiàng)目配置了錯(cuò)誤日志記錄，這樣能大大減少維護(hù)難度。雖然不一定能捕獲到全部的錯(cuò)誤，但是一般的錯(cuò)誤還是可以監(jiān)測(cè)到的。這樣就不用測(cè)試人員去一遍一遍復(fù)現(xiàn)bug了
2022-10-10
如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值
小編在做需求時(shí),遇到了在el-table表格中加入多條數(shù)據(jù),并且每條數(shù)據(jù)要通過el-select來選取相應(yīng)的值,做到動(dòng)態(tài)選擇,下面這篇文章主要給大家介紹了關(guān)于如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值的相關(guān)資料,需要的朋友可以參考下
2023-01-01
vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作
這篇文章主要介紹了vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
講解vue-router之什么是編程式路由
編程式路由在我們的項(xiàng)目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05