Vue / UniApp
vue 和 uni-app 的导出 API 由 Oiyo 统一收敛提供
@skiyee/oiyo/runtime 是 Oiyo 应用的运行时 API 入口，用于统一使用 Vue 和 UniApp 提供的公开 API。
Oiyo 不改变这些 API 的语义，这些 API 仍按其所属框架的行为工作。
使用方式
你可以显式从 @skiyee/oiyo/runtime 导入：
<script setup lang="ts">
import { computed, onLaunch, ref } from '@skiyee/oiyo/runtime'
import type { Ref } from '@skiyee/oiyo/runtime'
const title: Ref<string> = ref('Hello Oiyo')
const upperTitle = computed(() => title.value.toUpperCase())
onLaunch(() => {
console.log('App Launch')
})
</script>
也可以在应用文件中 无需导入 的直接使用这些 API：
<script setup lang="ts">
const title: Ref<string> = ref('Hello Oiyo')
const upperTitle = computed(() => title.value.toUpperCase())
onLaunch(() => {
console.log('App Launch')
})
</script>
Vue API
Runtime 入口收敛 Vue 的常用组合式 API 和类型。常见使用包括：
| 分类 | 常见 API | 说明 |
|---|---|---|
| 响应式 | ref、reactive、readonly、computed | 创建和派生响应式状态。 |
| 响应式工具 | unref、isRef、toRef、toRefs | 处理响应式值和对象字段。 |
| 监听 | watch、watchEffect | 监听响应式数据变化。 |
| 调度 | nextTick | 等待下一次 DOM 或视图更新。 |
| 类型 | Ref、ComputedRef | 标注响应式状态和计算状态。 |
<script setup lang="ts">
import { computed, ref, watch } from '@skiyee/oiyo/runtime'
import type { Ref } from '@skiyee/oiyo/runtime'
const count: Ref<number> = ref(0)
const double = computed(() => count.value * 2)
watch(count, (value) => {
console.log('count changed:', value)
})
</script>
UniApp API
Runtime 入口也收敛 UniApp 暴露的生命周期与组合式 API。常见使用包括：
| 分类 | 常见 API | 说明 |
|---|---|---|
| 应用生命周期 | onLaunch、onShow、onHide | 在 App.vue 中处理应用启动、显示和隐藏。 |
| 页面生命周期 | onLoad、onReady、onUnload | 在页面文件中处理页面加载、就绪和卸载。 |
| 页面交互 | onPullDownRefresh、onReachBottom、onPageScroll | 处理下拉刷新、触底和页面滚动。 |
| 分享相关 | onShareAppMessage、onShareTimeline | 处理平台支持的分享能力。 |
<script setup>
import { onLoad, onPullDownRefresh, onReachBottom } from '@skiyee/oiyo/runtime'
onLoad((query) => {
console.log('page query:', query)
})
onPullDownRefresh(() => {
console.log('refresh')
})
onReachBottom(() => {
console.log('reach bottom')
})
</script>
与 uni 全局对象的关系
@skiyee/oiyo/runtime 不替代 uni 全局对象。
调用平台能力时，仍然直接使用 uni.*：
const { hostTheme } = uni.getSystemInfoSync()
uni.navigateTo({
url: '/pages/home/index',
})
使用建议
- 使用
@skiyee/oiyo/runtime作为 Runtime API 的统一来源。 - Runtime API 的具体行为以 Vue 和 UniApp 对应 API 的官方语义为准。
- 在团队约定允许下，Runtime API 均采用自动导入。