Taro-vant NPM | npm.io

taro-vant

基于taro2进行多端组件开发，迁移vant-weapp的组件库，兼容h5、微信小程序端、支付宝小程序端。

安装

npm i taro-vant

yarn add taro-vant

使用前需要配置

因为我希望这个组件是可以用小程序原生组件混合编写的，但是原有的taro build -ui生成出来的组件是不行的（我看taro-ui的编译配置方式，测试配置之后结果），
所以研究了几天弄了一个taro的配置和插件，使得原有的组件和自己项目写的代码一样进行编译。
至于为什么使用.temp 文件夹，是因为taro的临时文件夹名称也是.temp，所以这个一般都会写入 .gitignore，而这个文件夹应该是不需要添加到版本管理中的。
NOTE: 小程序中，修改了webpack配置 resolve.symlinks: false , 不知道这个是否会影响 Taro 原有的配置
// config/index.js中最后一部分
module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({},
      config, require('./dev'),
      require('taro-vant/plugin')({
        tempPath: "components/.temp", // 在src下的临时文件路径，必须是相对路径 src/components/.temp
        modules: {
          // "taro-vant": "src/components/taro-vant" // node_module/taro-vant/src/components/taro-vant, // 兼容各种类型的node模块，我是从npm 安装 git 模块中的需求中发现这个需求的
          "taro-vant": "" // node_module/taro-vant
          // "taro-vant": "." // node_module/taro-vant

    }, // 需要inline编译的library => 模块的根目录
    copySrcWxs: false // 内联一个功能，是否复制src项目编写的wxs文件
  })
)

} return merge({}, config, require('./prod'), require('taro-vant/plugin')({ tempPath: "components/.temp", modules: { // "taro-vant": "src/components/taro-vant" // node_module/taro-vant/src/components/taro-vant "taro-vant": "" // node_module/taro-vant // "taro-vant": "." // node_module/taro-vant }, copySrcWxs: false }) ) }

## 为什么选择 taro2，而不是最新的taro3

> 为了taro到小程序端的能力，还是使用taro2的编译方向来保证这些低性能的小程序。
    > 也方便直接写多端组件。

> 不愿意为了开发体验，牺牲性能，没有性能没得作。。
>
> 同时，这也基本使用了 hooks 进行开发，
>
> 使用的api也基本封装在utils中。
>
> 迁移到taro3的组件实现成本也不会太高
>
> 2020.12.15 ：taro3 h5 一堆问题，迁移了有些炸有些不炸，主要还是炸。暂时不处理。

### 如何解决开发体验的问题

1. `React.children.map` （最主要）
    > 内置实现了一个useRelationListen / useRelationInject 的hook

2. 以及保证判断 `props.children` 是否存在的问题
    > props中使用 `useSlot` 之类的属性判断

## 组件

### 基础组件
- [x] Button 按钮
- [x] Cell 单元格
- [x] Icon 图标
- [x] Image 图片
- [x] Layout 布局
- [x] Popup 弹出层
- [x] Transition 动画
### 表单组件
- [x] Calendar 日历
- [x] Checkbox 复选框
- [x] DatetimePicker 时间选择
- [x] Field 输入框
- [x] Picker 选择器
- [x] Radio 单选框
- [x] Rate 评分
- [x] Search 搜索
- [x] Slider 滑块
- [x] Stepper 步进器
- [x] Switch 开关
- [x] Uploader 文件上传
### 反馈组件
- [x] ActionSheet 上拉菜单
- [x] Dialog 弹出框
- [x] DropdownMenu 下拉菜单
- [x] Loading 加载
- [x] Notify 消息通知
- [x] Overlay 遮罩层
- [x] ShareSheet 分享面板
- [x] SwipeCell 滑动单元格
- [x] Toast 轻提示 ( 这个如果是默认显示的情况下 好像有点问题？)
### 展示组件
- [x] Circle 进度条 ( Canvas )
- [x] Collapse 折叠面板
    - item
- [x] CountDown 倒计时
- [x] Divider 分割线
- [x] Empty 空状态
- [x] NoticeBar 通告栏
- [x] Panel 面板
- [x] Progress 进度条
- [x] Skeleton 骨架屏
- [x] Steps 步骤条
- [x] Sticky 粘性布局( 需要处理 页面 级别 scroll 事件 )
- [x] Tag 标记
- [x] TreeSelect 分类选择
### 导航组件
- [x] Grid 宫格
- [x] IndexBar 索引栏
- [x] Sidebar 侧边导航
- [x] NavBar 导航栏
- [x] Tab 标签页
- [x] Tabbar 标签栏
    - item
### 业务组件
- [ ] Area 省市区选择（暂时用taro内置的功能替代）
- [x] Card 商品卡片
- [x] SubmitBar 提交订单栏
- [x] GoodsAction 商品导航

### 其他组件
- [-] 虚拟列表
  - [ ] 下拉刷新

## 未来计划

### 增加组件
  - 对标framework7的组件类型。

### 将组件迁移到 react-native
  - 开一个新项目来编写react-native的component

### 完善动画能力
  - 触摸、跟手交互动画
  - animation 的处理

### shim抹平taro的多端问题
- taro有很多多端兼容的问题，因为开发模式的不一样

- [x] 优化 plugin 实现，观察源码，可以注入onReady hook事件，替换原有实现。
- [x] 编写 新loader，支持驼峰 externalClass
  - [x] 有点头疼，externalClass 在微信小程序是运行时的，所以支持所有的js语法，所以这种插件不能支持很多很复杂的语法规则，
    > 现在只是支持如下类型的唯一语法
    > ```
    > VanCompoentName.externalClass = [""];
    > export default VanCompoentName
    > ```
    > 所以因此妥协：taro-vant 组件编写的时候暂时不能使用 externalClass = 其他标识符的语法。
    > 注意因为，需要支持typescript的解析，所以直接用了babel7。（之后有闲我就把 taro 2.x 支持到 babel7）
  - [ ] 暂时还只是支持 直接引用，不支持原来 index.tsx 中类似的重新导出。还要进一步处理。
  >（所以原有使用`import { VanButton } from "taro-vant"`）这种引用还不支持，
  > 现在只是支持`import VanButton from "taro-vant/Button"` 这种直接引用的。

taro ui vant