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

目录
相关文章
|
7天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
7天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
7天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
7天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
7天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通
|
29天前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
25 2
|
1月前
|
移动开发 小程序 API
微信小程序的一些开发限制
微信小程序的一些开发限制
72 1
|
1月前
|
JSON 小程序 前端开发
微信小程序开发入门学习01-TDesign模板解读
微信小程序开发入门学习01-TDesign模板解读
|
1月前
|
小程序 数据可视化 开发者
微信小程序开发入门介绍-布局组件
微信小程序开发入门介绍-布局组件

热门文章

最新文章