【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）

这两周的需求是通过微信扫码登录pc端，刚定下需求原型图还没出来前，后端特意发了微信开发平台的链接给我，关于如何生成二维码的文档，以及扫码跳转后如何传code给他。

请戳这里准备工作|微信开放文档

我最关心的是如何生成二维码，百度+看文档后发现，生成二维码其实不难。
首先要有微信开发平台的开发者账号，因为我们没有开发平台的开发者账号，这个申请的话要300元，后来因为一些原因，也没申请下来。

我们有微信公众号，所以换了个方向，用微信公众号的开发者账号。
如何用开发者账号开通权限以及配置路径等都是后端实现的，我这里前端实现的其实是很简单的工作

虽然不是用微信开发平台实现的微信扫码登录，但是我前期准备工作做了很多，大致分享下
1、有个容器承载二维码

  <div id="login_container" class="qr-code"></div>

2、mounted中调用方法

 mounted(){this.getQrcode();   //获取微信的登录二维码},

3、调用微信对象，创建实例

 getQrcode() {getWxappid().then((res) => {var obj = new WxLogin({self_redirect: false,id: 'login_container', //需要承载二维码的容器idappid: res.appid,       //appid可以是后端返的或者自己直接写，就是微信开放平台的appid，有开发者账号就会有这个appidscope: 'snsapi_login', //网页授权，目前网页只有这一种方式，静默授权redirect_uri: encodeURIComponent(res.redirect_uri), //回调域名，大概长这样https://xxx.xxx.xxx/xxx/wx/authorize，哈希模式用encodeURIComponent()编码，历史模式用encodeURI()state: Math.random(),style: 'white',href: '',})})},

4、当扫码成功后，跳转到重定向页面，就是我们设 redirect_uri的页面。地址栏里会有微信返回的code,提取出code传给后端，后端会返回网页授权access_token和其他一些用户信息。
(ps:这一步我没有做到，就卡在这里，因为没有微信开放平台的开发者账号而转为公众号开发，以下代码仅供参考)

【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）相关推荐

vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
微信小程序前端生成二维码并保存（海报同理）
这里写自定义目录标题 1.前端生成二维码并保存 1.前端生成二维码并保存 1.下载weapp.qrcode.js文件并引入项目中 2.先在wxml文件中构建canvas画布 <canvas st ...
Luat 功能开发教程(十三) 生成二维码
目录二维码 API说明实现流程示例生成二维码显示二维码扫码常见问题为什么烧录了生成二维码的demo以后运行会报错相关资料以及购买链接二维码二维条码/二维码(2-dimension ...
前端生成二维码qrcode.js，并下载
利用qrcode.js在前端生成二维码,并下载一.引入js包 <script type="text/javascript" src="//static.runoo ...
前端生成二维码与图片合成
首先前端生成二维码使用插件完成,插件为DrawQRCode.unitypackage 合成二维码直接使用DrawQRCode 类里提供的方法即可生成二维码的方法 DrawCode_Color32 ...
前端生成二维码（借助草料）
前端生成二维码. 使用草料API: generateQrCode(qrCode) {window.location.href = `https://cli.im/api/qrcode/code?tex ...
vue前端生成二维码并导出PDF
1.安装插件 npm install --save qrcodejs2 (这是生成微信二维码插件) npm install html2canvas jspdf --save (这是将html页面转化为 ...
PHP微信公众平台开发高级篇—生成二维码接口
一.说明 1.这里讲解生成二维码接口(临时二维码和永久二维码) 2.这里给出简单的实现代码,不做详细说明 3.可以参考开发手册: https://mp.weixin.qq.com/wiki?t=res ...
PHP微信公众平台开发高级篇--生成二维码接口
临时二维码实例临时二维码 <?php /*** 生成二维码接口* 文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id= ...

【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）

【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）相关推荐

最新文章

热门文章