先贴一个微信开发文档教程 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

大家可以看教程操作,我说说我在写的时候遇到的一些问题,供大家参考

1、redirect_url是扫码确认后重定向地址,需要一个自己写的页面地址,自己通过这个地址的url获取后端获取用户微信信息所需要的code。

2、redirect_url需要在微信开放平台设置,然后将redirect_url通过encodeURIComponent转码后方可正常获取二维码。

3、如果提示redirect_url参数错误,检查下参数是否是自己项目的一些参数。比如appid、redirect_url地址是否在开放平台配置。

4、内嵌二维码可以自己编辑样式,先写好样式后,将样式转成base64,放入href中即可。

5、self_redirect设置成true,意思是在当前二维码所在的iframe中跳转,默认扫码方式就设置成true

如果是内嵌二维码,就必须设置成false,否则就会出现如下图情况,在二维码嵌入的地方打开重定向的网页。

-------------------------------------------------------------

无论什么框架中使用都是在页面加载的时候引入  http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js,然后根据文档写api即可

单页面可以通过以下方式在组件创建的时候引入,在组件销毁前移除即可

create () {
const s = document.createElement('script')
s.type = 'text/javascript'
s.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
document.body.appendChild(s)
}

以上是我所遇到的所有问题,希望对大家有所帮助。

微信扫码登陆js的更多相关文章

  1. 分享一下,PHP实现第四方QQ微信扫码登陆,不接入qq互联以及微信开发者平台就可以实现用户对接鹅厂,phpQQ微信扫码登陆

    自己抓的QQ包以及整合了网上一些已经封装好了的代码具体如下:QQ: <?php class QQ extends Curl_Api { //获取登录验证码 public function QRc ...

  2. 微信扫码登陆(JAVA)

    在web端用到weChat扫码登录,在手机扫码登陆成功后,跳转到相应的界面. 1.第一步请求code 调用接口:https://open.weixin.qq.com/connect/qrconnect ...

  3. PC 微信扫码登陆

    目录 1.注册微信开发平台 2.微信开发平台添加网站应用 3.PC微信登录流程介绍 4.获取用户基本信息(UnionID机制) 1.注册微信开发平台 官网网址 自行注册,需要注意的是注册邮箱号不用与腾 ...

  4. 微信扫码登陆,qq登陆,微博登陆等第三方登陆成功后返回原来的页面并进行跳转

    原理很简单,主要是利用到window.open的第二个属性,name 前端: 原来的网页给window命名为 window.name="single" window.open(“第 ...

  5. asp源码微信扫码授权登陆电脑版

    网站接入微信扫码登录并获取用户基本信息(完美绕过微信开放平台)电脑版网站实现微信扫码登录,注册会员还要设密码太麻烦,会员也记不住密码,采用微信扫码登录网站更方便,会员无需设密码,用他的微信做为系统登录 ...

  6. php实现微信扫码自动登陆与注册功能

    本文实例讲述了php实现微信扫码自动登陆与注册功能.分享给大家供大家参考,具体如下: 微信开发已经是现在程序员必须要掌握的一项基本的技术了,其实做过微信开发的都知道微信接口非常的强大做起来也非常的简单 ...

  7. PHP实现微信扫码自动登陆与注册,参考实例

    微信开发已经是现在phper必须要掌握的一项基本的技术了,其实做过微信开发的都知道微信接口非常的强大做起来也非常的简单,这里我们一起来看一个微信自动登陆注册的例子. php 微信扫码 pc端自动登陆注 ...

  8. C#开发微信门户及应用(45)--微信扫码登录

    在前面随笔<C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理>介绍了基于微信开放平台接口实现的微信扫码直接登录的过程.本篇介绍对扫码登录的一些改进和处理,以便更方便应用在实 ...

  9. PC 端微信扫码注册和登录

    一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网 ...

随机推荐

  1. 谈谈spring-boot-starter-data-redis序列化

    在上一篇中springboot 2.X 集成redis中提到了在spring-boot-starter-data-redis中使用JdkSerializationRedisSerializerl来实现 ...

  2. webpack入门进阶(3)

    1.11.预处理器文件处理 1.sass文件 sass这种css预处理器是以.scss结尾,需要用node-sass和sass-loader来处理 安装loader npm i node-sass s ...

  3. 记一次发布/更新npm包的过程及包版本管理

    您可以发布包含package.json文件的任何目录.这里如何首次发布程序包以及如何在以后更新程序包. 如何发布包 制备 了解npm政策 在开始之前,如果您对网站礼仪,命名,许可或其他指南有疑问,最好 ...

  4. Python之浅谈模块

    目录 模块的四种形式 什么是模块 import和from......import 循环导入 模块的搜索路径 Python文件的两种用途 random模块 模块的四种形式 什么是模块 ​ 模块就是一个p ...

  5. CSS3 clip-path 用法介绍

    一.基本概念 刷新 QQ 空间动态时,发现一则广告,随着用户上下滑动动态列表,就会自动切换广告图片,这样的效果对移动端本就不大的屏幕来说,无疑是很精妙的考虑,这样的效果是怎么实现的呢? 你可以点击这里 ...

  6. 蓝桥杯javaB组入坑

    蓝桥杯Java B组 准备工作 练习入口 | 准备资料 | 查阅说明 编辑环境 我们建议您使用大赛指定的编辑环境来编写你的代码,以保证评测时和我们的编译环境一致,同时和比赛时使用的环境也一致. 推荐的 ...

  7. activiti6基础01-如何数据库操作及相关表

    官网文档:https://www.activiti.org/userguide/#queryAPI 1. Activit的简单源码解读      activiti的官方文档讲解详细很详细,也很范.按着 ...

  8. 数据库基础02-MYSQL的事务

    Mysql的事务 1.基本概念      事务本质是一组SQL操作,事务中的语句要么全部执行成功,或者全部执行失败. 2.如何保证一个事务:四个特性(ACID) 原子性 (Automic)       ...

  9. 华山论剑(没有上司的舞会)——树形dp

    华山论剑(没有上司的舞会) 题目描述 一日,小策如往常一般打开了自己的传奇,刚上线不久,就收到了帮主的私信.原来帮派里要召开一次武功比拼,让他来邀请各帮派人员,因为有些侠客还是萌新,所以需要小策挨个选 ...

  10. 状压DP之互不侵犯

    题目描述 这里 在\(N*N\) 的棋盘里面放\(k\)个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 输入格式 只有 ...