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

使用插件

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、嵐皋網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、嵐皋網(wǎng)絡(luò)營銷、嵐皋企業(yè)策劃、嵐皋品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供嵐皋建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

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

href自定義樣式

1、使用https鏈接地址。

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

2、使用base64

https://www.jb51.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()編碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：vue微信掃碼登錄(自定義樣式)
當(dāng)前路徑：http://muchs.cn/article14/geccde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、手機網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站制作、面包屑導(dǎo)航、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)