注册登录

小小菜76055421

发布：2023-03-10 09:36
更新：2023-05-29 22:32
阅读：608

【报Bug】宽屏适配，rightWindow中引入页面，如果vuex中存在uni.getStorageSync()，则引入会报错

分类：uni-app

bug已确认

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows10

HBuilderX类型：正式

HBuilderX版本号： 3.7.6

浏览器平台： Chrome

浏览器版本： 97.0.4692.99

项目创建方式： HBuilderX

操作步骤：

<view>  
    <news-detail ref="detail"></news-detail >  
</view>  
import newsDetail from '@/pages/news/newsDetail.vue'  
components:{  
    newsDetail  
},  
// pages.json  
"rightWindow":{  
        "path": "responsive/right-window.vue",  
        "style": {  
             "width": "calc(100vw - 450px)"  
        },  
        "matchMedia": {  
          "minWidth": 768  
        }  

},

预期结果：

页面组件正常显示

实际结果：

项目运行报错：uni is not defined

bug描述：

uniapp的vue3.0版本，web端实现宽屏适配，rightWindow中引入页面，如果vuex中存在uni.getStorageSync等缓存相关的api，则引入页面时会报错uni is not defined，去掉缓存的api，则正常引入。

2023-03-10 09:36 负责人:YUANRJ 分享

10 个回复

小小菜76055421 (作者)

用你们官方的demo，复现了这个bug

news.zip

小小菜76055421 (作者)

官方的大佬，没人关注吗

小小菜76055421 (作者)

官方在哪里啊

DCloud_UNI_GSQ

来了，问题确认已加分，后续会优化

临时方案，使用 script setup 与动态 import：

<script setup>  
import('xxx')  
uni.xxx  
</script>

小小菜76055421 (作者)

是把哪个test.js文件动态导入在setup中吗

2023-03-20 19:20
YUANRJ

回复小小菜76055421: 是的，或者异步导入组件也可以

2023-03-20 19:35
小小菜76055421 (作者)

回复 YUANRJ: 加了之后，在rightWidow页面中，拿不到引入的组件的实例，或者实例为空，所以组件中的load方法也拿不到

2023-03-20 19:51
小小菜76055421 (作者)

回复 YUANRJ: 拿不到rightwindow中组件的实例

2023-03-20 20:07

DCloud_UNI_GSQ

“拿”法需要变通，用了setup你就上了组合式API的船了

<script setup>  
import { onMounted, getCurrentInstance } from 'vue'  
import('./test')  
console.log('left-window script setup')  
onMounted(() => {  
  // console.log('left-window mounted')  
  uni.getSystemInfo({  
    success: function (res) {  
      console.log(res)  
    }  
  })  
  // console.log(getCurrentInstance().refs.detail)  
  console.log(getCurrentInstance().proxy.$refs.detail)  
})  

</script>

小小菜76055421 (作者)

<template>  

    <view>  

        <newDetail ref="detailPage"></newDetail>  

    </view>  

</template>  

 <script setup>  

    import {onMounted,ref,defineAsyncComponent,getCurrentInstance  } from 'vue'  

    const detailPage = ref(null)  

    const {proxy}=getCurrentInstance()  

    onMounted(()=>{  

        console.log(detailPage.value)  

        uni.$on('updateDetail', (e) => {  

            console.log('xxx',e)  

            // 执行 /pages/news/detail.nvue页面的load方法  

            // this.$refs.detailPage.load(e.detail);  

            // detailPage.load(e.detail);  

            proxy.$refs.detailPage.load(e.detail);  

        })  

    })  

    // const newDetail = defineAsyncComponent({  

    //   loader: () => import('../pages/news/detail.nvue')  

    // })  

</script>

2023-03-20 20:43

小小菜76055421 (作者)

不是这样子么，不论是把this替换成proxy，还是异步组件导入，获取组件的实例时，都会报错

2023-03-20 20:45
DCloud_UNI_GSQ

回复小小菜76055421: 是获取组件实例报错，还是执行实例上的方法报错？具体的报错贴一下

2023-03-20 20:54
小小菜76055421 (作者)

回复 DCloud_UNI_GSQ: proxy.$refs里面没有组件的实例

2023-03-20 20:58
DCloud_UNI_GSQ

回复小小菜76055421: 你这个newDetail是异步组件吧

2023-03-20 21:20
小小菜76055421 (作者)

