wechat-miniprogram / kbone

# kbone-ui

# 简介

kbone-ui 是一个支持在 Web 端使用小程序内置组件和 weui 组件的 UI 库。

kbone 在小程序端支持了内置组件和 weui 组件库的使用，但是这些是小程序端的特性，在 Web 端不可使用。为了磨平这块内容而提供了 kbone-ui 库。通过，kbone-ui 来磨平大部分的组件实现差异，方便跨端同构。

# 版本

kbone-ui 目前有两个实现版本，版本间无法兼容，建议直接使用 1.x 版本。

npm install kbone-ui
1
  • 1.x 版本：基于 Web Components 实现，无框架依赖，支持更完整的组件列表
  • 0.x 版本：基于 vue 实现，可通过 npm install kbone-ui@core-v0 安装，文档请看这里

# 使用

使用方式非常简单，开发者仅需要在 Web 端代码入口处引入 kbone-ui 并注册即可：

import KBoneUI from 'kbone-ui'

KBoneUI.register()
1
2
3

默认引入内置组件和 weui 组件的完整内容，如果需要只需要包含内置组件的裁剪版 kbone-ui，可按如下引入：

import KBoneUI from 'kbone-ui/wx-components' // 只引入内置组件

KBoneUI.register()
1
2
3

之后便可像使用 dom 组件那样直接使用内置组件/ weui 组件：

<!-- 内置组件 -->
<wx-picker>test</wx-picker>

<!-- weui 组件 -->
<mp-dialog>test</mp-dialog>
1
2
3
4
5

PS：具体例子可参考 demo27（内置组件） (opens new window) 和 demo28（weui 组件） (opens new window)

# API

# register

注册 kbone-ui。

参数 类型 默认值 描述
components Array/String all 需要注册的组件列表，支持数组传入列表，也支持字符串 all，表示注册所有组件
style Object {} 需要注入到组件内部的样式
domExtend Boolean true dom/bom 扩展 API

# 支持情况

# 内置组件

内置组件对齐基础库 2.14.0 版本。

组件
支持情况
 备注
wx-cover-image
不支持
 请使用 img 标签代替
wx-cover-view
不支持
 请使用 div 标签代替
wx-match-media
完全支持
wx-movable-area
完全支持
wx-movable-view
完全支持
wx-scroll-view
部分支持
 以下属性不支持：
  • enable-back-to-top
  • scroll-anchoring
  • enhanced
  • bounces
  • show-scrollbar
  • paging-enabled
  • fast-deceleration

以下事件不支持：
  • dragstart
  • dragging
  • dragend
wx-swiper
完全支持
wx-swiper-item
完全支持
wx-view
完全支持
 不建议使用，请使用 div 标签代替
wx-icon
完全支持
wx-progress
完全支持
wx-rich-text
完全支持
wx-text
完全支持
 不建议使用，请使用 span 标签代替
wx-button
部分支持
 以下属性不支持：
  • open-type
  • lang
  • session-from
  • send-message-title
  • send-message-path
  • send-message-img
  • app-parameter
  • show-message-card

以下事件不支持：
  • getuserinfo
  • contact
  • getphonenumber
  • error
  • opensetting
  • launchapp
wx-checkbox
完全支持
wx-checkbox-group
完全支持
wx-editor
不支持
wx-form
部分支持
 以下属性不支持：
  • report-submit
  • report-submit-timeout
wx-input
部分支持
 以下属性不支持：
  • cursor-spacing
  • confirm-type
  • always-embed
  • adjust-position
  • hold-keyboard

以下事件不支持：
  • keyboardheightchange
wx-label
完全支持
wx-picker
完全支持
wx-picker-view
完全支持
wx-picker-view-column
完全支持
wx-radio
完全支持
wx-radio-group
完全支持
wx-slider
完全支持
wx-switch
完全支持
wx-textarea
部分支持
 以下属性不支持：
  • cursor-spacing
  • show-confirm-bar
  • adjust-position
  • hold-keyboard
  • disable-default-padding
  • confirm-type

以下事件不支持：
  • keyboardheightchange
wx-functional-page-navigatore
不支持
wx-navigator
不支持
 请使用 a 标签代替
wx-audio
不支持
 官方已废弃
wx-camera
不支持
wx-image
部分支持
 以下属性不支持：
  • show-menu-by-longpress
wx-live-player
不支持
wx-live-pusher
不支持
wx-video
不支持
wx-voip-room
不支持
wx-map
不支持
wx-canvas
部分支持
 以下属性不支持：
  • canvas-id（旧版 canvas 官方已不再维护，建议使用新版 canvas）
wx-ad
不支持
wx-ad-custom
不支持
wx-official-account
不支持
wx-open-data
不支持
wx-web-view
不支持

# weui 组件

weui 组件对齐 npm 上 1.0.7 版本。

组件
支持情况
 备注
mp-badge
完全支持
mp-gallery
完全支持
mp-loading
完全支持
mp-icon
完全支持
mp-form
完全支持
mp-form-page
完全支持
mp-cell
完全支持
mp-cells
完全支持
mp-checkbox-group
完全支持
mp-checkbox
完全支持
mp-slideview
完全支持
mp-uploader
部分支持
 以下属性不支持：
  • size-type
  • source-type

以下事件不支持：
  • cancel
mp-dialog
完全支持
mp-msg
完全支持
mp-toptips
完全支持
mp-half-screen-dialog
完全支持
mp-actionsheet
完全支持
mp-navigation-bar
完全支持
mp-tabbar
完全支持
mp-searchbar
完全支持
mp-grids
完全支持

# dom/bom 扩展 API

有些接口无法在小程序中直接模拟出来，所以 kbone 提供了一些在 Web 端不存在的扩展接口给小程序使用。为了对齐这些扩展接口，kbone-ui 也同步实现了一套允许其在 Web 端使用。

# 组件

组件
支持情况
 备注
wx-capture
完全支持
wx-catch
完全支持
wx-animation
完全支持

# 接口

接口
支持情况
 备注
window.$$getComputedStyle
完全支持
window.$$forceRender
完全支持
 在 Web 端是一个空函数
dom.$$getBoundingClientRect
完全支持
canvas.$$prepare
完全支持

# 在线 demo

内置组件 内置组件 demo
weui 组件 weui 组件 demo