uni-app开发Vu3打包wgt安卓运行出现change:prop直接白屏问题

开发环境	版本号	项目创建方式
Windows	10	HBuilderX

示例代码：

<template>  
    <view id="map-container"  
        :prop="isLocation"  
        :change:prop="mapModule.geolocation"  
    >  

    </view>  
</template>  

<script>  
import { onMounted, ref, reactive, defineComponent, toRefs, watch } from 'vue';  
export default defineComponent({  
    setup() {  
        const state = reactive({  
            isLocation: false  
        })  
        onMounted(() => {  
            setTimeout(() => (state.isLocation = true), 2000)  
        })  
        function showToast(data) {  
            uni.showToast({  
                title: data,  
                icon: 'none'  
            })  
        }  
        return {  
            ...toRefs(state),  
            showToast  
        }  
    }  
})  
</script>  
<script module="mapModule" lang="renderjs">  
    export default {  
        data () {  
            return {  
                map: null  
            }  
        },  
        methods: {  
            geolocation(newLocation, oldLocation) {  
                const that = this;  
                that.$ownerInstance && that.$ownerInstance.callMethod("showToast", '进入了')  
            }  
        }  
    }  
</script>

这样运行直接白屏

<template>  
    <view>  
        <view @click="mapModule.geolocation">  
            点击通讯  
        </view>  
        <view id="map-container" :prop="isLocation" > </view>  
    </view>  

</template>  

<script>  
import { onMounted, ref, reactive, defineComponent, toRefs, watch } from 'vue';  
export default defineComponent({  
    setup() {  
        const state = reactive({  
            isLocation: false  
        })  
        onMounted(() => {  
            setTimeout(() => (state.isLocation = true), 2000)  
        })  
        function showToast(data) {  
            uni.showToast({  
                title: data,  
                icon: 'none'  
            })  
        }  
        return {  
            ...toRefs(state),  
            showToast  
        }  
    }  
})  
</script>  
<script module="mapModule" lang="renderjs">  
    export default {  
        data () {  
            return {  
                map: null  
            }  
        },  
        methods: {  
            geolocation(newLocation, oldLocation) {  
                const that = this;  
                that.$ownerInstance && that.$ownerInstance.callMethod("showToast", '进入了')  
            }  
        }  
    }  
</script>

这样就可以

操作步骤：

<view id="map-container" :prop="isLocation" :change:prop="mapModule.geolocation"></view>

预期结果：

<view id="map-container" :prop="isLocation" :change:prop="mapModule.geolocation">能够正常渲染</view>

更多关于uni-app开发Vu3打包wgt安卓运行出现change:prop直接白屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 1楼

更多关于uni-app开发Vu3打包wgt安卓运行出现change:prop直接白屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在使用 uni-app 开发 Vue 3 项目时，打包成 .wgt 文件并在安卓设备上运行时，出现白屏问题，并且控制台报错 change:prop，这通常是由于 Vue 3 的响应式系统与 uni-app 的运行时环境不兼容或配置不当导致的。以下是一些可能的解决方案和排查步骤：

1. 检查 Vue 3 和 uni-app 的版本兼容性

确保你使用的 uni-app 版本支持 Vue 3。uni-app 从 3.0.0 版本开始支持 Vue 3，但需要正确配置。

检查 package.json 中的依赖版本：

"dependencies": {
  "vue": "^3.0.0",
  "uni-app": "^3.0.0"
}

如果版本不匹配，升级或降级相关依赖。

2. 检查 Vue 3 的响应式系统

Vue 3 的响应式系统与 Vue 2 有较大差异，某些写法可能导致 uni-app 无法正确处理。

确保在 setup 函数中正确使用 ref 和 reactive。
避免在模板中直接使用未定义的响应式变量。

例如：

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, uni-app!');
    return {
      message
    };
  }
};

3. 检查 uni-app 的配置

确保 manifest.json 和 pages.json 配置正确。

在 manifest.json 中，确保 vueVersion 设置为 3：
```
{
  "vueVersion": "3"
}
```
在 pages.json 中，确保页面路径和组件配置正确。

4. 排查白屏问题

白屏通常是由于以下原因：

页面组件未正确加载。
路由配置错误。
代码中存在未捕获的异常。
打开浏览器的开发者工具（或安卓设备的调试工具），检查控制台是否有报错。
如果报错信息中包含 change:prop，可能是某个组件的 props 未正确传递或处理。

5. 尝试禁用 Vue 3 的某些特性

如果问题仍然存在，可以尝试禁用 Vue 3 的某些特性，例如 Composition API，改用 Options API 编写代码，看看问题是否解决。

6. 更新 uni-app 和 HBuilderX

确保你使用的是最新版本的 uni-app 和 HBuilderX。旧版本可能存在兼容性问题。

更新 uni-app：

npm install uni-app[@latest](/user/latest)