Uniapp做小程序添加一个x点击关闭弹框

要在uni-app中实现一个点击关闭弹框的功能，可以使用uni-app提供的组件来实现。以下是一个简单的例子：

在页面中添加一个弹框：

<view class="dialog">
  <view class="close-button" @click="closeDialog">x</view>
  <view class="dialog-content">
    这是弹框的内容。
  </view>
</view>

在样式中定义弹框和关闭按钮的样式：

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

在页面的methods中添加一个方法来处理关闭事件：

methods: {
  closeDialog() {
    this.$emit('close');
  }
}

在父组件中引用弹框组件，并使用`v-if`来控制弹框的显示和隐藏，同时监听弹框组件的`close`事件，来关闭弹框：

<template>
  <view>
    <button @click="showDialog">打开弹框</button>
    <dialog :show="dialogVisible" @close="closeDialog"></dialog>
  </view>
</template>

<script>
import Dialog from '@/components/dialog.vue';

export default {
  components: {
    Dialog
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
};
</script>

在这个例子中，我们使用了uni-app提供的组件`<view>`来实现弹框，并使用了CSS来设置弹框和关闭按钮的样式。在methods中，我们添加了一个方法`closeDialog`来处理关闭按钮的点击事件，并使用`$emit`来触发`close`事件。在父组件中，我们使用了`v-if`来控制弹框的显示和隐藏，并监听弹框组件的`close`事件，来关闭弹框。

需要注意的是，这个例子中的弹框是在页面中的，如果你想要在小程序中实现全局弹框的功能，可以使用小程序原生的API`wx.showToast()`或`wx.showModal()`来实现。