Wechat document:

Developers.weixin.qq.com/doc/oplatfo…

1. Introduce wechat files to generate TWO-DIMENSIONAL code

<div id="wxcode"></div> // js created () { const oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'; document.body.appendChild(oScript); SetTimeout (function(){var obj = new WxLogin({id: "qrcode",//wx build element appID: 'XXXXXXXXXXXX ',// "Snsapi_login ", redirect_uri: "http%3A%2F%2Ffrp.yezicl.com%2Fsale%2F%23%2Flogin",// callback address encodeURIComponent encoding state: ", style: "black",// black style href:"data:text/ CSS; base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE4MHB4O21hcmlnbi10b3A6LThweH0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO 30 klmltcg93zxjcb3gglmluzm8ge2rpc3bsyxk6ig5vbmu7fq = = "/ / through the href base64 encryption CSS can fine-tune style}); }}, 500)Copy the code

CSS Base64 Encryption the-x.cn/zh-cn/base6… Decoding without data:text/ CSS; base64,

Reference wechat to form a scanning TWO-DIMENSIONAL code

Handler: {$route: {handler: Function (route) {enclosing wxCode = this. $. The route query. The code | | '/ / local store code because existing cache pages from other pages to return to the vue need custom refresh the if (this. WxCode = = localStorage["wxCode"]&&this.wxCode! Href =this.redirect_uri// callback address}else{localstorage.setitem ("wxCode", this.wxcode); // Set b to "Isaac"} if(this.wxcode){let params = {code: this.wxcode, state: ", } wechatLogin(params). Then (res=>{if(res.status){// Return parameter if bind wechat return token normal storage login unbound account return unionID bind }). Catch (() => {window.location.href=this.redirect_uri}); } }, immediate: true } },Copy the code

You can also use vue-wxLogin if you don’t want to write the build yourself

npm install vue-wxlogin --save <wxlogin href='data:text/css; base64,LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgICB3aWR0aDogMTUwcHg7Cn0KLmltcG93ZXJCb3ggLnRpdGxlIHsKICAgIHRleHQtYWxpZ246IGxlZnQ7C iAgICBmb250LXNpemU6IDE2cHg7CiAgICBmb250LXdlaWdodDogYm9sZDsKfQ==' id="wxcode" theme='' appid="appid" scope="snsapi_login"  :redirect_uri="encodeURIComponent(redirect_uri)"></wxlogin> import wxlogin from 'vue-wxlogin'; components: { wxlogin, },Copy the code