uni-app vue3 使用renderjs打包wgt包后 :change 导致白屏，去掉:change正常。在真机调试和安卓运行均正常。
uni-app vue3 使用renderjs打包wgt包后 :change 导致白屏，去掉:change正常。在真机调试和安卓运行均正常。
示例代码：
<template>
<view id="map-container" :prop="isLocation" :change:prop="mapModule.geolocation" ></view>
</template>
<script>
import { ref, reactive, defineComponent, toRefs, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app'
export default defineComponent({
setup() {
const markers = ref([]);
const state = reactive({
isLocation: false
})
return {
...toRefs(state)
}
}
})
</script>
<script module="mapModule" lang="renderjs">
export default {
data () {
return {
map: null,
}
},
created() {},
methods: {
geolocation(newLocation, oldLocation) {}
}
}
</script>操作步骤：
真机和安卓运行 :change正常显示，打包wgt访问包白屏 去掉 :change打包wgt后才能正常。预期结果：
:change能够操作renderjs层。实际结果：
:change打包wgt白屏bug描述：
vue3 使用renderjs打包wgt包后 :change 导致白屏 去掉:change正常。在真机调试和安卓运行都正常。
| 信息类别 | 详细信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.98 |
| 手机系统 | Android |
| 手机系统版本号 | Android 11 |
| 手机厂商 | 红米 |
| 手机机型 | 9A |
| 页面类型 | vue |
| vue版本 | vue3 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
4 回复
我这边在安卓机上测试并无问题，请检查你的代码是否有误，我贴一下我的测试工程请供参考
<template>
<view>
<view :prop="msg" :change:prop="testRenderjs.onChange" id="renderjs-view">{{msg}}</view>
<button @tap="changeMsgFn">点击修改options旧版版</button>
<button @tap="testRenderjs.emitData">直接调用renderjs中的emitData方法</button>
<button @click="update">更新版本</button>
</view> ownerInstance.callMethod('acceptDataFromRenderjs', {
content: this.content
})
// 或者
/* this.$ownerInstance.callMethod('acceptDataFromRenderjs',{
content:this.content
}) */
// 需要注意的是：只有通过在template中用户手动操作触发renderjs的方法参数是这两个：event, ownerInstance；通过其他方法触发的函数参数不一样
}
}
} </script>
我这边也出现同样问题，报错是找不到renderjs中的方法，测试是发现在nvue中renderjs没有触发生命周期，后面换成vue，问题解决，能正常触发生命周期
在 uni-app 中使用 renderjs 打包 wgt 包后，遇到 :change 导致白屏的问题，可能是由于 renderjs 和 wgt 包在某些环境下的兼容性问题导致的。以下是一些可能的原因和解决方案：
1. 检查 renderjs 的兼容性
renderjs是uni-app提供的一种在webview中运行 JavaScript 的机制，但它可能在某些环境下（尤其是打包成wgt包后）存在兼容性问题。- 确保你使用的
renderjs代码在wgt包中能够正常运行。可以尝试简化renderjs代码，逐步排查问题。
2. 检查 :change 事件的处理
:change事件可能会导致某些状态变化或 DOM 操作，这些操作在wgt包中可能无法正确处理。- 确保
:change事件处理函数中没有可能导致白屏的操作，比如频繁的 DOM 操作、异步操作未正确处理等。
3. 调试 wgt 包
- 在
wgt包中，console.log可能无法正常输出，因此可以使用uni.showToast或uni.showModal来调试代码，查看:change事件是否被触发，以及触发后的状态变化。
4. 使用 v-if 或 v-show 替代 :change
- 如果
:change事件导致白屏，可以尝试使用v-if或v-show来控制组件的显示和隐藏，避免直接使用:change。
5. 检查 wgt 包的打包配置
- 确保
wgt包的打包配置正确，尤其是manifest.json中的配置项。某些配置项可能会影响renderjs的运行。
6. 更新 uni-app 版本
- 如果你使用的是较旧版本的
uni-app，尝试更新到最新版本，可能会修复一些已知的兼容性问题。
7. 真机调试和安卓运行正常
- 由于在真机调试和安卓运行均正常，说明问题可能出在
wgt包的打包过程或运行环境上。可以尝试在不同的设备或模拟器上运行wgt包，看看问题是否依然存在。
8. 使用 uni-app 官方社区或论坛
- 如果以上方法都无法解决问题，可以在
uni-app官方社区或论坛上寻求帮助，可能会有其他开发者遇到过类似的问题。
示例代码
假设你有一个 input 组件，使用了 :change 事件：
<template>
<input :value="value" @change="handleChange" />
</template>
<script>
export default {
data() {
return {
value: ''
};
},
methods: {
handleChange(event) {
this.value = event.target.value;
// 其他操作
}
}
};
</script>如果 :change 导致白屏，可以尝试使用 v-model 替代：
<template>
<input v-model="value" />
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>