vant-weapp-convert-uniapp

将 vant-weapp 转化成 uniapp 组件，目前基于 vant-weapp@1.5.2 版本进行转化。我不生产代码，我只是代码的搬运工。给同样喜欢 vant-weapp 的你，带来便捷的跨端开发体验。

在线文档

平台支持

• 微信小程序
• QQ小程序
• 头条小程序
• 支付宝小程序
• 百度小程序
• H5
• APP

使用

安装

npm i vant-weapp-convert-uniapp -S
npm i less less-loader -D

使用组件

第一步，App.vue 中导入必要的全局样式（重要）

<style lang="less">
@import 'vant-weapp-convert-uniapp/common/index.less';
</style>

第二步，页面中引入需要的组件，有以下两种方式

easycom 模式（推荐）

配置 src/pages.json

{
  ...,
  "easycom": {
    "autoscan": true,
    "custom": {
      "van-(.*)": "vant-weapp-convert-uniapp/components/van-$1/van-$1.vue"
    }
  }
}

然后页面中就可以不用 import 组件直接使用了。

babel-plugin-import 按需引入

配置 babel.config.js

...
plugins.push([
  'import',
  {
    'libraryName': 'vant-weapp-convert-uniapp',
    'customName': (name) => {
      return `vant-weapp-convert-uniapp/components/${name}/${name}`
    }
  },
  'vant-weapp-convert-uniapp'
])
...

页面中引入组件

<template>
  <van-button>按钮</van-button>
</template>
 
<script>
import { VanButton } from 'vant-weapp-convert-uniapp'
export default {
  components: {
    VanButton
  }
}
</script>

注意

• 支付宝小程序需要”启用 component2 编译”，在 mainfest.json 的 mp-alipay 里设置 component2 为 true，不然会导致获取不到 $ref ，并且组件的 _uid 是反序的。

转化进度 (30/50)

• 基础组件
  • Button 按钮 van-button
  • Cell 单元格 van-cell-group van-cell
  • Icon 图标 van-icon
  • Image 图片 van-image
  • Layout 布局 van-row van-col
  • Popup 弹出层 van-popup
  • Transition 动画 van-transition
• 表单组件
  • Calendar 日历 van-calendar
  • Checkbox 复选框 van-checkbox van-checkbox-group
  • DatetimePicker 时间选择 van-datetime-picker
  • Field 输入框 van-field
  • Picker 选择器 van-picker
  • Radio 单选框 van-radio van-radio-group
  • Rate 评分 van-rate
  • Search 搜索 van-search
  • Slider 滑块 van-slider
  • Stepper 步进器 van-stepper
  • Switch 开关 van-switch
  • Uploader 文件上传 van-uploader
• 反馈组件
  • ActionSheet 上拉菜单 van-action-sheet
  • Dialog 弹出框 van-dialog
  • DropdownMenu 下拉菜单 van-dropdown-menu van-dropdown-item
  • Loading 加载 van-loading
  • Notify 消息提示 van-notify
  • Overlay 遮罩层 van-overlay
  • SwipeCell 滑动单元格 van-swipe-cell
  • Toast 轻提示 van-toast
• 展示组件
  • Circle 环形进度条 van-circle
  • Collapse 折叠面板 van-collapse van-collapse-item
  • CountDown 倒计时 van-count-down
  • Divider 分割线 van-divider
  • Empty 空状态 van-empty
  • NoticeBar 通告栏 van-notice-bar
  • Panel 面板 van-panel
  • Progress 进度条 van-progress
  • Skeleton 骨架屏 van-skeleton
  • Steps 步骤条 van-steps
  • Sticky 粘性布局 van-sticky
  • Tag 标签 van-tag
  • TreeSelect 分类选择 van-tree-select
• 导航组件
  • Grid 宫格 van-grid van-grid-item
  • IndexBar 索引栏 van-index-bar van-index-anchor
  • Sidebar 侧边导航 van-sidebar van-sidebar-item
  • NavBar 导航栏 van-nav-bar
  • Tab 标签页 van-tab van-tabs （转化得我要吐血，难搞）
  • Tabbar 标签栏 van-tabbar van-tabbar-item
• 业务组件
  • Area 省市区选择 van-area
  • Card 商品卡片 van-card
  • SubmitBar 提交订单栏 van-submit-bar
  • GoodsAction 商品导航 van-goods-action van-goods-action-icon van-goods-action-button

一些问题

• 组件里 canvas 的 style 动态绑定不能太复杂，不然会导致 canvas 2d 的时候 width 和 height 设置失败，如：:style="{ width: width, height: height }" 就可以，而 :style="mainStyle" 或者是 :style="{ width: fn(size), height: fn(size) }" 都不行。
• 支付宝小程序中 vue 不支持 mixins 带 props 的对象
• ::before 和 ::after 仅微信小程序和App生效
• 支付宝小程序不支持in(component)，使用无效果
• van-overlay 组件样式得在全局引入，不然会出现嵌套组件里的样式不生效
• 支付宝小程序不支持在组件上加 click touchmove 等事件
• 支付宝小程序不支持 .stop.prevent 事件修饰符
• 头条小程序在 computed 中拿不到 inject 进来的父组件的相关数据
• 小程序 props 没办法传递 function
• 支付宝里会出现这个问题，父子组件使用props传值，支付宝小程序中出现错误，出现问题的代码文件参考packages/van-sticky/demo.vue
• 小程序中不能将 vue 实例给赋值到 data 变量中
• $vnode 在小程序端获取不到
• 支付宝小程序中不支持 .native 修饰符，出现问题的代码文件参考packages/van-popup/van-popup.vue
• 一些样式在 h5 端没有效果，比如 packages/van-empty/demo.vue