# 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
2
3
默认引入内置组件和 weui 组件的完整内容,如果需要只需要包含内置组件的裁剪版 kbone-ui,可按如下引入:
import KBoneUI from 'kbone-ui/wx-components' // 只引入内置组件
KBoneUI.register()
1
2
3
2
3
之后便可像使用 dom 组件那样直接使用内置组件/ weui 组件:
<!-- 内置组件 -->
<wx-picker>test</wx-picker>
<!-- weui 组件 -->
<mp-dialog>test</mp-dialog>
1
2
3
4
5
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 | 部分支持 | 以下属性不支持:
以下事件不支持:
|
wx-swiper | 完全支持 | |
wx-swiper-item | 完全支持 | |
wx-view | 完全支持 | 不建议使用,请使用 div 标签代替 |
wx-icon | 完全支持 | |
wx-progress | 完全支持 | |
wx-rich-text | 完全支持 | |
wx-text | 完全支持 | 不建议使用,请使用 span 标签代替 |
wx-button | 部分支持 | 以下属性不支持:
以下事件不支持:
|
wx-checkbox | 完全支持 | |
wx-checkbox-group | 完全支持 | |
wx-editor | 不支持 | |
wx-form | 部分支持 | 以下属性不支持:
|
wx-input | 部分支持 | 以下属性不支持:
以下事件不支持:
|
wx-label | 完全支持 | |
wx-picker | 完全支持 | |
wx-picker-view | 完全支持 | |
wx-picker-view-column | 完全支持 | |
wx-radio | 完全支持 | |
wx-radio-group | 完全支持 | |
wx-slider | 完全支持 | |
wx-switch | 完全支持 | |
wx-textarea | 部分支持 | 以下属性不支持:
以下事件不支持:
|
wx-functional-page-navigatore | 不支持 | |
wx-navigator | 不支持 | 请使用 a 标签代替 |
wx-audio | 不支持 | 官方已废弃 |
wx-camera | 不支持 | |
wx-image | 部分支持 | 以下属性不支持:
|
wx-live-player | 不支持 | |
wx-live-pusher | 不支持 | |
wx-video | 不支持 | |
wx-voip-room | 不支持 | |
wx-map | 不支持 | |
wx-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 | 部分支持 | 以下属性不支持:
以下事件不支持:
|
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 组件 demo