【前端 VUE】VUE 微信网页扫码登录（微信）

已于 2022-07-14 14:56:12 修改
阅读量9k 收藏 21
点赞数
分类专栏： vue 文章标签： vue 微信登录 扫码登录
于 2019-10-18 17:04:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39007040/article/details/102628507
版权

//网页内调用微信扫码功能 

官方文档

//首先必须引入微信JS  

 <script type='text/javascript' src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

//1.html

<div id="login_container"></div>

//2.js

//在页面创建后调用方法 mounted内

new WxLogin 内以下参数 意思

self_redirect：跳转微信内置页面还是扫码图直接呈现在本页面定义的ID容器内

id：标签 id

appid：注册的微信appid

最低0.47元/天 解锁文章
悟空_大师兄_
关注
专栏目录
VUE项目中的微信扫码登录
weixin_46472771的博客
12-27 6369
微信扫码登录功能 首先了解微信扫码登录的流程和详解，详见微信扫码登录，这边仅是vue前端相关流程 一.创建微信登录按钮及方法，配置相关参数 1.创建微信登录按钮 <!--微信授权登录按钮--> <img src="@/assets/images/weixin.png" /><a style="line-height: 60px;height: 60px; margin: 0 5px;" type="text" @click="handLoginByWx">微信扫码登录&l
【开发心得】微信网页应用授权登录
清风唱诗人的博客
07-29 2514
self_redirecttrue手机点击确认登录后可以在iframe内跳转到redirect_uri，false手机点击确认登录后可以在topwindow跳转到redirect_uri。2.本地映射成申请时候填写的域名。1.微信官方有两种对外能力,分别是网站应用与微信开放平台,这两个服务都有授权登录,注意,我们使用的是前者,故需要的scope是。(1)直接根据appid与scope等新开一个网页，很多网站都使用该方案，缺点需要弹出一个单独的页面，用户体验不够友好。...
vue3在微信登录时使用嵌入的方式显示二维码-微信开放平台
最新发布
努力
07-14 344
官方文档有两种方法。
vue pc端微信扫码登录
YL
04-10 779
第一种是点击后跳转到二维码页面进行扫码，第二种是内嵌的方式，这两种都是获取到code传给后端，后端根据code获取openid，同时返给前端token，然后再调用登录的接口。前几天写了一遍关于钉钉扫码登录的文章，今天来补充下微信扫码登录的内容。首先看微信官方文档，能看出微信扫码可以分为两种方式。这里具体的细节我就不写了，有不明白的同学可以去看下。
【总结】有关vue使用微信扫码登录的一点小总结
热门推荐
香菇大葱的博客
06-15 1万+
vue-router + 微信扫码登录
vue项目实现微信扫码登录
weixin_44220888的博客
07-06 3310
创建组件：在Vue项目中创建一个组件，用于展示微信扫码登录的界面和处理登录逻辑。你可以在组件中引入微信登录的JavaScript SDK，并使用Axios发送请求获取登录二维码和登录状态。具体的实现方式和需求可能会有所不同，你可以根据自己的项目需求进行调整。注册微信开放平台账号并创建应用：首先，在微信开放平台上注册一个账号，并创建一个应用，获取到应用的AppID和AppSecret。后端处理登录状态检查请求：在你的后端服务器中，创建一个路由处理来接收检查登录状态的请求，并验证用户的登录状态。
vue 微信扫码登录(自定义样式)
10-15
主要介绍了vue 微信扫码登录(自定义样式)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue+abp微信扫码登录的实现代码示例
11-29
在本文中，我们将探讨如何实现Vue.js与ABP框架结合以实现微信扫码登录的功能。首先，我们需要理解微信开放平台的注册流程，接着是如何在前端生成登录二维码，以及如何处理微信回调事件，最后是后端如何接收code并...
vue使用微信扫一扫功能的实现代码
11-20
在Vue项目中集成微信扫一扫功能，需要遵循一系列步骤来实现。以下是对整个过程的详细解释： **第一步：安装依赖库** 首先，你需要安装`weixin-js-sdk`和`jquery`库，这两个库在实现微信扫一扫功能中是必不可少的。...
vue 实现微信扫码登录的方法
花生日记
06-04 5719
已登录
vue中微信扫码登录的功能
jsmeng626的博客
04-23 2335
在vue组件中加载微信SDK，并调用微信SDK提供的config接口，将appID、时间戳、随机数和当前url进行签名，并配置JS-SDK。开发者服务器通过临时票据调用微信提供的接口获取用户的openid和access_token，并保存到本地。需要注意的是，需要进行跨域访问的设置，保证vue组件可以正常调用微信SDK和与开发者服务器的交互。用户在扫码界面中扫描二维码后，微信后台将回调开发者服务器的指定url，并携带临时票据。点击扫码登录按钮后，调用微信SDK提供的scanQRCode接口，弹出扫码界面。
vue微信扫码登录
weixin_70573795的博客
08-04 361
实现微信扫码登陆
Nuxt - 实现微信扫码登录功能（SSR 服务端渲染项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
王佳斌
11-12 2788
nuxt.js 项目怎么实现微信登录和QQ登录，微信扫码登录，nuxt.js 使用 vue-wxlogin 微信登录插件，SSR服务端渲染项目植入微信登录功能，vue-wxlogin组件怎么自定义样式，网站引入的微信登录框如何修改宽高或其他样式，nuxt框架怎么做微信扫码登录功能，微信扫码登录的实现方式，nuxt扫一扫功能，nuxt对接微信开放平台的微信扫码登录功能，详细的nuxt.js ssr 服务端渲染微信扫码登录功能，使用nuxt部署的项目，现在想实现微信授权登录和qq授权登录，nuxt项目的QQ微信
VUE实现微信扫码登录
weixin_44370333的博客
11-07 3769
vue微信登录
Vue2 - 详解实现网站接入微信扫码登录功能，微信授权生成登录二维码用户用手机扫描二维码登陆，微信扫描二维码登录详细流程及示例代码，支持弹框式、浏览器单独新开页显示，最新vue集成微信扫码授权登录！
王佳斌
06-25 2365
vue2，nuxt2，PC网站，网页，微信扫码登录，微信登陆，vue2微信扫码登录，获取个人信息，扫码登录后如何获取用户手机号，微信扫码授权登录，vue2详细实现微信扫一扫登陆，pc网页微信登录，vue集成微信扫码登录，详细流程和示例源码，第三方扫码登录，vue微信扫码登录怎么新开一页，跳页显示二维码，内嵌登录二维码，iframe，iframe新页面弹出，弹出一个小窗口显示登录二维码，登录报错，微信扫码没反应，解决手机点登录报错没反应，官方文档，手机扫描微信二维码登录网站，最好用的插件，vue-wxlogi
vue - 网站接入微信扫码登录功能详细教程，完整详细流程及完整功能示例源代码（附常见问题的解决方案与二维码样式修改方案）
高级前端工程师
03-03 4989
vue.js项目植入微信登录，vue网页项目怎么做微信扫码登录，VUE项目中的微信扫码登录，VUE中最简单的js调用微信扫一扫功能，vue:如何设计网页的微信扫码登录功能，微信扫码功能官方文档，通过vue方式实现二维码扫码功能，vue调用微信扫码，vue H5 调用微信扫描二维码，Vue前端实现微信扫码登录，vue-wxlogin 微信授权登录组件，网站引入的微信登录框如何修改宽高或其他样式，wxlogin 组件插件怎么改变宽高，vue-wxlogin组件怎么自定义样式，微信网页授权，vue调用微信JSDK
基于vue的微信扫码登录系统
qq_37135612的博客
02-09 1488
需提前准备appid(在微信开放平台获取，如果是网页版，就去申请网站应用开发的appid) 在开发之前先去查看官方文档说明 准备工作 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html接下来先将授权登录的二维码显示出来： 步骤1：在页面中先引入如下JS文件（支持https）： http://res.wx.qq.com/connect/zh_
vue微信公众号扫码登录
06-23
Vue.js 是一个流行的前端框架，用于构建用户界面。关于微信公众号的扫码登录功能，它本身并不是一个库或框架内置的功能，而是微信提供的一种OAuth授权机制。在Vue项目中集成微信扫码登录，通常会用到微信开放平台（微信公众平台）提供的JS-SDK。 以下是一个简单的步骤： 1. **注册和配置**： - 在微信公众平台上注册并创建一个公众号，启用"网页授权"权限。 - 获取AppID、AppSecret等必要的参数。 2. **引入JS-SDK**： - 在Vue项目的index.html文件或公共模板中引入微信的JSSDK库。 3. **授权调用**： - 在需要扫码登录的页面，通过`wx.config`方法配置JS-SDK，设置回调函数。 - 使用`wx.login`获取用户的授权码，然后通过`wx.getUserInfo`获取用户的微信信息。 4. **处理授权结果**： - 在回调函数中处理用户的授权信息，通常会跳转到后台服务器，进行进一步的身份验证和绑定操作。 5. **刷新Token**： - 如果需要长期有效用户登录状态，可以在服务器端保存access_token，定期更新。 6. **Vue组件封装**： - 可以将上述流程封装成一个Vue组件，以便在项目中的多个地方复用。 相关问题： 1. 如何在Vue中初始化微信JS-SDK？ 2. 需要在Vue组件中如何触发微信的扫码授权流程？ 3. 授权成功后，如何在Vue中传递用户信息到后台服务器？
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值