微信授權(quán)登錄

前言

分享一下自己所遇到的問題，適合新手小白，在這里只記錄前端所用到的內(nèi)容,
首先你得拿到微信開放平臺內(nèi)創(chuàng)建應(yīng)用的APPID，怎么拿這里就不記錄了，自行去搜索

---

一、選擇自己的登錄方式

1.第一種是直接拼接url跳轉(zhuǎn)微信的授權(quán)頁面 2.第二種就是引用微信提供的[添加鏈接描述](http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js)將二維碼引入自己的頁面

說明：我用的是第二種方式授權(quán)，所以在這里記錄一下第二種，也是推薦使用的一種

二、使用步驟

1.引入微信提供的wwLogin.js

代碼如下（示例）：將wwLogin.js下載至本地在所使用的頁面引入

import '你的路徑'

2.頁面使用

代碼如下（示例）：在頁面定義一個存放二維碼的元素

<div id="wxcode"></div>//定義一個存放二維碼的元素，當(dāng)前id可自行設(shè)置，要和生成時id對應(yīng)就可

3.生成二維碼

methods：{createWxQrcode() {// 生成微信登錄二維碼this.$nextTick(() => {var obj = new WxLogin({self_redirect: false,id: "wxcode", // 頁面顯示二維碼的容器idappid: "你的APPID", // 微信開發(fā)者內(nèi)創(chuàng)建應(yīng)用的APPIDscope: "snsapi_login",redirect_uri: encodeURIComponent('自己登錄成功以后所進(jìn)入的頁面'),//當(dāng)前回調(diào)的域名必須和微信開放平臺授權(quán)回調(diào)域一致state: "bind",style: "black",href：""//這個字段可設(shè)置二維碼樣式但是必須轉(zhuǎn)base64格式 具體就不細(xì)說了，百度內(nèi)容很多});})}}

4.調(diào)用方法

async mounted(){this.createWxQrcode(); //調(diào)用你所定義的生成方法就可以了 }

---

5.獲取code

代碼如下（示例）：最后一步因為我的回調(diào)地址不是當(dāng)前登錄頁面地址，獲取code的方法就得分開寫

getUrlCode(){var url = location.searchthis.winUrl = urlvar theRequest = new Object()if(url.indexOf('?') != -1){var str = url.substr(1)var strs = str.split('&')for(var i = 0; i < strs.length; i++){theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])}}console.log(theRequest);return theRequest}

在你所用的地方獲取調(diào)用地方法獲取code 例如：this.getUrlCode().code

如果你的回調(diào)頁面和你微信登錄頁面相同獲取code就是第一步，先獲取code，判斷有無當(dāng)前code，有code那就執(zhí)行你有的邏輯，傳給后臺去獲取其他參數(shù)返給你狀態(tài)，如果沒有code，同理就去執(zhí)行沒有code邏輯，獲取code

總結(jié)

以上就是今天要講的內(nèi)容，本文僅僅簡單介紹了微信授權(quán)登錄的使用

總結(jié)

以上是生活随笔為你收集整理的vue2微信授权登录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。