3.6【微信小程序全栈开发课程】登录功能(四)--显示登录成功弹窗

简介: 用户登录完成之后,我们添加一个登录成功的弹窗。

1、创建工具函数文件


创建src/util.js工具函数文件,用来放我们后期会重复用到的函数,比如提示框,HTTPS请求等。粘贴下面代码到util.js文件中


//消息提示框
export function showSuccess (text) {
  //wx.showToast是小程序现成的API,其中title是提示的内容,icon是显示的图标
  wx.showToast({
    title: text,
    icon: 'success'
  })
}


wx.showToast使用文档


https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html


2、引用util.js文件


在src/components/LoginWindow.vue文件中添加import引用util.js文件,我们就可以在LoginWindow.vue文件中直接使用showSuccess方法了


//参考代码,无需粘贴
//import qcloud from 'wafer2-client-sdk'
//import config from '@/config'
//需要添加的部分
import {showSuccess} from '@/util'


3、使用showSuccess方法


编辑script部分的methods对象,在loginSuccess方法中使用,不要忘记保存文件哦~


//参考代码,无需粘贴
//loginSuccess (res) {
  //需要添加的部分
  showSuccess('登录成功')
//参考代码,无需粘贴
//wx.setStorageSync('userinfo', res)
//},


4、查看效果


在Storage中删除掉缓存信息,点击编译按钮刷新页面,点击授权登录按钮,登录成功后,就会出现登录成功的弹窗


image.png

目录
相关文章
|
10月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
3084 12
|
小程序 前端开发 算法
|
移动开发 前端开发 Android开发
开发指南059-App实现微信扫描登录
App是用uniapp开发的,打包为apk,上传到安卓平板中使用
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【10月更文挑战第3天】随着移动互联网的发展,小程序因便捷的用户体验和社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的WebSocket实时通信实践,包括其实时通信、长连接及双向通信的特点,并通过实时聊天、推送、游戏和监控等功能的实现,展示了WebSocket在小程序中的应用。开发者需注意安全性、性能及兼容性等问题,以保障小程序的稳定运行和用户体验。
275 7
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
402 5
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
276 5
|
小程序 算法 前端开发
微信小程序---授权登录
微信小程序---授权登录
324 0
|
人工智能 小程序 Python
Python编程小案例——编一个事件提醒弹窗小程序
Python编程小案例——编一个事件提醒弹窗小程序
342 0
|
3月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
4月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
197 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记

热门文章

最新文章