1.判断是否有code---没有

跳转到微信官方网址

网址中的参数参考微信公众平台官网----网页授权 | 微信开放文档 (qq.com)

    getCode() {         //微信网页授权返回codelet wx_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx29bc7e1d33d38e7f&redirect_uri=https%3A%2F%2Flearn-card.cxkey.cn&response_type=code&scope=snsapi_userinfo#wechat_redirect'window.location.href = wx_url;},

官方获取到你微信中的信息然后将用户的code，将这个code拼接到你路由的后面

ps：成功后会自动返回到你的路由并且返回code

2.然后在回到路由从新判断是否有code--有了

调用后端接口进行登录|注册

完整代码：

<script>
import { getCertificateInfoList, deleteCertificateInfoList, get_wechat, register, wechat_login } from '@/api/index.js'
import d from '@/utils/d.js'
import axios from 'axios'
import { Notify } from 'vant';
export default {name: 'HelloWorld',props: {msg: String},data() {return {wechatInfo: null,userid: 0,dd: 'dd',all_list:null,allh: 100,CertificatePic: require('../assets/1.png')}},methods: {toThree(item) {console.log(item,'item');localStorage.setItem('currentCer',JSON.stringify(item))this.$router.push('/change')},getData() {let objif(localStorage.getItem('userid')){obj={ pageSize: 10, page: 1, status: 2 ,account_id:Number(localStorage.getItem('userid'))}}else{obj={ pageSize: 10, page: 1, status: 2 }}getCertificateInfoList(d.encryptByDES(JSON.stringify(obj))).then(res => {if(res.data.code==0){this.all_list=JSON.parse(d.decryptByDES(res.data.data.list));console.log( this.all_list)this.all_list.forEach((item,index)=>{console.log(item,index);if(index%2==0 || index==0){this.mainlist.push(item)}else{this.mainlist1.push(item)}})}else{console.log(res.data.msg,'getCertificateInfoList')}})},delData() {deleteCertificateInfoList().then(res => {console.log(res, 'deleteCertificateInfoList')})},getCode() {         //微信网页授权返回code// alert('获取code')let wx_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx29bc7e1d33d38e7f&redirect_uri=https%3A%2F%2Flearn-card.cxkey.cn&response_type=code&scope=snsapi_userinfo#wechat_redirect'window.location.href = wx_url;},wechat_login(weixin_id) {    //登录this.dd = weixin_idwechat_login(d.encryptByDES(JSON.stringify({ weixin_id }))).then(res => {console.log(res, res.data.msg, 'login')if (res.data.code != 0) {   //没有此用户去注册并缓存this.register(this.wechatInfo.nickname, this.wechatInfo.headimgurl, this.wechatInfo.openid);} else {    //有此用户缓存let loginUser = JSON.parse(d.decryptByDES(res.data.data))let loginInfo = { user_name: loginUser.user_name, weixin_id: loginUser.weixin_id, avatar: loginUser.avatar ,phone:loginUser.student_phone,sex:loginUser.sex}console.log(loginUser.id, loginInfo)localStorage.setItem('userid', loginUser.id)localStorage.setItem('userinfo',JSON.stringify(loginInfo))}})},register(user_name, avatar, weixin_id) {    //注册console.log({ user_name, avatar, weixin_id }, 'register1111')register(d.encryptByDES(JSON.stringify({ user_name, avatar, weixin_id }))).then(res => {console.log(res, { user_name, avatar, weixin_id }, 'register')let loginUser = JSON.parse(d.decryptByDES(res.data.data))let loginInfo = { user_name: loginUser.user_name, weixin_id: loginUser.weixin_id, avatar: loginUser.avatar,phone:loginUser.student_phone,sex:loginUser.sex }console.log(loginUser.id, loginInfo)localStorage.setItem('userid', loginUser.id)localStorage.setItem('userinfo', JSON.stringify(loginInfo))})},get_wechat(wx_code) {                //获取微信用户注册所需的字段get_wechat({ wx_code }).then(r => {this.wechatInfo = r.data.data;console.log(this.wechatInfo, wx_code, r, 'get_wechat')this.wechat_login(this.wechatInfo.openid)   //调用登录接口判断是否已经注册过+缓存用户信息})},},mounted() {// this.wechat_login('onUJe1Ly962DUjlv-XET9Y1HTglI')   //测试用，因为电脑上没法授权微信所以获取不到codethis.getData()this.$nextTick(() => {particlesJS.load('particles', '../../static/app.json');})if (!localStorage.getItem('userid')) {//没有userid未登录if (!this.$route.query.code) {  //判断现在这个页面url是否有code---没有---调用微信网页授权获取codethis.getCode();} else {                        //判断现在这个页面url是否有code---有---并且保存起来再调用接口this.get_wechat(this.$route.query.code)}} else {//有userid已经登录// alert('有userid')}},
}
</script>

h5获取微信授权登录相关推荐

uniapp获取微信授权登录和手机号一键登录（保姆教程）
uniapp获取微信授权登录(保姆教程) 第一步下载官方给的解密文件'mWXBizDataCrypt' 没有文件就复制该文件的代码创建一个 var crypto = require('crypto' ...
【微信授权登录】uniapp开发小程序，实现获取微信授权登录功能
一.解题思路: 微信授权登录(获取用户信息) 1.先获取用户信息--用户授权允许后,通过调用uni.login 可以获取到code. 2.拿着获取到的code去调用--登录接口,可以获取到token. ...
H5网页获取微信授权登录
进入页面判断是否获取code, 有code 则直接拿code去调后端接口让后端返回token,进而再调用获取用户信息的接口 mounted() {this.code = this.getQueryVa ...
公众号平台的H5实现微信授权登录
微信给开发者提供的测试账号平台:https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/ind ...
H5页面微信授权登录——前端部分
作为一枚刚刚学习前端的小萌新来说,真的是难到了我,后来翻阅无数资料,总结如下,记录下来防止自己忘了,也为其他的刚学习的朋友一点提示吧. 首先说路由导航,把所有的访问地址先拦下来进行判断,新来的用户是否 ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
uniapp - 超详细的 H5 公众号网页微信登录示例代码，提供从 0-1 公众号配置及详细注释代码（站在新手小白的角度）第三方微信授权登录的实现！！
介绍目前示例是 "点击按钮登录",你也可以改为 "一进页面就登录" ,可随意改造. 百度的教程都太乱了,而且功能都有一定问题.本文主要讲解 uniapp H5 ...
五行代码搞定微信授权登录
Authing 通过 SDK 为开发者提供了一种快速在微信网页中获取用户信息并完成登录的方法.如果用户在微信客户端中访问第三方网页.公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑 ...
Vue 移动端 hash模式下微信授权登录
需求分析: 1.移动端微信公众号项目,需要获取微信授权进行登录 2.默认打开首页,在路由进入之前进行判断,有如下三种情况 3.本项目有两种账号类型:商家.企业,需在登录页进行选择未授权过,跳到微信授 ...

h5获取微信授权登录

1.判断是否有code---没有

2.然后在回到路由从新判断是否有code--有了

完整代码：

h5获取微信授权登录相关推荐

最新文章

热门文章