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

作者：猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录