揭秘 Uniapp 原生组件开发中的 iOS 页面跳转难题

IOS

2023-09-13 04:57:05

引言

iOS 系统中，原生组件开发对 Vue 页面跳转的处理方式一直是一大难题。为了深入探讨这一课题，本文将从 iOS 导航机制的原理出发，分析 Uniapp 原生组件开发中处理 Vue 页面跳转的实现策略，并提供详细的步骤指南。

iOS 原生导航机制

iOS 采用 UINavigationController 作为导航器，负责控制视图的跳转和管理。UINavigationController 维护一个视图控制器栈，当进行页面跳转时，它会将新的视图控制器压入栈中，并弹出旧的视图控制器。

Uniapp 中的 Vue 路由

在 Web 端，Vue.js 依靠路由（router）机制实现页面跳转。Vue 路由是一个单页面应用程序（SPA）中的重要组件，它通过监听 URL 变化来触发页面切换。

Uniapp 原生组件开发中的页面跳转

Uniapp 原生组件开发中，为了实现 Vue 页面跳转，需要将 Vue 路由与 iOS 原生导航机制相结合。具体步骤如下：

创建原生导航控制器： 创建一个新的 UINavigationController 实例，并将其设置为窗口的根控制器。
将 Vue 页面包装为原生视图控制器： 使用 VueWrapperViewController 类将 Vue 页面包装为原生视图控制器。
添加 Vue 路由监听器： 在 Vue 实例中添加一个路由监听器，监听 $route 变化。
处理 Vue 路由变化： 当 Vue 路由变化时，在路由监听器中调用 [navigationController pushViewController:animated:] 或 [navigationController popViewControllerAnimated:] 方法，实现原生页面的跳转。

代码示例

以下代码展示了如何处理 Uniapp 原生组件开发中的 Vue 页面跳转：

import { createApp } from 'vue'
import { NavigationBar } from '@dcloudio/uni-ui'
import { VueWrapperViewController } from '@dcloudio/uni-app'

const app = createApp(App)
app.component('navigationBar', NavigationBar)
app.mount(VueWrapperViewController.create().rootView)

app.config.globalProperties.$router.beforeEach((to, from, next) => {
  if (to.path !== from.path) {
    if (to.meta.keepAlive) {
      VueWrapperViewController.pushViewController(to.path, { animated: true })
    } else {
      VueWrapperViewController.popViewController(true)
      VueWrapperViewController.pushViewController(to.path, { animated: true })
    }
  }
  next()
})