前端使用微信掃碼登陸

一、在index.html頁面中先引入JS文件：

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>複製代碼

二、實例化JS對象，在登陸的html頁面添加一個div：

<div className={styles.login_container} id="login_container"></div>複製代碼

三、請求接口，得到微信登陸的url，如：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx48673bc3993cd5d2&redirect_uri=%2F&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect複製代碼

四、實例化，調用getQueryString()方法得到對應的參數：

let obj = new WxLogin({        id: "login_container", //div的id        appid: this.getQueryString("appid", data),        scope: this.getQueryString("scope", data),        redirect_uri: this.getQueryString("redirect_uri", data), //回調地址        state: this.getQueryString("state", data), //參數，可帶可不帶        style: "", //樣式  提供"black"、"white"可選，默認爲黑色文字描述        href: "" //自定義樣式連接，第三方可根據實際需求覆蓋默認樣式。      });複製代碼

五、getQueryString方法

getQueryString(name,url) {    console.log("url",url)    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');    var r = url.substr(url.indexOf("?")).match(reg);    if(r != null) {        return unescape(r[2]);    }    return null;  }複製代碼