Ray 开发框架——小程序框架配置开发（二）

路由配置

用于描述应用中页面的路径表达式及应用 TabBar（如有）的信息。配置文件 src/routes.config.ts 格式如下：

import { Routes, TabBar } from '@ray-js/types';
 
export const routes: Routes = [];
export const tabBar: TabBar = {};

路由对象

通过 export const routes = [] 声明导出。一个完整的路由对象如下：

{
  id: 'detail',
  route: '/detail/:uid',
  path: '/pages/detail/index',
}

注意: 路由以后面覆盖前面的优先级顺序匹配，开发者应自行保证路由的优先级关系。

id

路由唯一标识，可选。

route

路由路径表达式，必填。

表达式应符合 path-to-regexp 规范

path

路由页面组件地址，必填。

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

tabBar 对象

用于描述应用 tabBar 导航栏菜单项。

通过 export const tabBar = {} 导出。

其约束如下：

type TabBar = {
  /**
   * 导航文本色
   */
  textColor?: string;
  /**
   * 导航文本高亮色
   */
  selectedColor?: string;
  /**
   * 导航栏背景色
   */
  backgroundColor?: string;
  /**
   * 导航栏列表
   */
  list?: RequireOnlyOne<
    {
      text: string; // 导航项的名称
      icon?: string; // 导航项图标
      activeIcon?: string; // 导航项高图标
      id: string; //  与 routes 一一对应（如有）
      route: string;
    },
    'id' | 'route'
  >[];
};

其中 icon 和 activeIcon 仅支持本地图片, 且图片为绝对地址。

例如: 在根目录下创建 public/images/tabbar/home.png public/images/tabbar/home-active.png 文件，则对应的配置为:

{
  "icon": "/images/tabbar/home.png",
  "activeIcon": "/images/tabbar/home-active.png"
}

 

样式方案

自适应样式单位 rpx，自动根据设备环境缩放。

关系：750rpx = 100vw

绝对样式单位 px，在所有设备下表现一致。

样式文件

对于页面和组件级的样式，推荐使用 CSS Modules 的方案，能有效避免样式冲突问题。

规范规则如下：

• 文件名： xxx.module.[css|less]
• 模块化：一个页面或组件对应一个样式文件。

Home
├── index.module.css
└── index.tsx

样式规则

推荐使用驼峰式命名样式名，同时避免使用嵌套样式名。

推荐写法：

// Good
.home {
  color: red;
}
 
.homeTitle {
  font-size: 48rpx;
}

不推荐写法：

// Bad
.home {
  color: red;
  .title {
    font-size: 48rpx;
  }
}

设计稿

设计稿应以 750px 为设计宽度，能有效减少开发过程中单位的转换换算。

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。