Remax Vant

使用 Remax 移植 vant-weapp 组件库。

Getting Start

安装依赖

yarn

调试项目

# 执行调试命令
yarn dev

使用小程序开发者工具打开项目下的 dist 目录

构建

# 执行构建命令
$ yarn compile

移植进度

基础组件

• Button
• Cell
• Icon
• Image
• Layout
• Popup
• Transition - 独立实现，与原版几乎无任何关联

表单组件

• Calendar
• Checkbox
• DatetimePicker
• Field
• Picker - 与原版差异巨大，尚未确认是否影响依赖组件使用
• Radio
• Rate
• Search
• Slider
• Stepper - 功能实现残缺，不可输入
• Switch
• Uploader

反馈组件

• ActionSheet
• Dialog
• DropdownMenu
• Loading
• Notify - 与原版实现有差异，参见新文档
• Overlay
• SwipeCell
• Toast - 与原版实现有差异，参见新文档

展示组件

• Circle
• Collapse
• Divider
• NoticeBar
• Panel - 实现有较大差异
• Progress
• Skeleton
• Steps
• Sticky - 暂未支持 scrollTop 属性绑定
• Tag
• TreeSelect

导航组件

• Grid - 实现有较大差异，待确认是否保持一致
• IndexBar - 暂不支持 sticky anchor，后续处理
• Sidebar
• Navbar
• Tab
• Tabbar

业务组件

• Area
• Card
• SubmitBar
• GoodsAction

Tips

如何新建移植模块？

使用 remax-vant-cli 工具包，目前功能受限，新建模块如下：

# 创建模块
remant create radio;

# 不创建预览界面
remant create radio-group --ignore-page;

如何处理 style property 空值?

使用 pickStyle 工具函数处理，推荐使用方式如下：

const stylesheets: Record<string, CSSProperties> = {
  container: pickStyle({
    maxWidth: maxWidth,
    minWidth: minWidth,
  }),
};

如何处理默认值填充？

类型声明分为如下部分：

// 默认值填充属性
interface NeutralSliderProps {}
// 不包含默认值属性
interface ExogenousSliderProps {}

type SliderProps = NeutralSliderProps & ExogenousSliderProps;

默认值填充使用 withDefaultProps 高阶函数进行处理，示例如下：

export default withDefaultProps<ExogenousSliderProps, NeutralSliderProps>(
  DefaultSliderProps
)(Slider);

如何使用自定义 class？

remax-vant 使用 react 进行重写，不再包含小程序自定义组件样式隔离机制，无需独立暴露 external classnames，多数组件直接使用 className 传递类名，部分内部 class hook 类尚未实现。

如何声明 size ？

避免不必要麻烦，remax-vant 限定 size 指定使用带单位的字符串，切勿使用快捷数字：

<Icon name="chat" size="32px" color="#3489fa" />

如何暴露事件监听函数？

remax-vant 不包含小程序特定事件机制，与常规事件暴露相同，回调函数透传 event，无需额外包装。

如何配置颜色属性？

推荐使用 css variables 传递主题色，不建议跨层级 inline style 实现。

vant-weapp 自定义组件 class 移植？

自定义组件理解为 web component，class 会正常附着容器上，移植时，使用额外 view 包装。

待处理

• id business-id 目测与行为监控有关，后续处理
• wx://form-field 如何使用或者如何替换？？？
• dataset 传递使用 event.currentTarget.dataset 使用，原因不明