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

Myth丶恋晨 2023-06-08 04:41 11阅读 0赞

用户登录完成之后，我们添加一个登录成功的弹窗。

#### 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][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中删除掉缓存信息，点击编译按钮刷新页面，点击授权登录按钮，登录成功后，就会出现登录成功的弹窗

![format_png][]

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 1][]

[https_developers.weixin.qq.com_miniprogram_dev_api_ui_interaction_wx.showToast.html]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
[format_png]: /images/20230531/8adb89c6d7114eef83414c7abc2b9a01.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/a99a8bd2ea2c4868b06187c5ba363e50.png