【前端 VUE】VUE 微信网页扫码登录（微信）

//网页内调用微信扫码功能 

官方文档

//首先必须引入微信JS  

 

//1.html

//2.js

//在页面创建后调用方法 mounted内

new WxLogin 内以下参数 意思

self_redirect：跳转微信内置页面还是扫码图直接呈现在本页面定义的ID容器内

id：标签 id

appid：注册的微信appid

state: 自定义随机码

style: 展示颜色类型 black  white

scope: "snsapi_login", 网页应用目前直接写死snsapi_login

redirect_uri： 回调链接

href：修改默认微信扫码的样式 需要base64进行编码

//方法调用

login(){

 var obj = new WxLogin({

        self_redirect:false,

        id:"login_container", 

        appid: wxAppId, 

        scope: "snsapi_login", 

        redirect_uri: "http://bd.hcity.com/callBack",

        state: 'A123DC35165464',

        style: "black",

        href: 'data:text/css;base64,LmltcG93ZXJCb3ggLm5vcm1hbFBhbmVse21hcmdpbi10b3A6IDE1cHg7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMwcHg7Ym9yZGVyLWNvbG9yOiNDNUUxRkY7fQouaW1wb3dlckJveCAudGl0bGUge2Rpc3BsYXk6IG5vbmU7fQ=='

      });

}

用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数

redirect_uri?code=CODE&state=STATE