uni-app app端 nvue 页面无法接收eventStream吗 无法使用renderjs
uni-app app端 nvue 页面无法接收eventStream吗 无法使用renderjs
操作步骤
1、app端,nvue 页面无法接收eventStream 吗
预期结果
1、希望能同h5一样能够接收eventStream 消息
实际结果
1、app nvue页面,接收不了eventStream 消息
bug描述
1、app端,使用nvue页面是为了自定义视频全屏界面的一些功能
2、视频全屏状态下,发起eventStream请求,但是现在请求返回结果是所有流消息一起返回了
3、没办法使用fetch以及const reader = response.data?.getReader();获取
项目 | 信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Mac |
PC开发环境操作系统版本号 | Apple M2;MacOS 14.5 (23F79) |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 4.36 |
手机系统 | Android |
手机系统版本号 | Android 13 |
手机厂商 | OPPO |
手机机型 | OnePlus 8/安卓平板 |
页面类型 | nvue |
vue版本 | vue3 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
前提条件:app,nvue页面请求eventstream无法实现,所以用了另一个页面请求,如下描述:
1、在A.vue 页面使用renderjs 发请求获得eventsteam返回的消息
2、在B.nvue 页面将请求内容通过uni.$emit 发送给 A.vue页面
2.1 A.vue 页面接收之后发起请求,并在获得eventsteam 消息之后,在通过uni.$emit 发回给B.nvue页面
3、然后页面入栈顺序是,A.vue 跳转 B.nvue ,请问这种方式有什么隐患吗?
在uni-app中,nvue页面和传统的vue页面在处理方式和功能上确实存在一些差异。nvue
是基于Weex引擎的原生渲染页面,而传统的vue页面则是基于Webview的渲染方式。eventStream
和renderjs
特性主要针对的是Webview渲染的页面,因此在nvue页面中确实存在一些兼容性问题。
关于eventStream
eventStream
主要用于服务器推送事件(Server-Sent Events, SSE),这在传统的vue页面中是可以使用的,但在nvue页面中,由于渲染机制的不同,可能无法直接使用。如果需要在nvue中实现类似的功能,可以考虑使用WebSocket或者其他长连接技术来实现服务器到客户端的实时数据推送。
以下是一个使用WebSocket的简单示例,可以在nvue页面中使用:
<template>
<div>
<text>{{message}}</text>
</div>
</template>
<script>
export default {
data() {
return {
message: '等待服务器消息...'
};
},
mounted() {
this.ws = new WebSocket('wss://your-server-url');
this.ws.onmessage = (event) => {
this.message = event.data;
};
this.ws.onerror = (error) => {
console.error('WebSocket Error: ', error);
};
this.ws.onclose = () => {
console.log('WebSocket is closed now.');
};
},
beforeDestroy() {
if (this.ws) {
this.ws.close();
}
}
};
</script>
关于renderjs
renderjs
是uni-app提供的一种在vue页面中运行JavaScript代码的方式,主要用于提高页面性能,特别是在处理复杂计算或大量DOM操作时。由于nvue页面是基于原生渲染的,renderjs
在nvue页面中并不适用。
在nvue页面中,如果需要提高性能,可以考虑使用C++或者Java(针对Android)编写原生模块,并通过JSBridge与nvue页面进行通信。
总结
虽然nvue页面在处理一些高级Web特性时存在一些限制,但可以通过其他方式实现类似的功能。例如,使用WebSocket替代eventStream进行实时数据通信,以及通过编写原生模块来提高性能。在开发过程中,根据项目的具体需求和目标平台选择合适的解决方案是关键。