1. 程式人生 > 其它 >vue 微信二維碼掃碼登入

vue 微信二維碼掃碼登入

大概流程: 先安裝 微信 的登入, 然後 區域性引入,區域性註冊,方法呼叫,存 token,跳轉路由

npm 安裝

npm install vue-wxlogin --save-dev  

微信安裝 微信登入,後面需要用到

要掃碼登入的頁面
importwxloginfrom'vue-wxlogin'; // 先引入,後註冊 components:{ wxlogin },

template 部分

<wxloginappid=" 微信首頁內找 appid ":scope="'snsapi_login'":theme="'black'":redirect_uri='encodeURIComponent( " 登入後跳轉的地址,讓後端配置一個地址,用於跳轉 " )'rel="externalnofollow"></wxlogin> // 註釋: 地址 和 appid 繫結在一起的,也就是和 域名繫結在一起的。 掃碼跳轉登入之後,在 新的頁面 內 去獲取 路由地址 data:{    redirect:undefined //用來獲取地址,用於重新向跳轉 } created(){ this.code=this.$route.query.code; }, watch:{ $route:{ handler:function(route){ this.redirect=route.query&&route.query.redirect; } } } methods:{ 引入後端方法名字(){   後端方法( 傳參 )。then(res=>{   掃碼成功,存 token。根據專案決定 存 cookie 或者其他地方    this.$router.push({path:this.redirect||"/"}); // 重定向跳轉路由 })     }    }