1、下载组件 wxlogin
npm install vue-wxlogin --save
2、引入组件，给组件传参
3、重定向的url应该是微信登录官网中的微信授权作用域
4、如果url里面有端口号，微信授权作用里面也要有
5、重定向的url：需要在http://tool.chinaz.com/tools/urlencode.aspx中转码
6、微信登录成功后，会自动重定向到新地址，此时的地址栏中就有code参数
7、如果报错说不能从组件跳到页面，那就找到wxlogin组件里面的iframe标签，加上这个属性：sandbox=“allow-scripts allow-top-navigation allow-same-origin”
报错内容：
qrconnect"color: #ff0000">补充知识：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/oauth2/authorize"htmlcode">import wechatAuth from './plugins/wechatAuth'//微信登录插件 const qs= require('qs'); Vue.use(wechatAuth, {appid: XXXXXXXXX});3.路由钩子中可以进行相关操作
router.beforeEach((to, from, next) => { if (store.state.loginStatus == 0) { //微信未授权登录跳转到授权登录页面 let url = window.location.href; //解决重复登录url添加重复的code与state问题 let parseUrl = qs.parse(url.split('"_blank" href="https://github.com/wkl007/vue-wechat-login">vue-wechat-login，查看对应分支即可。2019.7.23更新
代码进行了相关重构 vue-wechat-login
以上这篇vue项目中微信登录的实现操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。