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博客

vue 微信登录(使用了vant)相关推荐

vue 微信登录（前后台详细教程）
第一步:点击微信登录的按钮的时候-调取微信登录的服务请求code (前端) 一.pc端(网页端实现的是扫码登录) 微信网页应用登录开发指南 let APPID = "这个是申请的APPI ...
vue+spring boot项目实现PC端微信登录
一.实现微信登录在编码前需要在微信开放平台注册开发者账号和安装NatApp获取域名. 微信开放平台注册开发者账号可参考:https://blog.csdn.net/weixin_45001200/ar ...
vue+cordova 实现第三方登录（ QQ 微信微博）之微信登录
概要 1.首先先到各个开放平台申请开发者账号先申请,审核通过还需要一定时间微信开放平台 https://open.weixin.qq.com/ 腾讯开放平台 http://open.qq.com/ ...
vue实现绑定微信登录全过程
一.需求说明通过vue绑定微信登录,首次进入获取code,通过code获取openId查用户,然后进行登录,第二次进入若绑定过微信,直接登录进入主界面,若没绑定过微信,则跳转到登录页面. 二.准备工 ...
vue 微信扫码登录嵌入方式及开发踩的坑点
文章目录 1. 微信扫码登录开发文档申请AppID,AppSecret,配置回调地址 2. 微信扫码登录方式 3. 微信扫码登录代码 4. 使用 href 更改内嵌的样式 5. 坑点1:redire ...
Vue前端开发——微信登录
1.准备工作 1.1 现在微信开放平台注册一个账号 https://open.weixin.qq.com/ 1.2 查看官方文档 https://developers.weixin.qq.com/do ...
Springboot+vue+企业微信登录
Springboot+ vue +企业微信登录前端构造企业微信授权链接第一步,企业微信后台创建一个应用构造企业微信网页授权OAuth2链接前后端搭配使用企业微信登录其他前端构造企业微信授权 ...
vue网站第三方登录-微信登录
技术:vue 实现效果点击微信登录入口➡打开微信登录二维码➡手机扫码授权➡进入系统相应页面开发前的准备在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的 AppID 和A ...
Vue 内嵌微信登录二维码及修改默认样式
1. index.html 引入微信官方提供的js文件 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/w ...

vue 微信登录(使用了vant)

vue 微信登录(使用了vant)相关推荐

最新文章

热门文章