微信授權(quán)登錄

前言

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

---

一、選擇自己的登錄方式

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

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

二、使用步驟

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

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

import '你的路徑'

2.頁(yè)面使用

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

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

3.生成二維碼

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

4.調(diào)用方法

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

---

5.獲取code

代碼如下（示例）：最后一步因?yàn)槲业幕卣{(diào)地址不是當(dāng)前登錄頁(yè)面地址，獲取code的方法就得分開(kāi)寫(xiě)

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)頁(yè)面和你微信登錄頁(yè)面相同獲取code就是第一步，先獲取code，判斷有無(wú)當(dāng)前code，有code那就執(zhí)行你有的邏輯，傳給后臺(tái)去獲取其他參數(shù)返給你狀態(tài)，如果沒(méi)有code，同理就去執(zhí)行沒(méi)有code邏輯，獲取code

總結(jié)

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

總結(jié)

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

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