vue項目中如何實現一個微信登錄功能？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯專注于企業(yè)營銷型網站、網站重做改版、大洼網站定制設計、自適應品牌網站建設、H5開發(fā)、商城網站定制開發(fā)、集團公司官網建設、成都外貿網站建設、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為大洼等各大城市提供網站開發(fā)制作服務。

1、下載組件 wxlogin

npm install vue-wxlogin --save

2、引入組件，給組件傳參

3、重定向的url應該是微信登錄官網中的微信授權作用域

4、如果url里面有端口號，微信授權作用里面也要有

5、重定向的url：需要在/tupian/20230522/pp7、如果報錯說不能從組件跳到頁面，那就找到wxlogin組件里面的iframe標簽，加上這個屬性：sandbox=“allow-scripts allow-top-navigation allow-same-origin”

報錯內容：

qrconnect?scope=snsapi_login&redirect_uri=http%3a%2f%2f%2f&state=&login_type=jssdk&self_redirect=false&style=black&href=:84 Unsafe JavaScript attempt to initiate navigation for frame with origin 'http://localhost:9020' from frame with URL 'https://open.weixin.qq.com/connect/qrconnect?app&scope=snsapi_login&redirect_uri=http%3a%2f%2f&state=&login_type=jssdk&self_redirect=false&style=black&href='. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture. See https://www.chromestatus.com/features/5851021045661696.```

補充知識：vue移動端微信授權登錄插件封裝

1.新建wechatAuth.js文件

const qs = require('qs')
//應用授權作用域，snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到昵稱、性別、所在地。并且，即使在未關注的情況下，只要用戶授權，也能獲取其信息）
const SCOPES = ['snsapi_base', 'snsapi_userinfo']

class VueWechatAuthPlugin {

 constructor () {
 this.appid = null
 this.redirect_uri = null
 this.scope = SCOPES[1]
 this._code = null
 this._redirect_uri = null
 }

 install (Vue, options) {
 let wechatAuth = this
 this.setAppId(options.appid)
 Vue.mixin({
 created: function () {
 this.$wechatAuth = wechatAuth
 },
 })

 }

 static makeState () {
 return Math.random().toString(36).substring(2, 15) +
 Math.random().toString(36).substring(2, 15)
 }

 setAppId (appid) {
 this.appid = appid
 }

 set redirect_uri (redirect_uri) {
 this._redirect_uri = encodeURIComponent(redirect_uri)
 }

 get redirect_uri () {
 return this._redirect_uri
 }

 get state () {
 return localStorage.getItem('wechat_auth:state')
 }

 set state (state) {
 localStorage.setItem('wechat_auth:state', state)
 }

 get authUrl () {
 if (this.appid === null) {
 throw 'appid must not be null'
 }
 if (this.redirect_uri === null) {
 throw 'redirect uri must not be null'
 }
 this.state = VueWechatAuthPlugin.makeState()
 return `https://open.weixin.qq.com/connect/oauth3/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect`
 }

 returnFromWechat (redirect_uri) {
 let parsedUrl = qs.parse(redirect_uri.split('?')[1])
 if (process.env.NODE_ENV === 'development') {
 // console.log('parsedUrl: ', parsedUrl)
 this.state = null
 this._code = parsedUrl.code
 } else {
 if (this.state === null) {
 throw 'You did\'t set state'
 }
 if (parsedUrl.state === this.state) {
 this.state = null
 this._code = parsedUrl.code
 } else {
 this.state = null
 throw `Wrong state: ${parsedUrl.state}`
 }
 }
 }

 get code () {
 if (this._code === null) {
 throw 'Not get the code from wechat server!'
 }
 // console.log(this)
 // console.log('this._code: ' + this._code)
 let code = this._code
 this._code = null
 // console.log('code: ' + code)
 return code
 }
}

const vueWechatAuthPlugin = new VueWechatAuthPlugin()

if (typeof window !== 'undefined' && window.Vue) {
 window.Vue.use(VueWechatAuthPlugin)
}

export default vueWechatAuthPlugin

文章標題：vue項目中如何實現一個微信登錄功能-創(chuàng)新互聯
文章出自：http://www.rwnh.cn/article30/ccscpo.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站收錄、建站公司、網站設計公司、營銷型網站建設、面包屑導航、手機網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