2020年vue- 微信的掃碼登錄

微信提供了兩種方式跳轉登錄,讓我們來看一下吧!

內嵌方式

步驟實現:

1能用插件用就插件吧。畢竟好用。哈哈~~

 先引入npm 包 https://www.npmjs.com/package/vue-wxlogin

接下來在組件中引入:

import wxlogin from 'vue-wxlogin';    components: {wxlogin},

2.組件中使用,生成二維碼的信息,可以讓後端通過接口查看屬性,也可以直接在微信開發開放平臺中查看,把屬性值傳給 wxlogin

 

 <wxlogin  :appid="'XXX'" :scope="'XXX'"  :redirect_uri="'XXX'"  ></wxlogin> 

 

完成

 

-------------------------------------------------------------------------------------------------

 

非常簡單。就是一個請求一個返回

1頁面

 <div class="weixin" @click="weChatLogin()"><i class="iconfont iconweixin"></i>微信登錄</div>

 

 

methods: {

weChatLogin(){   

   weChatLogin().then(res => {        if(res.result === 1){          window.location.href=res.url        }    })    } 

 },}

 

 

完成

 

 

 

46人點贊

 

二維碼出不來的,或者報錯的,仔細看報什麼錯,是回調URL不對的,用內網穿透,

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章