核心是通过抽象接口、运行时注入和工厂模式实现跨平台：定义Toast/Storage/Router等平台无关接口，各平台提供具体实现并由工厂注册，启动时注入全局上下文，组件无感调用，支持动态切换与灰度验证。
核心是把平台相关逻辑从组件内部剥离，让组件只声明“需要什么能力”，不关心“这个能力在哪实现”。跨平台不是靠条件编译硬切，而是靠统一接口 + 运行时注入 + 工厂组装。
定义平台无关的抽象接口
不要让 Button 组件里写 if (isMiniProgram) wx.showToast() else alert()。先抽离行为契约：
-
ToastService：含
show(message: string): Promise -
StorageService：含
get(key: string): Promise和set(key: string, value: string): Promise -
RouterService：含
push(path: string, params?: Record): Promise
所有组件只依赖这些接口，不 import 任何平台 SDK。
按平台实现并集中注册工厂
在 platforms/ 目录下分环境提供具体实现：
-
h5/toast.ts：用document.createElement('div')渲染浮层 -
mp-weixin/toast.ts：封装wx.showToast并适配 Promise -
mp-alipay/toast.ts：调用my.showToast
再通过工厂函数收口：
const createToastService = (platform: 'h5' | 'mp-weixin' | 'mp-alipay') => {
switch (platform) {
case 'h5': return new H5Toast();
case 'mp-weixin': return new WxToast();
default: return new AlipayToast();
}
};
启动时注入，组件内无感使用
在各平台入口文件（如 main.h5.ts、app.js）中一次性组装服务实例：
toast: createToastService('h5'),
storage: createStorageService('h5'),
router: createRouterService('h5')
};
// 注入到全局上下文或 Provider
initApp({ services });
组件内部直接消费：
function SubmitButton() {const { toast } = useServices(); // 从统一上下文取
const handleClick = async () => {
await toast.show('提交成功'); // 不知道也不需要知道底层是谁
};
return ;
}
支持运行时动态切换与灰度验证
当某平台新版本上线需灰度验证时，无需改组件代码，只需调整工厂逻辑：
- 加一个开关：若
import.meta.env.VITE_TOAST_EXPERIMENT === 'true'，则返回实验版 Toast - 小程序中可基于用户特征 ID 做分流：
userId % 100 - H5 环境下可 fallback 到浏览器原生
Notification，失败再降级为 DOM 浮层
所有策略都集中在工厂函数里，业务组件零感知、零修改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
