微信小程序 如何实现登录

article/2025/10/8 10:50:42

业务流程:

1:首先需要一个按钮触发事件

2:调用微信小程序的登录接口wx.login,拿到code

3:调用微信小程序的获取用户信息的接口wx.getUserProfile,拿到用户的个人信息

4:拿到的个人信息调用后台的接口,把个人信息传给后台,登录成功并把相关信息存储在本地的缓存中,方便之后的开发使用

下面开始用代码介绍

wxml:

<view><button bindtap="login">登录</button>
</view>

js:

1:data初始数据

//后台接口需要的一下参数(具体要和后台的同事商量)    
loginInfo: {code: '',spread_spid: 0,spread_code: 0
}

2:按钮触发的login点击事件, 

        调用微信小程序的登录接口:wx.login(Object object) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

        调用微信获取用户个人信息的接口:wx.getUserProfile(Object object) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html 

//登录按钮触发的事件
login(){let that = this//调用微信小程序的登录接口wx.login({success(e) {that.data.loginInfo.code = e.code //拿到的code存储在data中wx.showModal({title: '温馨提示',content: '微信授权登录后才能正常使用小程序功能',cancelText: '拒绝',confirmText: '同意',success( sucessInfo ) {//调用微信小程序的获取用户信息的接口wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途lang: 'zh_CN',success(info) {//把获取到的信息复制到data中的loginInfo中that.data.loginInfo = Object.assign( that.data.loginInfo, info )//调用后台的接口,把所有整合的个人信息传过去that.handlerLogin( that.data.loginInfo )},fail(e) {console.log('获取用户信息失败', e)}})},fail() {console.log("拒绝")},complete() {}})},fail(e) {console.log('fail', e)wx.showToast({title: '网络异常',duration: 2000})return}})}

3:调用后台的登录接口,

        wx.setStorageSync() :将数据存储在本地缓存中,wx.setStorageSync(string key, any data) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

        wx.getStorageSync('token') :获取本地缓存的数据

any wx.getStorageSync(string key) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorageSync.html

//调用后台的登录接口handlerLogin( loginInfo ) {let that = this//login是后台接口封装的方法login( loginInfo ).then(( res ) => {console.log('登录成功', res)let { cache_key, expires_time, token, userInfo } = res.data//把用户信息存储到storage中,方便其它地方使用wx.setStorageSync('cache_key', cache_key)wx.setStorageSync('expires_time', expires_time)wx.setStorageSync('token', token)wx.setStorageSync('isLog', true)wx.setStorageSync('userInfo', JSON.stringify( userInfo ))wx.setStorageSync('loginRecord', new Date().getTime())}).catch(( res ) => {console.log('catch', res)}).finally(() => {console.log('finally')})}

以上就是微信小程序开发时,实现的登录。一共4步走,希望能帮助得到大家。 


http://chatgpt.dhexx.cn/article/qDJbjBy8.shtml

相关文章

小程序登录流程

用户登录是一个系统的必备功能。而小程序的登录流程和Web端又有一些不同&#xff0c;主要是要与微信服务器进行通信验证。下面我们就来看下小程序具体的登录流程。 1.通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息&#xff0c;调用wx.getUserInfo 读取用户…

微信小程序之登录页-------实例

最近在学习微信小程序&#xff0c;下面提供自己做的微信小程序登录页面&#xff0c;仅供参考。 效果图&#xff1a; 目录结构&#xff1a; 图片&#xff1a; name.png key.png 下面是代码&#xff1a; login.wxml&#xff1a; <!--pages/login/login.wxml--> <vie…

微信小程序的登录流程

基本流程&#xff1a; 1、调用 wx.login() 获取 临时登录凭证code &#xff0c;并回传到开发者服务器。 2、调用 auth.code2Session 接口&#xff08;本接口应在服务器端调用&#xff09;&#xff0c;换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识 UnionID&…

微信小程序实现登录页面

wxml文件&#xff1a; <view class"container"> <view class"login-icon"> <image class"login-img" src"../../img/loginLog.jpg"></image> </view> <view class"login-from"> <!…

微信小程序入门(登录页面)

1.首先前往开发者工具下载安装开发工具&#xff1a; 2.安装后微信扫码&#xff0c;并填写自己的AppID选择自己的项目目录后登录&#xff1a; 登陆后点击工具上的编译按钮&#xff0c;可以在工具的左侧模拟器界面看到这个小程序的表现&#xff0c;也可以点击预览按钮&#xff0c…

微信小程序之登录注册界面的实现

初步分析&#xff0c;程序一共有两个界面即&#xff1a;登录界面和注册界面。 但是注册的时候由于不同的注册方式应该有不同的界面支持&#xff0c;故在本程序中我们要写两个注册界面和一个登录界面&#xff0c;两个注册界面分别位手机注册界面和企业用户注册界面。 在微信小程…

微信小程序之登录

目录 1、登录流程时序 1.1、wx.login(Object object) 1.1.1、功能描述 1.1.2、参数 1.1.3、object.success 回调函数 1.2、auth.code2Session 1.2.1、请求地址 1.2.2、请求参数 1.2.3、返回值 2、使用微信登录 2.1、小程序端js文件 2.2、云函数端js文件 3、获取手机…

微信小程序 16 登录界面

16.1 登录界面 html <view class"container"><view class"wrapper"><view class"left-top-sign">LOGIN</view><view class"welcome">欢迎回来&#xff01;</view><view class"input-con…

微信小程序登录注册界面

微信小程序登录注册界面demo,存在不足之处,请指教! 界面图片&#xff1a; 1.js代码&#xff1a; Page({/*** 页面的初始数据*/data: {current:1,codeText:获取验证码,counting:false,},// 登陆注册监听click(e){let index e.currentTarget.dataset.code;this.setData({cur…

微信小程序登录界面的实现

首先是未登录时的界面&#xff0c;提示用户登录之后使用全部的功能。 用户点击登录&#xff0c;调用API拿到用户的信息并在页面中显示出来&#xff0c;同时将用户的信息保存在本地。向后端发送POST请求&#xff0c;拿到code&#xff0c;拿到token&#xff0c;并保存在本地&…

(一)微信小程序云开发之登录界面设计

最近在开发微信小程序&#xff0c;现阶段采用的云开发的方式。云开发与使用本地服务器开发还存在着一定的差异。本地服务器的开发后续记录。这里并没有记录微信小程序的云开发项目的创建方式。 先对微信小程序简单的登录界面做出实例。 1、登录界面UI 2、代码 2.1wxml login…

微信小程序开发(2)—— 简单的页面登陆实现

微信小程序开发&#xff08;2&#xff09; 二、简单的登陆实现&#xff08;非授权登录&#xff09;新建文件夹进入login.wxml界面进入login.wxss进入login.js进入json进入app.json效果图 二、简单的登陆实现&#xff08;非授权登录&#xff09; 新建文件夹 文件夹内新建js、wx…

微信小程序简洁登录页面(附源码)

文章目录 1.登录页面2.用户不存在3.代码3.1 login.wxml3.2 login.css3.3 login.js 4*斜体样式*.总结 1.登录页面 登录的具体流程 1.当用户输入密码和账号后首先检验账号和密码是否为空 2.若不为空&#xff0c;则将输入的账号发送到后端&#xff0c;首先判断账号是否存在 3.若账…

接口压力测试脚本

performance.py #构造性能测试基类 import re import time import requests import threading #初始化url、method&#xff08;默认get&#xff09;、header&#xff08;默认为空字典&#xff09;等参数, #这里Performance类重写父类threading.Thread的__init__方法,会覆盖父类…

超实用压力测试工具-ab工具

写在前面 在学习ab工具之前&#xff0c;我们需了解几个关于压力测试的概念 吞吐率&#xff08;Requests per second&#xff09; 概念&#xff1a;服务器并发处理能力的量化描述&#xff0c;单位是reqs/s&#xff0c;指的是某个并发用户数下单位时间内处理的请求数。某个并发用…

接口压测测试

Jmeter测试接口&#xff08;包括登陆操作&#xff09; 创建HTTP Request先登录参考&#xff1a; http://blog.csdn.net/ab_2016/article/details/78249686 注意&#xff1a;勾选FollowRedirects 自动重定向Redirect Automatically&#xff1a;HttpClient接收到请求后&#x…

接口测试及常用接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…

【接口压测】

感悟 最近在做的项目中,需要去做核心接口的压测工作,初次在实际项目中进行接口压测,本人属实有点慌张. 在经历了几周的时间,自己的压测脚本,从最初的单线程,变成多线程,最后又通过协程的方式去实现. 接口压测,首先需要去选择一款适合自己的压测工具,jmeter,loadrunner,locust等…

Postman 接口压力测试

第一步&#xff1a;点击Collections中的 按钮新增一个Collection 第二步&#xff1a;新增一个 request 第三步&#xff08;可选&#xff09;&#xff1a;可以分别对 collection 和 request 进行重命名 第四步&#xff1a;修改 request 中的 RequestBody 以及 URL&#xff0c;…