uniapp uni-popup组件在微信小程序中如何使用

在微信小程序中使用uniapp的uni-popup组件时，点击按钮无法正常弹出弹窗，控制台也没有报错信息。按照官方文档引入了组件并配置了基础属性，但弹窗始终不显示。请问该如何正确配置？是否需要额外的微信小程序权限或特殊设置？

2 回复

在uni-app中使用uni-popup组件，需先引入组件，然后在template中使用<uni-popup ref="popup">，通过this.$refs.popup.open()打开弹窗。支持多种类型如center、bottom等。记得在微信小程序中配置usingComponents。


在微信小程序中使用 uni-popup 组件，需通过以下步骤实现：

  1. 引入组件： 在页面的 json 文件中注册 uni-popup 组件：

    {
  "usingComponents": {
    "uni-popup": "/components/uni-popup/uni-popup"
  }
}

  2. 模板中使用： 在页面的 wxml 文件中添加组件，并通过 ref 引用：

    <uni-popup ref="popup" type="center">
  <view>这里是弹窗内容</view>
</uni-popup>
<button [@tap](/user/tap)="openPopup">打开弹窗</button>

  3. 控制显示/隐藏： 在页面的 js 文件中调用组件方法：

    export default {
  methods: {
    openPopup() {
      this.$refs.popup.open(); // 打开弹窗
    },
    closePopup() {
      this.$refs.popup.close(); // 关闭弹窗
    }
  }
}

参数说明：

  • type：弹窗类型，支持 center（居中）、bottom（底部）、top（顶部）、message（消息提示）。
  • 可通过 custom 属性自定义样式。

注意事项：

  • 确保 uni-popup 组件路径正确（HBuilderX 创建的项目通常位于 /components/uni-popup/）。
  • 微信小程序中需在 app.json 中启用 usingComponents（若全局注册）。

以上步骤即可在微信小程序中正常使用 uni-popup 组件。

回到顶部