uni-app nvue界面使用map组件时 路由进入概率性卡住灰屏 无法操作只能杀进程

uni-app nvue界面使用map组件时 路由进入概率性卡住灰屏 无法操作只能杀进程

开发环境 版本号 项目创建方式
Windows 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：3.0.7

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：vivo

手机机型：iqoo855

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<template>  
    <view class="pages">  
        <map class="map" :show-location="true" :latitude="lat" :longitude="lon" ></map>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                lat:0,  
                lon:0  
            }  
        },  
        onShow() {  
            console.log('???')  
            const _this=this  
            uni.getLocation({  
                type:'gcj02',  
                success:(res)=> {  
                    console.log(res)  
                    _this.lat=res.latitude,  
                    _this.lon=res.longitude  
                },  
                fail:(err)=>{  
                    console.log(err)  
                }  
            })  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .pages{  
        width: 750rpx;  
        flex: 1;  
    }  
.map{  
    width: 750rpx;  
    flex: 1;  
}  
</style>

更多关于uni-app nvue界面使用map组件时 路由进入概率性卡住灰屏 无法操作只能杀进程的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

在卡住的界面等待5分钟左右会提示 uniapp出错然后进程自杀

更多关于uni-app nvue界面使用map组件时 路由进入概率性卡住灰屏 无法操作只能杀进程的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用示例代码hello uni-app能出现你的问题吗？

可以 甚至不用示例代码 你直接新建一个nvue页面 然后里面放个地图 从首页路由进去 多试试 肯定会卡住几次。。。

生命周期事件啥的都会正常触发 但map组件的渲染完毕update事件没有触发 正常地图加载完会触发 卡住时没有任何报错 就是灰屏 然后卡住 界面不可点击 手机返回也不行 只能结束进程 如果放在这个界面不管他 大约4-5分钟后 会弹出个框提示uniapp错误 然后就闪退了。。 只可能是在地图组件加载时挂了 测试了几个手机 都会出现这种问题

是不准备修了吗。。。。刚才测试了一下 dcloud封装的uni.chooseLocation方法 调用时都有几率卡住 因为这个方法也是打开了新页面加载了map组件 、

这个页面不停的重启APP 然后打开openLocation方法打开选择位置 就会卡住 map组件加载时候的问题

视频来了

这个卡屏问题好像又出现了， 最近打的几个包页面在跳转地图页的时候， 部分手机偶尔会出现这个情况

这是一个已知的nvue页面中map组件的兼容性问题。主要原因是map组件在Android平台上需要较长的初始化时间，而路由切换时如果map未完成初始化就容易导致卡屏。

建议尝试以下解决方案：

  1. 在页面onLoad时先获取定位数据，等数据准备好后再渲染map组件：
<map v-if="mapReady" class="map" :show-location="true" :latitude="lat" :longitude="lon"></map>

data() {
  return {
    mapReady: false
  }
},
onLoad() {
  uni.getLocation({
    success: (res) => {
      this.lat = res.latitude
      this.lon = res.longitude
      this.mapReady = true
    }
  })
}

  1. 或者改用vue页面而非nvue页面，vue页面的map组件稳定性更好。

  2. 也可以尝试在manifest.json中配置延迟加载：

"app-plus": {
  "nvue": {
    "lazyLoad": true
  }
}
回到顶部