uniapp开发微信小程序之登录

uniapp中使用微信登录app 之前经手的一个uniapp开发的app剩下一个微信登录的功能,之前没有独立搞过这一块,在网上查了很多资料已解决。记录一下实现的步骤,方便下一次copy。 一、首先在Hbuilder中配置微信授权登录 App模块配置中勾选OAuth -->微信登录 :填写appid和appsecret 二、获取appid和appsecret 1、appid和appsecret是在微信开放平台中获取的。首先需要去微信开放平台注册账号,创建移动应用(下图) 2、 创建移动应用需要填写包名和签名(后续会介绍如 阅读详情

最近开发了一个关于订餐的小程序,记录一下开发过程中运到的问题。
小程序登录实现流程:
(1)调用微信登录方法获取code
(2)后端接口根据code查询该用户是否手机号授权,已绑定openID
(3)若绑定过,则直接跳入页面;若没有,则进入授权页面,进行手机号授权
(4)获取手机号授权code
(5)后端接口通过微信登录code和手机号授权code,获取openID,绑定到该用户账号上
(6)登录成功

下面是简单调用微信的登录方法,获取code

getUserInfo() {
				wx.login({
					success(res) {
						console.log("登录信息", res)
						if (res.code) {
							console.log(res.code)
							// 调用接口。将登录code传给后端进行判断
						} else {
							console.log(res.errMsg)
						}
					}
				})
			},

根据微信的官方文档,获取用户用户手机号,通过将 button 组件 open-type 属性值设置为 “getPhoneNumber”。用户同意后,会回调 bindgetphonenumber 事件,获取到code 。这里需要注意下,如果是uniapp写的微信小程序,就不能直接回调 bindgetphonenumber 事件,可以用 @getphonenumber ;还有就是一定要根据e.detail.errMsg 判断一下用户是否拒绝授权。详细示例如下:

<template>
	<view>
		<view class="content">
			 <view class="login_box"">
				<view class="wx_img">
					<button class="button_2" open-type="getPhoneNumber" @getphonenumber="getUserInfo">
						<uni-icons type="weixin" color="#FFFFFF" size="25"></uni-icons>
						<text class="button_text_20">微信用户一键登录</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
export default {
	data() {
			return {
				code: '', //wx.log
			}
		},
	methods: {
			// 直接获取手机号授权
	  		/* getUserInfo(e) {
				if(e.detail.errMsg == 'getPhoneNumber:fail user deny'){
					// 如果拒绝授权登录,就走这里
				} else {
				   // 同意手机号授权登录
				    console.log(e.detail.code)
				   // 拿到手机号的授权code和上面微信授权的code之后。就可以传给后端,登陆啦
				}
			}, */
			// 授权登录,下面是先微信登录,再手机号授权登录
			getUserInfo(e) {
				let that = this
				wx.login({
					success(res) {
						console.log("登录信息", res)
						if (res.code) {
							that.code = res.code
							that.getPhoneNumber(e)
							console.log(that.code)
						} else {
							console.log(res.errMsg)
						}
					}
				})
			},
			// 手机号授权
			getPhoneNumber(e) {
				if(e.detail.errMsg == 'getPhoneNumber:fail user deny'){
					// 如果拒绝授权登录,就走这里
				} else {
				   // 同意手机号授权登录
				    console.log(e.detail.code)
				   // 拿到手机号的授权code和上面微信授权的code之后。就可以传给后端,登陆啦
				}
			}
		}
 }
uniapp微信小程序端实现微信登录 从网上看了一些,好像说是要先调用uni.getUserProfile 或者uni.getUserInfo获取用户信息后,然后再调用uni.login才行,但是我看着uni.getUserProfile和uni.getUserInfo 返回的都是一些匿名信息(nickName: "微信用户", 头像也是统一的灰色头像),不知道有啥用哦,应该是之前是可以正常返回的,后来不知哪个版本后应该是为了用户的隐私、安全啥的,就都返回匿名信息了。(提前向用户发起授权请求。 阅读详情

相关推荐

uniapp开发微信小程序用户名密码登录实现

【代码】uniapp开发微信小程序用户名密码登录实现。

zhao_junge的博客 883

uniapp微信一键登录微信授权

微信登录,uniapp微信授权登录

m0_45884629的博客 2万+

【微信授权登录】uniapp开发小程序,实现微信授权登录功能 & 退出登录

uniapp开发小程序,实现获取微信授权登录功能 & 退出登录

weixin_48596030的博客 1万+

uniapp实现微信小程序一键登录

实现微信一键登录的流程:① 微信小程序端获取临时凭证codecode只能被消费一次② 将code交给后端③ 后端拿到code,向微信服务器发起请求,拿到openidopenid代表微信用户在一个小程序中的唯一标识,另外拓展一下unionid代表微信用户在企业中的唯一标识④ 后端查询数据库是否存在这个openid,存在则登录,返回token;不存在则注册账号,登录,返回token。

weixin_74261199的博客 1万+

使用uView UI和UniApp开发微信小程序:通过微信授权绑定和键登录系统的前端开发

通过以上步骤,我们成功地实现了使用uView UI和UniApp开发微信小程序的前端开发过程,并实现了微信授权绑定和键登录系统的功能。在本文中,我们将探讨如何使用uView UI和UniApp开发微信小程序,并实现微信授权绑定和键登录系统的前端开发。希望本文能帮助你开始使用uView UI和UniApp开发微信小程序,并实现所需的功能。然后,当用户点击登录按钮时,我们可以将用户名和密码发送到后端进行验证。在创建项目的过程中,你需要选择适合你的配置选项。方法获取用户的信息,并将其显示在页面上。

CflfEditor的博客 706

uniapp和springboot微信小程序开发实战:后端架构搭建之使用shiro和jwt实现登录认证

认证就是要核验用户的身份,比如说通过用户名和密码来检验用户的身份。说简单一些,认证就 是登陆。登陆之后Shiro要记录用户成功登陆的凭证。授权是比认证更加精细度的划分用户的行为。比如说一个教务管理系统中,学生登陆之后只能查 看信息,不能修改信息。而班主任就可以修改学生的信息。这就是利用授权来限定不同身份用户 的行为。修改配置文件,增加如下内容jwt:#密钥#令牌过期时间(天)expire: 5#令牌缓存时间(天数)

xuemeng2016的专栏 2554

uniapp开发微信小程序授权登录

uniapp开发,微信小程序授权登录

qq_17617249的博客 1344

JW01二氧化碳传感器实战:5分钟搞定Arduino环境监测系统(附完整代码)

本文详细介绍了如何使用JW01二氧化碳传感器与Arduino快速搭建环境监测系统。通过简单的硬件连接和完整的代码示例,读者可以在5分钟内实现CO2浓度实时监测,并了解数据解析、常见问题解决及进阶应用扩展。JW01传感器的高精度和易用性使其成为创客和嵌入式开发者的理想选择。

kite3的博客 382

uniapp unicloud之个人微信小程序云开发,微信授权登录,token验证

https://uniapp.dcloud.io/uniCloud/concepts/space

qq_44929561的博客 8169

C#创建COM组件,QT调用COM组件简单测试(VS2008+QT4.6.4)

一. C#创建组件: 1. VS2008新建一个项目,选择Visual C#, Class library 修改Properties下面的AssemblyInfo.cs文件,ComVisible属性设置为True,即:[assembly: ComVisible(true)] 2. 右击项目,选择“属性”, 选择“生成”选项卡,把“为COM互操作注册”勾选上 选择“签名”选项卡,把“

3517

西红柿成熟度检测数据集总结

成熟度类别标注数量semiripe(半成熟)10275rotten(腐烂)13470fullyripe(完全成熟)35031unripe(未成熟)26212。

crz1336768325的博客 2125

uniapp微信小程序详细入门教程

uni-app是一个使用Vue.js开发所有前端应用的框架,允许开发者编写一套代码,即可发布到iOS、Android、Web(H5)、以及各种小程序(微信、支付宝、百度、字节跳动等)平台上。它由DCloud公司开发,整合了自家的5+ Runtime和各种小程序API,使得跨平台开发更加便捷。UniApp的目录结构遵循Vue.js项目的基本布局,并且针对跨平台开发进行了优化。

2301_76481677的博客 8076

【C++】 详解 lower_bound 和 upper_bound 函数(看不懂来捶我!!!)

这两个函数是我在 LeetCode 上做题见到,看到不熟悉的函数 lower_bound 和 upper_bound让我感觉很难受,于是在C++ 官网去学习,例子就一个是最基础的,我看明白了。虽然是两个函数的接口就两个,但是有时候看别人使用的时候,里面参数还可以放不同的仿函数,我懵逼了。就去网上搜,但是大家讲解的都是它的第一个接口。我只能再把文档一遍一遍过,代码一遍遍的尝试,调试。最终通过查阅资料将其总结如下。

weixin_45031801的博客 9万+

使用uni-app开发微信小程序之登录模块

使用uni-app开发微信小程序之登录模块 从微信小程序官方发布的公告中我们可获知:小程序体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作: 1.当用户未授权...

weixin_34159110的博客 1862

PTC-6-2004汽轮机性能计算源代码,pycharm-包括试验计算、一类修正、二类修正-以CC350-16.7/0.98/0.5/538/538型汽轮机为例,5万7千字,过程不易欢迎打赏

汽轮机性能计算完整源代码-简化试验-包括试验计算一类修正计算和二类修正计算目录图 1 工程结构。

weixin_43441028的博客 997

MySQL常见面试题汇总(建议收藏!!!)

目录一、索引相关(1)什么是索引?(2)索引是个什么样的数据结构呢?(3)为什么使用索引?(4)Innodb为什么要用自增id作为主键?(5)Hash 索引和 B+ 树索引有什么区别或者说优劣呢?(6)什么是聚簇索引(6)非聚簇索引一定会回表查询吗?(6)聚簇索引和非聚簇索引的区别(6)MyISAM和InnoDB实现B+树索引方式的区别是什么?(6)MySQL中有四种索引类型,可以简单说说吗?(6)覆盖索引是什么?(6)联合索引是什么?为什么需要注意联合索引中的顺序?(6)创建的索引有没有被使用到?或者说怎

蔡政洁的博客 7万+

uniapp开发微信小程序-5.用户授权登录和用户信息获取

实际上手机号的应用场景基本上是在进行支付时才可以获取,是被用作支付凭证时使用(涉及商户号等支付操作),所以为了保护用户隐私,,大家完全可以使用onload方法在进入页面时直接执行下方的登录方法,免去用户登录这一操作,因为openid并不涉及用户隐私,所以平台没有强制我们询问用户是否授权。这个过程我们会在下篇文章。同样的,根据你的需求在数据库中将openid作为第二索引值保存,用户每次登录时就可以获取自己的数据。,openid是单个用户在此小程序中的唯一标识,单个用户在多个小程序中的标识是不同的。...

drnrrwfs的博客 8916

SpringBoot如何正确连接SqlServer(亲测可用)

对于SpringBoot连接SqlServer的方式和常见的错误的汇总。1、驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接。2、com.microsoft.sqlserver.jdbc.SQLServerException: 对象名 ‘DUAL‘ 无效。

黄团团的个人博客 2万+

直播app开发搭建,uniapp中微信小程序账号登录

以上就是 直播app开发搭建,uniapp中微信小程序账号登录,更多内容欢迎关注之后的文章。直播app开发搭建,uniapp中微信小程序账号登录。

云豹网络科技 246

YOLO项目部署:从Python脚本到Docker容器的企业级交付全流程

YOLO模型企业级Docker部署方案 核心挑战 环境一致性:解决"本地能跑,服务器崩掉"问题 可扩展性:支持单实例到多实例扩展 稳定性:确保99.9%可用性 部署流程 项目改造:模块化代码,分离配置 Docker镜像:支持CPU/GPU环境 API服务:封装推理逻辑 监控告警:实现自动化运维 技术方案 需求 解决方案 环境一致性 Docker镜像+依赖冻结 可扩展性 K8s+负载均衡 稳定性 健康检查+自动重启 项目结构 模块化代码组织 外部化配置管理 精确依赖版本控制 摘要重点:通过

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 1230

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

uniapp开发之微信小程序登录

都需要获取临时code(有效期5分钟),再通过code获取用户手机号返回给前端,而且都要用到appid和secret,所以步骤少不了。在开发一款微信小程序时,需要用户进行微信登录,有两种方案。今天介绍第二种,因为第一种开始收费了。再请求获取openid。

はんみん的博客 1002

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

uniapp 开发【微信小程序简陋登录模块】

<script> export default { data() { components: { ...

244

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

真机调试,微信小程序,uniapp项目在微信开发者工具中真机调试,手机和电脑要连同一个wifi,先清空缓存,页面从登录页进入,再点真机调试,这样就不会报错了

微信小程序 真机调试uniapp项目在微信开发者工具中真机调试,手机和电脑要连同一个wifi,先清空缓存,页面从登录页进入,再点真机调试,这样就不会报错了不要直接选择某个页面真机调试,这样会报错,报网络错误。要先清空缓存,页面从登录页开始,再点真机调试。这样就不会报错了,不会报网络错误,会正常的发请求,拿到服务器的数据。

Frank_colo的博客 1266

uni app和php开发微信登录代码,uni-app微信小程序登录授权的实现

微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点:首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接口写到该事件里面去{{loginInfo.openid != "" && loginInfo.openid != undefined ? "已授权...

weixin_42413377的博客 618

uniapp开发微信小程序授权登录实现

两个button是因为需要再点击登录时判断用户是否点击了授权按钮,若点击则使用第二个弹出手机号授权框,若未授权需要使用第一个提醒用户勾选授权按钮。下载后找到对应的文件放入项目中引入使用即可。

zhao_junge的博客 1694
上一篇: 在created钩子函数中对DOM进行操作
下一篇: uniapp开发微信小程序之隐藏头部导航栏
only*z*
博客等级 码龄6年 49粉丝 28原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值