回复 DCloud_UNI_GSQ: 不是，是正常引入的，异步组件相关的注释了

2023-03-20 21:22

小小菜76055421 (作者)

报错截图

DCloud_UNI_GSQ

如果你使用的组件是异步组件，可以这样：

<template>  
  <view>  
    left-window  
    <custom-view :ref="componentReady">view</custom-view>  
  </view>  
</template>  

<script setup>  
import { onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'  
// import customView from './custom-view.vue'  
const customView = defineAsyncComponent(() => import('./custom-view.vue'))  
import('./test')  
onMounted(() => {  
  console.log('left-window mounted')  
  uni.getSystemInfo({  
    success: function (res) {  
      console.log(res)  
    }  
  })  
})  
function componentReady (detail) {  
  console.log(detail.load)  
}  
</script>

小小菜76055421 (作者)

你这种写法，console.log(detail.load) 也是空的，跟我写的打印出来是一样的

2023-03-20 21:25
DCloud_UNI_GSQ

回复小小菜76055421: 我这打印的正常，难道你这个detail组件是用的组合式API吗？如果是的话需要显式暴露一下。

2023-03-21 10:58
小小菜76055421 (作者)

回复 DCloud_UNI_GSQ: 不是的，你能不能把我上传的那个demo改下，我一直用这个demo测试的

2023-03-21 11:20
DCloud_UNI_GSQ

回复小小菜76055421: 好的，你这个我看了一下比我预期的使用场景更简单一些。

2023-03-21 15:01

DCloud_UNI_GSQ

<template>  
    <view>  
        <newDetail ref="detailPage"></newDetail>  
    </view>  
</template>  

<script>  
    import { defineAsyncComponent } from 'vue'  
    // import newDetail from '../pages/news/detail.nvue'  
    const newDetail = defineAsyncComponent(() => import('../pages/news/detail.nvue'))  
    export default {  
        components:{  
            newDetail  
        },  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        created(e) {  
            //监听自定义事件，该事件由详情页列表的点击触发  
            uni.$on('updateDetail', (e) => {  
                console.log('xxx')  
                // 执行 /pages/news/detail.nvue页面的load方法  
                this.$refs.detailPage.load(e.detail);  
            })  
        }  
    }  
</script>  

<style>  
</style>

小小菜76055421 (作者)

这个js文件是这么引入的吗？按照你的写法，还是会报错

 <script setup>    

    // import test from '../../common/test'  

    import('../../common/test')   

</script>

2023-03-21 17:56

小小菜76055421 (作者)

detailPage组件的实例为空，里面不存在load方法

2023-03-21 17:58
小小菜76055421 (作者)

是哪里写错了吗？怎么我获取到的组件实例里面都是空的

2023-03-22 09:53
DCloud_UNI_GSQ

回复小小菜76055421: 不是让我帮你改demo吗？只改了这一个文件。

2023-03-22 17:30
小小菜76055421 (作者)

回复 DCloud_UNI_GSQ: 按你这个该，也是一样的报错，我意思是你把整个demo按你解决的方案改了，然后运行看会不会报错，我按照你这样的改，也会报错

2023-03-22 17:39

DCloud_UNI_GSQ

我这没报错，你试一下：附件

news_2.zip

小小菜76055421 (作者)

好了，我以为引起报错的那个test文件也要动态导入

2023-03-22 18:47
小小菜76055421 (作者)

大佬，我看了uniapp的demo，那个leftwindow页面的mounted函数每次pc和移动端切换时，都会触发，但我的项目中，切换时，没触发，是啥原因啊

2023-03-31 15:33

z***@163.com

你好，我遇到了同样的问题，请问test.js文件内容是什么？

要回复问题请先登录或注册

【报Bug】宽屏适配，rightWindow中引入页面，如果vuex中存在uni.getStorageSync()，则引入会报错

预期结果：

页面组件正常显示

实际结果：

项目运行报错：uni is not defined

bug描述：

10 个回复

公告

相关问题

【报Bug】宽屏适配，rightWindow中引入页面，如果vuex中存在uni.getStorageSync()，则引入会报错

预期结果： 页面组件正常显示

实际结果： 项目运行报错：uni is not defined

bug描述：

与内容相关的链接

10 个回复

公告

相关问题

预期结果：

页面组件正常显示

实际结果：

项目运行报错：uni is not defined