uniapp微信小程序弹窗如何在右上角添加关闭icon

在uniapp微信小程序中，可以使用uni-ui组件库中提供的弹窗组件来实现弹窗右上角添加关闭icon的效果。

首先，在需要使用弹窗的页面中引入uni-ui组件，具体步骤为在pages.json文件中添加如下代码：

"easycom": {
  "autoscan": true,
  "custom": {
    "^@dcloudio/uni-ui": "@/uni-ui"  
  }
}

然后，在需要使用弹窗的页面中引入弹窗组件，具体步骤为在页面的vue文件中添加如下代码：

<template>
  <view>
    <uni-popup :show="showPopup" :position="position">
      <view>这是弹窗内容</view>
      <view class="close-icon" @click="closePopup">关闭</view>
    </uni-popup>
  </view>
</template>

<script>
  import { uniPopup } from '@dcloudio/uni-ui';
  
  export default {
    components: {
      uniPopup
    },
    data() {
      return {
        showPopup: false,
        position: 'center'
      };
    },
    methods: {
      openPopup() {
        this.showPopup = true; // 打开弹窗
      },
      closePopup() {
        this.showPopup = false; // 关闭弹窗
      }
    }
  }
</script>

<style>
  .close-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px; 
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    cursor: pointer;
    z-index: 3;
  }
</style>

以上代码中，通过引入uniPopup组件，并使用show属性来控制弹窗的显示与隐藏。通过添加close-icon类及相应的样式，实现右上角的关闭icon，并通过绑定closePopup方法来关闭弹窗。

最后，在需要显示弹窗的事件中，调用openPopup方法来打开弹窗，即可在右上角看到带有关闭icon的弹窗。