vue 微信登录(使用了vant)

首先写这篇文章是为了帮助更多需要帮助的人，笔者这边就直接给大家上传代码以及步骤，原理那些大家自行百度。

前提：大家首先要申请好一个公众号，以及创建和配置好vue项目和axios，此次笔者用到的Vue组件库为vant,(这个安装大家自行百度哈，或者看vant官网进行安装),顺便说下次项目用的路由模式为vue-router 默认 hash 模式，而不是History 模式。History 模式需要修改一小点代码，后面有说道。

1、在src下创建一个“common”(可自定义命名)文件夹，然后再创建一个utils.js(可自定义命名)文件

2、在utils.js中添加如下两段封装好的代码（这部分是参考了一些网上的）：

//封装微信登录接口
export const wxLogin = (appid, url) => {
	let redirect_uri = encodeURIComponent(url)
	window.location.href =
		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATUS#wechat_redirect`
}

// 获取url上的参数
export const getUrlParam = (name) => {
	let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	let r = window.location.search.substr(1).match(reg); //匹配目标参数
	if (r != null) return decodeURIComponent(r[2]);
	return null; //返回参数值　
}

3、添加好后在components文件夹中创建两个vue文件，wxAuth.vue（授权回调，获取微信信息），wxlogin.vue（微信登录页面）

4、首先在wxlogin.vue页面中要有如下代码，主要是需要一个点击事件来触发

在js中引用：

import {wxLogin} from "@/common/utils.js";

在methods方法中调用：（因使用的是vue-router 默认 hash 模式，故回调地址组装出来的是"http://xxxx.com/#/wxAuth"，history模式的只需去掉"#/"）

wxlogin(){
			    wxLogin('你的公众号开发者ID（AppID）', '回调地址') //网站域名+'/#/wxAuth'
			}	

5、在wxAuth.vue页面中,

html:

<template>
	<div>

	</div>
</template>

js:

import {getUrlParam} from '@/common/utils.js'
	export default {
		data() {
			return {

			}
		},
		mounted() {
			var that = this;
			that.$toast.loading({
				message: '登录中...',
				duration:30000
			});
			let code = that.$route.query.code || getUrlParam('code');
			if(code){
                //获取微信信息接口,提供code给后台这个接口，
				that.$axios.get("/xxxxx", {
						params: {
							code: code
						}
					})
					.then(res => {
						that.$toast.clear();
						let datas = res.data;
						that.$toast.success('微信登录成功');
						setTimeout(function(){
							sessionStorage.setItem('wxUser',JSON.stringify(datas));//把微信信息存个临时缓存
							window.location.href='xxx'; //获取成功后需要跳转的页面
							// that.$router.replace('/index')
						},200)
					}).catch(function(error) {
						console.log("error", error)
					})
				
			}else{
				that.$toast.fail('获取不到code！');
				that.$router.replace('/')
			}
		},
		methods: {}

6、这个微信登录到这一步基本上可以获取微信用户信息了，剩下的就看大家处理后续写法了，一般来说是把微信信息存到store中通过dispatch提交存储微信信息。

7、that.$toast.loading，that.$toast.clear，that.$toast.success，van-button都是使用的vant框架

如有更好的建议或者有问题处，欢迎大家在下方留言！

vue+vant商品列表批量倒计时:vue+vant商品列表批量倒计时_余温无痕的博客-CSDN博客_vant 封装

vue获取微信地址并调用高德地图解析出详细地址：vue 获取微信定位经纬度，并调用高德地图解析出详细地址_余温无痕的博客-CSDN博客