HarmonyOS 鸿蒙Next ets页面主线程的workerInstance.onmessage回调函数如何与页面进行渲染

HarmonyOS 鸿蒙Next ets页面主线程的workerInstance.onmessage回调函数如何与页面进行渲染 如题，在 ets 页面中，创建了一个 worker，且 onmessage 也收到了子线程 worker 的消息，如何在 onmessage 回调函数中进行页面渲染

例如：

// 主线程接收 worker 线程信息
workerInstance.onmessage = function(e) {
    // data：worker 线程发送的信息
    let data = e.data;
    console.log("main thread onmessage")
    // data 数据如何渲染在页面上，在此回调上的 this 是不生效的
};

更多关于HarmonyOS 鸿蒙Next ets页面主线程的workerInstance.onmessage回调函数如何与页面进行渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

把function改成箭头函数就行了

更多关于HarmonyOS 鸿蒙Next ets页面主线程的workerInstance.onmessage回调函数如何与页面进行渲染的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这里牵涉到一个function(msg)和 (msg)=>语法糖区别，this作用域的问题。

@Entry @Component struct MainPage{ @State currentPage: number = 2;//设置默认高亮的标签，这里是大利市按钮显示蓝色高亮 @State state:number=0; private tabController: TabsController = new TabsController(); }

aboutToDisappear() { Logger.info(${TAG} aboutToDisappear) }

onStateChanged(){ //this.tabController.changeIndex(this.currentPage);//返回之前页面 switch (this.state) { case TQComm.SOCK_CONN_SUCCEED: globalThis.connectListener.connSuccessed(); Logger.info(${TAG} connSuccessed); break; case TQComm.SOCK_LOGON_SUCCEED: globalThis.connectListener.IOStarted(); this.tabController.changeIndex(this.currentPage) break; case TQComm.SOCK_CONN_FAIL: globalThis.connectListener.connFailed(); Logger.info(${TAG} connFailed); break; case TQComm.SOCK_LOGON_FAIL: globalThis.connectListener.logonFailed(); Logger.info(${TAG} SOCK_LOGON_FAIL); break; } }

aboutToAppear() { this.onStateChanged=this.onStateChanged.bind(this); workerInstance.onmessage = (msg) => { // data：Worker线程发送的信息 if(msg && msg.data) { let data = msg.data; Logger.info(${TAG} aboutToAppear workerInstance onmessage ${JSON.stringify(data)}); this.state = data.value this.onStateChanged(); } } let tid = process.tid; Logger.info(${TAG} MainPage aboutToAppear process id:${tid}) // 向Worker子线程发送消息 workerInstance.postMessage({ ‘type’: DataConstants.WORKER_ACTION_INIT, ‘message’:‘init_data’});

}

build(){

}


经测试这个写法可以。

关注，求好的方法

我觉得可以试试用全局状态 AppStorage 来实现

AppStorage可以存储数据，但是怎么用于页面刷新呢，

用注解 @StorageProp()，例如你在页面里面定义一个变量 ： @StorageProp('msg') receivedMsg: string = '' 然后再页面中使用 this.receivedMsg 作为值传递给某个组件，就像 @State 标注的变量一样。在 onmessage 里面使用如：AppStorage.SetOrCreate('msg', strData)，这样 strData 就会更新到页面的组件中了。

也对，总觉得还有更好的方法，毕竟 onmessage 的执行和 UI 线程是同一个线程了，可以立马做出反应，而不用这样异步操作一样，有种隔靴搔痒的感觉。

在HarmonyOS（鸿蒙Next）中，ets页面的主线程通过workerInstance.onmessage回调函数接收来自Worker线程的消息，并将其用于页面渲染。onmessage回调函数会在Worker线程向主线程发送消息时触发。消息内容可以通过event.data获取，主线程可以根据消息内容更新页面数据。

在ets页面中，通常使用@State或@Link装饰器来声明响应式数据。当onmessage回调函数接收到消息后，可以直接更新这些响应式数据。由于@State和@Link装饰器会自动触发页面重新渲染，因此无需手动调用渲染方法。

示例代码如下：

// 主线程代码
import worker from '@ohos.worker';

// 创建Worker实例
let workerInstance = new worker.ThreadWorker("workers/worker.js");

// 监听Worker消息
workerInstance.onmessage = function(event) {
  // 更新页面数据
  this.messageFromWorker = event.data;
}

// 页面渲染部分
@Entry
@Component
struct MyComponent {
  @State messageFromWorker: string = "";

  build() {
    Column() {
      Text(this.messageFromWorker)
        .fontSize(20)
        .margin(10)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在Worker线程中，可以通过postMessage方法向主线程发送消息：

// Worker线程代码
import worker from '@ohos.worker';

// 获取Worker实例
let workerPort = worker.workerPort;

// 向主线程发送消息
workerPort.postMessage("Hello from Worker");
回到顶部