书接上文。上次讲了 oiyo 在 App.vue 赋予的能力。不少朋友说想看实际例子，光说概念不够直观。

行，今天拿 UniApp 最常见的痛点之一来抛砖引玉：多主题色变更

帮助差异

小程序侧在设计上就没有 “根部视图” 这一层概念。导致 UniApp 的 App.vue 只承担生命周期 hook，不参与渲染。你在

先感受一下 oiyo 帮助之间的差异

未帮助前

• 在原生 UniApp 里能做什么：

  • 可以统一控制主题？不行，没有渲染根节点，
  • 定义一个可以被 A、B、C 页面共同控制变量？不能，只能承担部分应用级功能。

这就是上图这种 “每个页面重复定义” 的根源。

被帮助后

• App.vue 是真正的根部视图，主题状态定义一次所有页面共享。
• ConfigProvider 包裹全应用，一个应用级共享 meVars 变化全域响应。
• 页面 A 主动切换了主题色，页面 B 还有其他页面均立刻感知到变化。说起来，

这种帮助方式解决了过去在 UniApp 里很难做到的跨页面状态共享问题。

用 秒创建验证项目

概念层面已经清楚 Oiyo 能解决什么问题了。如果你现在就想在真实项目里跑通主题切换，先花 秒搭一个 Oiyo 项目。

pnpm create oiyo@latest --preset=standard

脚手架会交互式引导你指定安装位置，用于创建一份包含 wot-ui v2 等基础功能 的常用方法项目： 现在你有了一个具备 oiyo + wot-ui 组件库的可用项目。接下来在这个项目中实现主题切换。

两步实现全局主题切换

前提都具备后接入流程变成一条直线。说起来，

第一步先的观点是，在 App.vue 中组合根部视图

这一步同时用到了 Oiyo 的两项能力： /template>?的渲染让 /WdConfigProvider/>?按理说，有了放置位置，/defineRootContext/>?让主题变化可以从根部扩散到所有页面。

至于接下来，在页面中放入感受直观的 UI 组件

整个过程中。你不需要手写任何样式覆盖逻辑，也不需要在页面间传递事件，更不用担心初始化时序。其实，使用者切换“主题预设”时这些 UI 组件的样式会全局生效。

不止是主题切换

• 全局 Loading / Error 状态管理： .
• 统一权限拦截布局： .
• 多语言切换 Provider： .
• 应用级 Toast / Notify 挂载： .

Oiyo 做的只是把小程序侧缺失的那层“根部视图”还给开发者。这一层补上后UniApp 的开发体验就向标准 Vue 靠拢了一大步。

`

---