@uni-ku/define-page

@uni-ku/define-page

definePage 宏，用于动态生成 pages.json。

• 支持类型提示、约束
• 支持 json
• 支持函数和异步函数
• 支持从外部导入变量、函数

安装

pnpm i -D @uni-ku/define-page

配置

vite 配置

import uni from '@dcloudio/vite-plugin-uni';
import { viteUniPagesJson } from '@uni-ku/define-page';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    viteUniPagesJson(), // 详细配置请看下面的详细描述
    uni(), // 添加在 viteUniPagesJson() 之后
    // 其他plugins
  ],
});

definePage 全局类型声明

将类型添加到 tsconfig.json 中的 compilerOptions.types 下

{
  "compilerOptions": {
    "types": ["@uni-ku/define-page"]
  }
}

vite 详细配置说明

export interface UserConfig {

  /**
   * 项目根目录
   * @default vite 的 `root` 属性
   */
  root?: string;

  /**
   * pages.json 的相对目录
   * @default "src"
   */
  basePath?: string;

  /**
   * 为页面路径生成 TypeScript 声明
   * 接受相对项目根目录的路径
   * null 则取消生成
   * @default basePath
   */
  dts?: string | null;

  /**
   * pages的相对路径
   * @default 'src/pages'
   */
  pages?: string;

  /**
   * subPackages的相对路径
   * @default []
   */
  subPackages?: string[];

  /**
   * 排除条件，应用于 pages 和 subPackages 的文件
   * @default ['node_modules', '.git', '** /__*__/ **']
   */
  exclude?: string[];

  /**
   * pages和subPages的文件扫描深度
   * @default 3
   */
  fileDeep?: number;

  /**
   * 显示调试
   * @default false
   */
  debug?: boolean | DebugType;
}

动态 pages 配置文件 pages.json.(ts|mts|cts|js|cjs|mjs)

动态 pages 配置文件，须放置 pages.json 同级目录。

最终将与 definePage 宏生成的内容合并，生成最终的 pages.json

import { UniPagesJson } from '@uni-ku/define-page';

export default UniPagesJson({
  globalStyle: {
    navigationBarTextStyle: 'black',
    navigationBarTitleText: 'uni-app',
    navigationBarBackgroundColor: '#F8F8F8',
    backgroundColor: '#F8F8F8',
  },
  pages: [
    // pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    // {
    //   path: 'pages/index/index',
    //   style: {
    //     navigationBarTitleText: 'uni-app',
    //   },
    // },
  ],
});

使用

vue SFC文件内 definePage 宏使用方式

更多使用方式请参考 playground/pages/define-page

注意：

• 以下代码需要写在 script setup 内
• definePage 宏和当前 SFC 不同域，且先于 SFC 生成，SFC 内部变量无法使用。
• 页面 path url 将会自动根据文件路径生成，如无须配置其他项目，definePage可省略
• 同一个 script setup 内仅可使用一个 definePage

JSON 对象

definePage({
  style: {
    navigationBarTitleText: 'hello world',
  },
  middlewares: [
    'auth',
  ],
});

函数

import type { HelloWorld } from './utils';

definePage(() => {
  const words: HelloWorld = {
    hello: 'hello',
    world: 'world',
  };

  return {
    style: {
      navigationBarTitleText: [words.hello, words.world].join(' '),
    },
    middlewares: [
      'auth',
    ],
  };
});

嵌套函数

definePage(() => {
  function getTitle(): string {
    const hello = 'hello';
    const world = 'world';

    return [hello, world].join(' ');
  }

  return {
    style: {
      navigationBarTitleText: getTitle(),
    },
    middlewares: [
      'auth',
    ],
  };
});

引入外部函数、变量。 需要注意的是，仅支持引入：

• 纯 JavaScript 代码 （如 node_modules 中的第三方库）
• TypeScript 类型声明 （因为会被自动忽略）

import { parse as parseYML } from 'yaml';

definePage(() => {
  const yml = `
style:
  navigationBarTitleText: "yaml test"
`;
  return parseYML(yml);
});

### 获取当前上下文的数据

详见 #6，暂未明 ctx 有何作用。 使用 virtualModule 会导致变量得不到释放，占用内存。

感谢

• vite-plugin-uni-pages