路由配置
用于描述应用中页面的路径表达式及应用 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 小程序开发。