当前位置：首页 > uni-app

uniapp 线程

2026-03-04 20:50:34uni-app

uniapp 线程概念

在 uniapp 中，线程通常指代 Web Worker 或小程序的 Worker，用于处理耗时任务以避免阻塞主线程。由于 uniapp 跨平台特性，不同平台对线程的支持存在差异：

H5 端：支持标准的 Web Worker。
微信小程序：支持 Worker 线程（需在 manifest.json 中配置）。
App 端：部分原生能力可通过插件或原生代码实现多线程。

H5 端使用 Web Worker

创建 Worker 文件
在项目根目录创建 workers 文件夹，新增 example.worker.js 文件：

// workers/example.worker.js
self.onmessage = function(e) {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};
function heavyCalculation(data) {
  // 模拟耗时计算
  return data * 2;
}

主线程调用
在 Vue 页面中初始化并通信：

uniapp 线程

const worker = new Worker('/workers/example.worker.js');
worker.postMessage(10); // 发送数据
worker.onmessage = function(e) {
  console.log('结果:', e.data); // 接收结果
};

微信小程序 Worker 配置

配置 Worker 路径
在 manifest.json 中指定 Worker 文件：

{
  "mp-weixin": {
    "workers": "workers"
  }
}

Worker 文件编写
在 workers 目录下创建 example.js：

uniapp 线程

// workers/example.js
worker.onMessage(function(res) {
  worker.postMessage({ value: res.input * 2 });
});

主线程调用

const worker = wx.createWorker('workers/example.js');
worker.postMessage({ input: 10 });
worker.onMessage(function(res) {
  console.log('结果:', res.value);
});

注意事项

路径问题：Worker 文件需放在项目根目录或指定目录，避免路径错误。
平台兼容性：App 端需通过原生插件实现多线程，或使用 setTimeout 分片任务模拟异步。
通信开销：频繁线程通信可能影响性能，建议批量处理数据。

替代方案

对于轻量级异步任务，可使用 Promise 或 setTimeout：

function asyncTask() {
  return new Promise(resolve => {
    setTimeout(() => resolve('完成'), 1000);
  });
}
asyncTask().then(res => console.log(res));

如需复杂计算，考虑使用 uniCloud 云函数将任务移至服务端执行。