taro-vant

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

Usage no npm install needed!

<script type="module">
  import taroVant from 'https://cdn.skypack.dev/taro-vant';
</script>

README

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 之类的属性判断

组件

基础组件

  • 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 遮罩层
  • ShareSheet 分享面板
  • SwipeCell 滑动单元格
  • Toast 轻提示 ( 这个如果是默认显示的情况下 好像有点问题？)

展示组件

  • Circle 进度条 ( Canvas )
  • Collapse 折叠面板
    • item
  • CountDown 倒计时
  • Divider 分割线
  • Empty 空状态
  • NoticeBar 通告栏
  • Panel 面板
  • Progress 进度条
  • Skeleton 骨架屏
  • Steps 步骤条
  • Sticky 粘性布局( 需要处理 页面 级别 scroll 事件 )
  • Tag 标记
  • TreeSelect 分类选择

导航组件

  • Grid 宫格
  • IndexBar 索引栏
  • Sidebar 侧边导航
  • NavBar 导航栏
  • Tab 标签页
  • Tabbar 标签栏
    • item

业务组件

  • Area 省市区选择（暂时用taro内置的功能替代）
  • Card 商品卡片
  • SubmitBar 提交订单栏
  • GoodsAction 商品导航

其他组件

  • [-] 虚拟列表
    • 下拉刷新

未来计划

增加组件

  • 对标framework7的组件类型。

将组件迁移到 react-native

  • 开一个新项目来编写react-native的component

完善动画能力

  • 触摸、跟手交互动画
  • animation 的处理

shim抹平taro的多端问题

  • taro有很多多端兼容的问题，因为开发模式的不一样

  • 优化 plugin 实现，观察源码，可以注入onReady hook事件，替换原有实现。

  • 编写 新loader，支持驼峰 externalClass

    • 有点头疼，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" 这种直接引用的。