qiankun微前端Web Speech API应用实践
项目地址: https://gitcode.com/gh_mirrors/qi/qiankun 引言：为什么需要微前端语音交互？
你是否遇到过这些痛点：在大型前端项目中集成语音识别功能时，因技术栈差异导致的兼容性问题？多团队协作开发时，语音模块的复用与维护成本过高？或者语音交互在单页应用中出现的性能瓶颈？qiankun微前端架构为这些问题提供了优雅的解决方案。本文将带你从零开始，在qiankun框架下构建一个基于Web Speech API的语音交互微应用，读完你将掌握：
- 如何在qiankun中集成Web Speech API
- 主应用与语音微应用的数据通信
- 跨框架语音功能的实现与复用
- 微应用语音交互的性能优化技巧
技术选型与架构设计
技术栈概述
本实践采用以下技术栈：
- 主应用框架：React 18（示例中使用React微应用组件）
- 微应用框架：Vanilla JS（原生JavaScript，最大化兼容性）
- 语音处理：Web Speech API（语音识别与合成）
- 微前端框架：qiankun 2.0+
架构设计图
快速上手：环境搭建
1. 安装qiankun
首先，在主应用中安装qiankun：
$ yarn add qiankun # 或者 npm i qiankun -S
详细安装指南可参考官方文档：docs/guide/getting-started.zh-CN.md
2. 创建语音微应用
我们将创建一个基于原生JavaScript的微应用，以确保最大兼容性。在项目中创建以下目录结构：
examples/
└── speech-app/
├── index.html
├── entry.js
└── package.json
3. 主应用配置
在主应用中注册语音微应用：
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'speech-app',
entry: '//localhost:7105', // 语音微应用的端口
container: '#speech-container',
activeRule: '/speech',
props: {
onSpeechResult: (result) => console.log('语音识别结果:', result),
},
},
]);
start();
更多主应用配置细节可参考：docs/guide/tutorial.zh-CN.md
核心实现：Web Speech API集成
1. 语音识别基础实现
在语音微应用的entry.js中实现基础语音识别功能：
let recognition;
function initSpeechRecognition() {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
alert('您的浏览器不支持Web Speech API');
return null;
}
recognition = new SpeechRecognition();
recognition.lang = 'zh-CN';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
return recognition;
}
// 导出生命周期函数
((global) => {
global['speech-app'] = {
bootstrap: () => {
console.log('speech-app bootstrap');
return Promise.resolve();
},
mount: (props) => {
console.log('speech-app mount', props);
const recognition = initSpeechRecognition();
if (!recognition) return Promise.resolve();
// 绑定语音识别结果事件
recognition.onresult = (event) => {
const result = event.results[0][0].transcript;
props.onSpeechResult(result); // 通过props将结果传递给主应用
};
// 渲染UI
const container = document.querySelector('#speech-container');
container.innerHTML = `
<div class="speech-app">
<button id="start-btn">开始语音识别</button>
<div id="result"></div>
</div>
`;
// 绑定按钮事件
container.querySelector('#start-btn').addEventListener('click', () => {
recognition.start();
});
return Promise.resolve();
},
unmount: () => {
console.log('speech-app unmount');
if (recognition) {
recognition.stop();
}
return Promise.resolve();
},
};
})(window);
2. 微应用打包配置
为确保微应用能被qiankun正确识别，需要配置webpack（如果使用构建工具）：
// webpack.config.js
const packageName = require('./package.json').name;
module.exports = {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
},
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
port: 7105,
},
};
详细的微应用配置可参考：docs/guide/tutorial.zh-CN.md
主应用与微应用通信
1. 基于Props的数据传递
主应用注册微应用时通过props传递数据和回调函数：
// 主应用中
registerMicroApps([
{
name: 'speech-app',
entry: '//localhost:7105',
container: '#speech-container',
activeRule: '/speech',
props: {
onSpeechResult: (result) => {
console.log('主应用收到语音结果:', result);
// 处理语音识别结果
document.querySelector('#main-result').textContent = result;
},
appName: '主应用',
userInfo: { name: '用户' }
},
},
]);
2. 基于GlobalState的状态管理
对于复杂应用，推荐使用qiankun提供的全局状态管理方案：
// 主应用中
import { initGlobalState } from 'qiankun';
// 初始化全局状态
const initialState = {
speechResult: '',
};
const actions = initGlobalState(initialState);
// 监听状态变更
actions.onGlobalStateChange((state, prev) => {
console.log('全局状态变更:', state, prev);
});
// 注册微应用时传递actions
registerMicroApps([
{
name: 'speech-app',
entry: '//localhost:7105',
container: '#speech-container',
activeRule: '/speech',
props: {
actions,
},
},
]);
在微应用中使用全局状态：
// 微应用中
mount: (props) => {
// ...
recognition.onresult = (event) => {
const result = event.results[0][0].transcript;
// 更新全局状态
props.actions.setGlobalState({
speechResult: result
});
};
// ...
}
高级功能：语音合成与命令解析
1. 实现语音合成功能
扩展微应用，添加语音合成功能：
function speak(text) {
const SpeechSynthesis = window.speechSynthesis;
if (!SpeechSynthesis) {
alert('您的浏览器不支持语音合成');
return;
}
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 1;
utterance.pitch = 1;
utterance.volume = 1;
SpeechSynthesis.speak(utterance);
}
// 在mount函数中添加语音合成按钮
container.innerHTML += `
<button id="speak-btn">语音合成</button>
<input type="text" id="speak-text" placeholder="输入要合成的文本">
`;
container.querySelector('#speak-btn').addEventListener('click', () => {
const text = container.querySelector('#speak-text').value;
if (text) speak(text);
});
2. 简单命令解析
实现基于语音的简单命令解析：
// 命令映射表
const commandMap = {
'打开首页': () => {
window.history.pushState({}, '', '/');
// 通知主应用路由变化
props.onRouteChange('/');
},
'打开设置': () => {
window.history.pushState({}, '', '/settings');
props.onRouteChange('/settings');
},
'刷新页面': () => window.location.reload(),
};
// 在语音识别结果处理中添加命令解析
recognition.onresult = (event) => {
const result = event.results[0][0].transcript;
props.onSpeechResult(result);
// 命令解析
const command = Object.keys(commandMap).find(cmd => result.includes(cmd));
if (command) {
commandMap[command]();
speak(`已执行命令: ${command}`);
}
};
性能优化与最佳实践
1. 微应用懒加载与预加载
在主应用中配置微应用的预加载策略：
// 主应用中
registerMicroApps([
{
name: 'speech-app',
entry: '//localhost:7105',
container: '#speech-container',
activeRule: '/speech',
props: {
onSpeechResult: (result) => console.log(result),
},
},
]);
// 预加载speech-app微应用
start({
prefetch: ['speech-app'], // 预加载指定微应用
});
2. 资源加载优化
对于纯静态微应用，可参考qiankun的非webpack构建应用接入方式：
<!-- 微应用index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语音交互微应用</title>
</head>
<body>
<div id="speech-container"></div>
<script src="./entry.js" entry></script>
</body>
</html>
详细实现可参考：examples/purehtml
3. 错误处理与边界情况
增强代码健壮性，添加错误处理：
// 语音识别错误处理
recognition.onerror = (event) => {
console.error('语音识别错误:', event.error);
if (event.error === 'not-allowed') {
alert('需要麦克风权限，请在浏览器设置中开启');
}
};
// 语音识别结束处理
recognition.onend = () => {
console.log('语音识别结束');
// 可在这里实现自动重新开始识别
// recognition.start();
};
总结与展望
通过本文的实践，我们成功构建了一个基于qiankun微前端框架的Web Speech API应用，实现了语音识别、语音合成以及简单的命令解析功能。主要收获包括：
- 掌握了qiankun微应用的创建与注册方法
- 实现了主应用与微应用之间的数据通信
- 集成Web Speech API实现语音交互功能
- 学习了微前端应用的性能优化技巧
未来可以进一步探索：
- 更复杂的语音命令系统与自然语言处理
- 语音微应用的多语言支持
- 结合AI模型实现更智能的语音交互
- 微应用间的语音数据共享与协同
完整的代码示例可参考项目中的examples目录：examples/，更多关于qiankun的使用细节请查阅官方文档：docs/guide/。
希望本文能帮助你在微前端项目中更好地集成语音交互功能，为用户提供更自然、更便捷的操作体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
