Skip to content

专属 APP 端特性

当将项目发布到 App 端时,uni-simple-router会自动模拟一种导航模式,该模式比uni-app的导航模式更高级。它会帮助你管理子路由和顶级页面,使得每次跳转都像在 H5 端一样简单。它可以即时响应$Route的变化,精准地挂载视图,并且可以自由地处理物理按键事件。

原生启动界面

App 启动时,通常会显示一个特殊的启动界面,它包含应用图标和应用名称,并带有进度显示。这个启动界面的目的是为了避免应用在首次启动时出现空白页面的情况,因为系统需要一定时间来加载和渲染应用的首页。这个界面通常被称为启动界面、splashlauch screen

对于 uni-app,它已经提供了配置选项来控制和自定义启动界面。你可以在 启动界面选项 中找到详细的配置和说明。然而,在使用 uni-simple-router 时,alwaysShowBeforeRenderautoclose 这两个选项需要由编译器来处理,因此你可能无需手动配置它们。

js
//vite.config.js
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vitePluginUniRouter from './src/uni-simple-router/compiler'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vitePluginUniRouter({
      pluginPath: `./uni-simple-router`,
      app:{
        /**
         * 是否等待首页渲染完毕后再关闭启动界面 默认为false
         */
        alwaysShowBeforeRender:false,
        /**
         * 是否自动关闭启动界面 默认为false
         */
        autoclose:false
      }
    }),
    uni()
  ],
});

温馨提示

  • 我们推荐将 alwaysShowBeforeRenderautoclose 这两个选项都设置为 false,路由插件会自动处理好他们。

nvue 页面不支持嵌套路由

App 端使用 nvue 页面时,嵌套路由和视图是不支持的。nvue 只支持默认的 uni-app 渲染方式,即只能作为顶级页面进行渲染。这是因为在 App 中,nvue 会使用原生的渲染方式,无法正常注入和访问许多前端特性。

然而,即使在这种情况下,uni-simple-router 仍然支持对 nvue 页面的导航监听和 $Route 监听。这意味着你可以使用 uni-simple-router 监听并响应 nvue 页面的导航事件,以及在 nvue 页面中访问和使用 $Route 对象来获取导航信息。

下面是一个例子:

js
// xxx.nvue
import {
  watch
} from 'vue'

// 无需导入插件,直接在 uni.$Router 上访问插件实例
const router = uni.$Router
// 同理也可直接访问路由元信息
const route = uni.$Route

watch(route,(value)=>{
  console.log(value)
})

// 路由跳转
router.push(`/newNvue`)

安卓退出应用

Android 平台上,当用户在页面已经到达最后一层时执行返回操作时,通常应该触发退出应用的操作。在 uni-simple-router 中,已经内置了一个退出应用的函数,如果你没有传递该函数,插件将会使用默认的底层函数。

你可以自己实现退出应用的界面,并将其封装为一个函数,然后将该函数传递给 uni-simple-router,以实现自定义的退出应用功能。

通过这种方式,你可以根据你的需求自定义退出应用的界面和逻辑。

例如:

js
// router.js

function androidQuitApp(){
	uni.showModal({
		title: '退出应用',
		content: `你确定要退出本应用?`,
		success:  ({confirm})=>{
			confirm && plus.runtime.quit();
		}
	});
}

const router = createRouter({
  // 其他配置
  app:{
      runtimeQuit:androidQuitApp
  },
})

苹果手势侧滑返回

在苹果设备上,手势侧滑返回页面是一种非常流畅的操作,它提供了良好的用户体验。在 uni-simple-router 中,你可以对特定的页面设置手势侧滑返回的拦截。

默认情况下,插件会关闭苹果设备上的手势侧滑返回功能,这样你可以自由地对页面进行拦截处理。然而,在实际开发中,你可能对某些页面并不需要进行严格的拦截限制。

为了更好地满足用户体验的需求,uni-simple-router 提供了钩子函数,该函数接收一个回调参数 to,你可以根据这个参数动态地修改苹果设备上的手势侧滑事件,从而实现更灵活的页面返回操作。

例如:

js
// router.js
const router = createRouter({
  // 其他配置
  app:{
    setSideSlipGesture:(to)=>{
      if(to.name === `user`){
        // 如果这个需要开启拦截,我们关闭手势侧滑返回
        return `none`
      }
      // 无需拦截的情况下,直接开启手势侧滑返回
      return `close`
    }
  },
})

开发环境下热更到指定页面

在开发环境下,你可能正在编写对应页面的 UI,并进行热更新调试。通常情况下,每次热更新后应用会回到初始页面,而不是之前正在调试的页面。

如果你希望在热更新时也能回到指定页面,你可以参考 开发与热更 部分的详细说明。该部分会提供相关的指导,帮助你配置 uni-simple-router,使得在热更新时也能恢复到指定页面。

专属 APP 端特性 has loaded