VUE 网页 扫码登录(微信)

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

//首先必须引入微信JS  

 <script type='text/javascript' src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

//1.html

<div id="login_container"></div>

//2.js

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

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=='

      });

}

官网文档地址

posted @ 2020-06-08 13:55  悟空dong  阅读(3203)  评论(0编辑  收藏  举报