uni-simple-router

主题

On this page

安装 ​

Watch a free video lesson on official

扫码登录后授权下载 ​

自V3版本开始，我们仅提供收费版本的uni-simple-router。如果你只是想进行简单尝试，可以下载我们的开源版。在Github上可以找到完整的源代码。

如果你已经获得授权并登录了，可以直接点击下方提示栏下载插件包。另外，你还可以在导航头像和名称位置点击，进入个人中心，在那里也可以下载插件包。

如果你还未获得授权，可以参考此处获取授权。

下载完成并解压后，你将会获得如下目录结构：

uni-simple-router
├─ version.json    // 详细的版本信息
├─ appletRouterView.vue    // 用于在小程序中使用的 simple-router-view
├─ compiler.d.ts  // 编译器 - 适合TS智能提示的.d.ts文件
├─ compiler.js // 编译器 - 完整插件文件
├─ compiler.js.LICENSE.txt  // 编译器 - 许可证文件 - 【新版可能删除】
├─ index.d.ts   // 运行时 - 适合TS智能提示的.d.ts文件
├─ index.mjs    // 运行时 - 完整的运行时uni-simple-router文件
└ index.mjs.LICENSE.txt // 运行时 - 许可证文件 - 【新版可能删除】

版本要求和先决条件 ​

先决条件

  • 安装 Node.js 16.0 或更高版本
  • 如果你喜欢使用 IDE 创建项目，请确保 HBuilderX 版本 在 3.7.11.20230427 或更高版本
  • 如果你喜欢使用 CLI 创建项目，请确保 官方依赖 版本 在 3.0.0-alpha-3070720230316001 或更高版本
  • 当您准备将插件包与uni-app工程集成时，请确保您已经获得授权并成功下载插件包。这样可以确保您有合法的许可证，并且可以顺利进行集成和使用插件的功能。

第一步将插件包放入工程 ​

在开始之前，请确保您已经阅读 版本要求和先决条件。

如果您是通过脚手架初始化的项目，只需将插件包解压后直接放入src目录下的任意文件夹即可。而如果您是通过HBuilderX编辑器初始化的项目，则直接将插件包放入项目根目录下的任意文件夹中即可。

如果您的项目中没有vite.config.js文件，您需要手动在项目根目录下创建一个，并写入以下默认配置。这样可以确保项目正常工作。

js
// vite.config.js
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
});

第二步配置 vite.config.js ​

在开始之前，请确保您已经按照第一步的配置要求进行了必要的设置。

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`,  
    }), 
    uni()
  ],
});

以上代码是用于将编译器与 vite 进行集成的配置。在代码中，pluginPath 属性用于指定插件包的位置，你可以设置绝对路径或相对路径来指定插件包的位置。

陷阱提示

在配置编译器时，请确保将其放置在 plugins 数组的第一位，以确保它按预期工作。

第三步配置运行时 ​

在开始之前，请确保您已按照第二步的配置要求进行了必要的设置。此外，请停止正在配置的项目的运行，在配置完成后再重新编译。

新建并写入 router.js ​

js
// router.js
import {
    createRouter,
    __dynamicImportComponent__
} from '@/uni-simple-router'

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,
    routes:[{
        path:`/`,
        component:__dynamicImportComponent__(`@/pages/index.vue`,{
            pageType:`top`  
        })
    }]
})

export default router

将 router 在 main.js 中导出 ​

js
// main.js
import { createSSRApp } from "vue";
import App from "./App.vue";
import router from '@/router' 

export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
    router  
  };
}

去除 pages.json 中的 pages 及 subpackages 字段 ​

js
// pages.json
{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

为了减少该栏目的复杂度，我们省略了一些无关紧要的代码，请确保已经按照糟色部分的代码进行了配置。现在你会注意到 pages.json 与传统的 uni-app 项目有所不同，它省略了 pages 和 subpackages 的配置。这得益于 uni-simple-router 编译器，它让你专注于业务逻辑，无需每次都在庞大而臃肿的 pages.json 文件中查找或添加页面。编译器会根据你在路由表中的配置生成真正的页面，允许你在构建时或运行时创建复杂的嵌套页面体系。截至目前安装已经完成，你可以重新编译并查看你的应用。你也可以查下下方最终的项目结构。

陷阱提示

在新版的 uni-app 中，由于官方加入了一个编译前的逻辑判断，要求 pages.json 中至少要有一项 pages 路径配置，否则热编译时会在前端抛出警告。该警告在 h5 上表现比较明显，当出现这个问题警告时，你可以通过刷新浏览器来解除警告。如果你想忽略这个警告，你可以在 pages.json 中随意指定一个页面路径，这个路径可以是你项目中的任何页面地址，该页面配置不会被最终打包，而是仅用于跳过这个警告的作用。

js
// pages.json
{
  "pages": [{
    "path": "pages/index/index"
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

记住这个不是必须的，只是给出一个忽略警告的方式。

集成后的项目结构 ​

CLI 初始化的项目 ​

js
E:\codeTest\playground
├─.gitignore
├─index.html
├─package.json
├─tsconfig.json
├─vite.config.ts  
├─src
|  ├─App.vue
|  ├─env.d.ts
|  ├─main.ts    
|  ├─manifest.json
|  ├─pages.json   
|  ├─shime-uni.d.ts
|  ├─uni.scss
|  ├─uni-simple-router    
|  |         ├─appletRouterView.vue  
|  |         ├─version.json  
|  |         ├─compiler.d.ts  
|  |         ├─compiler.js  
|  |         ├─compiler.js.LICENSE.txt  - 【新版可能删除】
|  |         ├─index.d.ts 
|  |         ├─index.mjs 
|  |         └index.mjs.LICENSE.txt - 【新版可能删除】
|  ├─static
|  |   └logo.png
|  ├─router   
|  |   └index.ts  
|  ├─pages
|  |   └index.vue

IDE 初始化的项目 ​

js
E:\codeTest\playground
├─App.vue
├─index.html
├─main.js 
├─manifest.json
├─package-lock.json
├─package.json
├─pages.json  
├─uni.promisify.adaptor.js
├─uni.scss
├─vite.config.js  
├─uni-simple-router 
|         ├─appletRouterView.vue  
|         ├─version.json  
|         ├─compiler.d.ts  
|         ├─compiler.js  
|         ├─compiler.js.LICENSE.txt  - 【新版可能删除】
|         ├─index.d.ts 
|         ├─index.mjs 
|         └index.mjs.LICENSE.txt - 【新版可能删除】
├─static
|   └logo.png
├─router  
|   └index.js 
├─pages
|   └index.vue