uni-app 微信小程序使用uni-popup-dialog报错

uni-app 微信小程序使用uni-popup-dialog报错

示例代码：

<uni-popup ref="perm" type="dialog">
<uni-popup-dialog mode="base" title="提示" :content="未给与相机权限"
confirmText="前往设置" @close="permCancel" :cancelText="取消" @confirm="permConfirm">
</uni-popup-dialog>
</uni-popup>

操作步骤：

代码里面引用该组件

预期结果：

控制台不会出现错误提示

实际结果：

微信小程序控制台报错

bug描述：

使用了uni-popup-dialog组件，微信开发工具控制台报错，找到代码地方，打印结果为undefined，百分百复现

image

信息 值
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.15
第三方开发者工具版本号 1.06.2402040
基础库版本号 3.4.2
项目创建方式 HBuilderX

更多关于uni-app 微信小程序使用uni-popup-dialog报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

照你的例子试了，写成组件，显示正常，你先排查下多语言，先改成字符串看报错不，附件有代码


更多关于uni-app 微信小程序使用uni-popup-dialog报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我先测试你的方案发现仍然报错，然后我尝试把组件换个地方，就不报错了，是什么原因？截图贴在下面

改一下 属性 content cancelText <template>
<view>
<uni-popup ref="perm" type="dialog">
<uni-popup-dialog mode=“base” title=“提示” content=“未给与相机权限” confirmText=“前往设置” @close=“permCancel”
cancelText=“取消” @confirm=“permConfirm”>
</uni-popup-dialog>
</uni-popup>
<button @click=“btn”>button</button>
</view>
</template>

<script> export default { methods: { btn() { this.$refs.perm.open() }, permCancel(){ }, permConfirm(){ } } } </script> <style lang="scss"> </style>

我用的国际化，我把国际化代码删了，用的中文方便看，你的uni-popup-dialog组件是最新版本吗？微信开发工具、基础库版本和hbuilderx版本都和我一样吗？我只要使用就报错

回复 宇林: 是的，你可以新建个项目，用这个页面试试

回复 宇林: 回复 喜欢技术的前端: 新建项目引用确实没问题，老哥帮忙看一下，我写的页面有没有问题，代码贴在下面

回复 喜欢技术的前端: 下面是一个组件，我在首页引用，然后运行到小程序就报错，不知道哪里有问题。。

