小程序登录弹框

最新推荐文章于 2024-07-29 12:03:59 发布

Terminal丶句点

最新推荐文章于 2024-07-29 12:03:59 发布

阅读量861

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_40026668/article/details/114406257

版权

本文档介绍了在小程序中实现登录弹窗的需求背景及详细流程。当用户触发特定操作时，若未登录则弹出登录框。登录成功后，系统会自动执行用户的初始操作。涉及的关键技术包括behaviors混入、小程序获取自定义组件实例。实现过程中，创建了login-box组件，并在根目录的components文件夹下实现，同时重构了页面组件，使用了 vant 弹框并创建了mixins文件夹来混入一些常用方法，如登录状态检查和登录验证。

摘要由CSDN通过智能技术生成

需求描述源码地址

登录弹框样式实现。
在用户发起操作时（如：点击某个按钮）检测用户登录，如未登录，记录用户操作，弹出登录框。
用户登录成功后自动用户的上次操作。
操作流程 (开始)用户点击行为 --> 验证是否登录 --> 已登录，返回成功回调（结束），未登录，弹出登录框 --> 用户点击登录 --> 登录完成，根据记忆重复用户开始位置的点击行为

所需知识点

behaviors混入
小程序获取自定义组件实例

实现

实现登录弹框组件在根目录创建components文件夹，新建login-box组件,注意这里引用了vant的弹框，可以替换为自己的ui库弹框。

在这里插入图片描述
login-box/index.js文件中的$show方法记录当前调用位置的this实例、触发弹框的方法、方法的参数，以便于在登录成功后重新执行触发弹框的方法来记忆用户的上次操作

import {
   SwwComponent} from "../../mixins/component";
import {
   wxLogin} from "../../utils/wxPromise";

SwwComponent({
   
    data: {
   
        userInfoVisible: false,
    },
    pageLifetimes: {
   
        show() {
   
            if ((this.data.userInfoVisible || this.data.phoneVisible) && this.$isLogin()) {
   
                this.$close()
            }
        }
    },
    methods: {
   
        //关闭弹框
        $close() {
   
            this.setData({
   
                userInfoVisible: false,
                phoneVisible: false
            })
        },
        //打开弹框
        $show(currentThis, funName, params) {
   
            this.currentThis = currentThis
            this.loginFunName = funName
            this.loginFunParams = params
            this.setData({
   
                userInfoVisible: true
            })
        },
        //获取用户信息
        $getUserInfo(e) {
   
            wx.nextTick(