个人技术总结——uniApp中对popup的使用

[222000134叶颖]

这个作业属于哪个课程	软件工程-23年春季学期软件工程
这个作业要求在哪里	软件工程实践总结&个人技术总结
这个作业的目标	1、课程回顾与总结 2、个人技术总结
其他参考文献	见文末

---

目录

• 一、技术概述
• 二、技术详述
• 三、技术使用中遇到的问题和解决过程
• 3.1 遇到的问题
• 3.2 解决过程
• 四、总结
• 参考资料

一、技术概述

  uni-popup弹出层组件，在需要弹出一个消息提示窗口、提示框等时进行使用。由于在showToast中无法使用uniCloud的callFunction（），因此需要使用popup组件。

二、技术详述

• 下载插件
  为了使弹窗生效，需要检查是否安装了 uniApp弹窗插件 uni-popup +uni-transition。
  如果没有安装，到官网中进行下载。

• 基本用法
  

  

<template>
    <view>
        <button type="primary" @click="toggle('top')">顶部弹出</button>
        <button type="primary" @click="toggle('center')">居中弹出</button>
        <button type="primary" @click="toggle('bottom')">底部弹出</button>
        <uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" @change="change">
            <view style="background-color: #fff;padding: 15px;">
                popup
            </view>
        </uni-popup>
    </view>
</template>
<script>
export default {
    data() {
        return {
            type: 'top'
        };
    },
    methods: {
        toggle(type) {
            this.type = type;
            this.$refs['popup'].open();
        },
        change(e) {
        }
    }
};
</script>

• 对话框弹出层
  

  

<template>
    <view>
        <button style="background-color: #81d977;" @click="toggleMessage('success')">成功</button>
        <button style="background-color: #dd8f8f;" @click="toggleMessage('error')">错误</button>
        <button style="background-color: #f0c086;" @click="toggleMessage('warn')">警告</button>
        <button style="background-color: #c0c4c5;" @click="toggleMessage('info')">信息</button>
        <uni-popup ref="popupDialog" type="dialog">
            <uni-popup-dialog :type="msgType" title="通知" content="欢迎使用 uni-popup!" :before-close="true" @confirm="dialogConfirm" @close="dialogClose" />
        </uni-popup>
    </view>
</template>
 
<script>
export default {
    data() {
        return {
        };
    },
    methods: {
        toggleMessage(type) {
            this.$refs['popupDialog'].open();
        },
        dialogConfirm() {
            this.$refs['popupDialog'].close();
        },
        dialogClose() {
            this.$refs.popupDialog.close();
        }
    }
};
</script>

• 对话框+uniCloud.callFunction

<view v-if="current == 0" class="content">
    ...
    <image src="../../static/team/out.png" class="out-team" @click="toggleMessage(1,'')" />
    ...
</view>
<uni-popup ref="popupDialog1" type="dialog">
    <uni-popup-dialog title="提示" content="是否确定退出小队？" :before-close="true" @confirm="dialogConfirm" @close="dialogClose" />
</uni-popup>
...
<script>
    export default {
        methods: {
            async toggleMessage(index, teamId) {
                if (index == 1) {
                    await this.$refs['popupDialog1'].open()
                } else if (index == 2) {
                    this.tID = teamId
                    await this.$refs['popupDialog2'].open();
                }
            },
            async dialogConfirm() {
                await uniCloud.callFunction({
                        name: 'fe-team-leaveTeam',
                        data: {
                            userId: this.userId
                        }
                    })
                    .then(res => {
                        if (res.result.code == 200) {
                            this.join = false
                            uni.showToast({
                                title: '退出成功'
                            });
                        } else {
                            uni.showToast({
                                title: '退出失败',
                                icon: 'error'
                            });
                        }
                    })
                await this.$refs['popupDialog1'].close();
            },
            dialogClose() {
                this.$refs.popupDialog1.close();
            },
            ...
        }
    }
</script>

三、技术使用中遇到的问题和解决过程

3.1 遇到的问题

按照官网的demo里面引入了组件和方法，但是onclick触发函数的时候出现报错：

TypeError: Cannot read property 'open' of undefined

3.2 解决过程

  根据查阅资料，由于我在页面中使用了u-tabs ，在页面初始化时，只会初始化tab当前值所对应的view。而我的popup刚好放在tab的view里面。

<view v-if="current == 0" class="content">
    ...
    <uni-popup ref="popupDialog1" type="dialog">
        <uni-popup-dialog title="提示" content="是否确定退出小队？" :before-close="true" @confirm="dialogConfirm" @close="dialogClose" />
    </uni-popup>
    ...
</view>

  因此，得出结论，是组件的挂载时机问题。
  在Vue中，组件的挂载发生在生命周期钩子函数mounted中。mounted钩子函数在组件被添加到DOM后调用，此时组件的模板已经编译完成，组件实例已经创建，并且可以与数据进行交互和操作DOM元素。然而，有时候我们在组件内部可能会使用一些条件判断（例如v-if）来控制组件的显示和隐藏。这就引入了一个潜在的问题：如果组件被条件判断控制而没有被渲染到DOM中，那么它的挂载时机会被推迟，直到满足条件时才会进行挂载。这种情况下，如果我们在组件还未挂载时就尝试调用组件的方法或访问组件的属性，就会出现问题，因为组件尚未完成初始化。这可能导致一些意料之外的行为或错误。
  那么解决问题的关键在于在页面加载时就将组件初始化。通过将组件放置在最外层的view中，可以确保组件在页面加载时就进行初始化，从而解决了挂载时机的问题。

<view v-if="current == 0" class="content">
    ...
</view>
<uni-popup ref="popupDialog1" type="dialog">
    <uni-popup-dialog title="提示" content="是否确定退出小队？" :before-close="true" @confirm="dialogConfirm" @close="dialogClose" />
</uni-popup>
...

补充：
Vue 2.x版本中常用的生命周期钩子函数：

• beforeCreate : 组件实例刚被创建，数据观测和事件机制未初始化。在此阶段无法访问到组件的数据和方法。
• created : 组件实例已经创建完成，数据观测和事件机制已经初始化，但尚未挂载到DOM中。可以访问组件的数据和方法，但DOM相关操作无效。
• beforeMount : 组件即将被挂载到DOM之前被调用。此时，模板已经编译完成，但尚未将生成的DOM替换掉挂载点。
• mounted : 组件已经被挂载到DOM上。此时，组件的实例已经和一个DOM节点建立了关联，可以进行DOM操作和访问DOM元素。常用于初始化操作、获取数据或与第三方库进行交互。
• beforeUpdate : 组件数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。可以在此阶段进行数据的预处理或阻止更新。
• updated : 组件数据已经更新完成，虚拟DOM已经重新渲染和打补丁完成。可以执行DOM操作，但要注意避免无限循环更新。
• beforeDestroy : 组件销毁之前被调用。可以进行善后清理工作、解绑事件监听器、销毁定时器等。
• destroyed : 组件已经销毁，对应的DOM元素也被移除。在此阶段，组件的实例已经被完全销毁，无法访问组件的数据和方法。

四、总结

  在学习新技术时，官网的学习文档往往是最好的，要学会善于使用。我也对组件的挂载有了深入的了解，也进一步对生命周期进行了学习。

参考资料

• uni-popup官网介绍