<template> <view> <uni-popup ref="perm" type="dialog"> <uni-popup-dialog mode="base" :title="$t('lang.public.text_07')" :content="permissionText" :confirmText="confirmText" @close="permCancel" :cancelText="cancelText" @confirm="permConfirm"> </uni-popup-dialog> </uni-popup> </view> </template> <script> const app = getApp(); export default { emits: ['permOk'], data() { return { permissionText: '', confirmText: this.$t('lang.perm.text_03'), cancelText: this.$t('lang.public.text_05') } }, methods: { // 确认 permConfirm() { uni.openAppAuthorizeSetting({ success() { app.globalData.openSetting = true; }, fail(res) { console.log('打开系统设置失败', res) } }) }, // 取消 permCancel() { this.$refs.perm.close() }, // 判断相机和相册权限 checkCameraAndAlbumPerm() { let isIos = uni.getSystemInfoSync().platform == 'ios'; if (isIos) { var album = plus.ios.import("PHPhotoLibrary"), camera = plus.ios.import("AVCaptureDevice"), authA = album.authorizationStatus(), authC = camera.authorizationStatusForMediaType('vide'); console.log('ios权限获取情况：', '相册：', authA, '相机：', authC) plus.ios.deleteObject(album); plus.ios.deleteObject(camera); if (authC != 0 && authC != 3) { this.permissionText = this.$t('lang.perm.text_01'); this.cancelText = this.$t('lang.public.text_05'); this.$refs.perm.open() } else if (authA != 0 && authA != 3) { this.permissionText = this.$t('lang.perm.text_02'); this.cancelText = this.$t('lang.perm.text_04'); this.$refs.perm.open() } else { this.$emit('permOk') } } else { const perms = ['android.permission.CAMERA', 'android.permission.READ_EXTERNAL_STORAGE']; this.requestAndroidPermission(perms).then(resp => { var camera, album; for (var i = 0; i < perms.length; i++) { if (perms[0] === resp[i].name) { camera = resp[i].value; } if (perms[1] === resp[i].name) { album = resp[i].value; } } console.log('安卓权限获取情况：', '相册：', album, '相机：', camera) if (camera != 3) { this.permissionText = this.$t('lang.perm.text_01'); this.cancelText = this.$t('lang.public.text_05'); this.$refs.perm.open() } else if (album != 3) { this.permissionText = this.$t('lang.perm.text_02'); this.cancelText = this.$t('lang.perm.text_04'); this.$refs.perm.open() } else { this.$emit('permOk') } }) } }, // Android权限查询 requestAndroidPermission(permissionIDs) { return new Promise((resolve, reject) => { plus.android.requestPermissions( permissionIDs, function(obj) { var result = []; for (var i = 0; i < obj.granted.length; i++) { result.push({ name: obj.granted[i], value: 3 }) } for (var i = 0; i < obj.deniedPresent.length; i++) { result.push({ name: obj.deniedPresent[i], value: -1 }) } for (var i = 0; i < obj.deniedAlways.length; i++) { result.push({ name: obj.deniedAlways[i], value: -2 }) } resolve(result) }, function(error) { console.log('申请权限错误：' + error.code + " = " + error.message); resolve({ code: error.code, message: error.message }) } ) }) }, // 提示或等待 showLoadOrToast(title, type = 0, time = 1500) { switch (type) { case 0: uni.showToast({ title: title, icon: 'none', duration: time }) break; case 1: uni.showLoading({ title: title, mask: true }) break; } } } } </script> <style> </style><br>

原本组件放在component里面，引用就报错，然后换到index页面同级目录就不报错了

在使用 uni-popup-dialog 时，可能会遇到一些报错。以下是一些常见问题及其解决方法：

1. 报错：uni-popup-dialog 未定义或未找到

  • 原因：可能是未正确引入 uni-popup-dialog 组件。

  • 解决方法： 确保在页面的 components 中正确引入了 uni-popup-dialog 组件。

    import uniPopupDialog from '@/components/uni-popup-dialog/uni-popup-dialog.vue';

export default {
  components: {
    uniPopupDialog
  }
}

2. 报错：uni-popup-dialog 样式不正确

  • 原因：可能是样式未正确加载或覆盖。

  • 解决方法： 确保在页面的 <style> 标签中引入了 uni-popup-dialog 的样式文件。

    @import '@/components/uni-popup-dialog/uni-popup-dialog.css';

3. 报错：uni-popup-dialog 无法打开或关闭

  • 原因：可能是组件的 ref 未正确绑定或方法调用不正确。

  • 解决方法： 确保在模板中正确绑定了 ref，并在方法中正确调用 open 和 close 方法。

    <uni-popup-dialog ref="popupDialog"></uni-popup-dialog>

    methods: {
  openDialog() {
    this.$refs.popupDialog.open();
  },
  closeDialog() {
    this.$refs.popupDialog.close();
  }
}

4. 报错：uni-popup-dialog 内容未显示

  • 原因：可能是 slot 未正确使用或内容未正确传递。

  • 解决方法： 确保在 uni-popup-dialog 组件内部正确使用了 slot。

    <uni-popup-dialog ref="popupDialog">
  <view>这是对话框的内容</view>
</uni-popup-dialog>

5. 报错：uni-popup-dialog 事件未触发

  • 原因：可能是事件监听未正确绑定。

  • 解决方法： 确保在 uni-popup-dialog 组件上正确绑定了事件监听器。

    <uni-popup-dialog ref="popupDialog" @confirm="onConfirm" @cancel="onCancel"></uni-popup-dialog>

    methods: {
  onConfirm() {
    console.log('确认按钮被点击');
  },
  onCancel() {
    console.log('取消按钮被点击');
  }
}

6. 报错：uni-popup-dialog 与微信小程序原生组件冲突

  • 原因：可能是 uni-popup-dialog 与微信小程序原生组件（如 picker、modal 等）的层级或样式冲突。

  • 解决方法： 可以尝试调整 uni-popup-dialog 的 z-index 或使用 uni-popup 的其他子组件（如 uni-popup-message）来替代。

    .uni-popup-dialog {
  z-index: 9999;
}

7. 报错：uni-popup-dialog 在真机上无法显示

  • 原因：可能是真机环境与开发环境不同，导致样式或逻辑问题。
  • 解决方法： 确保在真机上测试时，样式和逻辑都能正常工作。可以尝试使用 uni-app 提供的 uni.showModal 或 uni.showToast 等原生 API 来替代 uni-popup-dialog。

8. 报错：uni-popup-dialog 与某些插件冲突

  • 原因：可能是 uni-popup-dialog 与其他插件（如 uView、vant 等）的样式或逻辑冲突。
  • 解决方法： 尝试禁用或调整其他插件的使用，或者使用 uni-popup 的其他子组件来替代 uni-popup-dialog。

9. 报错：uni-popup-dialog 在 H5 或 App 端无法使用

  • 原因：uni-popup-dialog 可能在某些平台（如 H5 或 App）上不支持或表现不一致。

  • 解决方法： 确保在 pages.json 中正确配置了平台差异，或者使用 uni.showModal 等原生 API 来替代。

    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "app-plus": {
          "titleNView": false
        }
      }
    }
  ]
}
回到顶部