Skip to content
This repository has been archived by the owner on Feb 1, 2023. It is now read-only.

Latest commit

 

History

History
172 lines (144 loc) · 5.73 KB

README.md

File metadata and controls

172 lines (144 loc) · 5.73 KB
Raw

vant-weapp-convert-uniapp

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

在线文档

平台支持

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

使用

npm version

安装

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