Kbone UI：打通H5与小程序的多端UI库-杭州微信小程序公众号直播商城开发为你转播

// 判断小程序端
const ismp = typeof Page === “function” && typeof Component === “function”

// 对外暴露：
<KButton>

// 小程序端：
<wx-button>

// H5 端：
<button> + weui

快速上手

• 《Kbone-UI 文档》 

• 《Kbone-UI 示例》

• 《Kbone-UI 仓库》

现在的 UI 库是基于 Vue，考虑点主要是优先满足团队内部的基础开发和使用。后续会随着生态完善，计划提供对应 React 版本。

Kbone-UI 和市面上大部分的其它 UI 库类似，提供了 codeSplit 和全局引用两种方式。

加载全部组件内容，并引入 WeUI 样式库：

import KboneUI from 'kbone-ui'
import 'kbone-ui/lib/weui/weui.css'

Vue.use(KboneUI)

使用按需引入：

import KButton from 'kbone-ui/lib/KButton.js'
import KView from 'kbone-ui/lib/KView.js'
import 'kbone-ui/lib/weui/weui.css'

Vue.use(KButton)
Vue.use(KView)

UI 原理

另外，考虑到 Web 端和小程序端的差异，Kbone-UI 需要对三类组件来进行跨平台实现。

• KView(div) 组件: 直接通过 KView + css 的方式来模拟一些常用组件，比如像 progress、rich-text、icon、ActionSheet 等。这些实现起来比较容易，可以直接通过 KView 实现两端复用

• 表单组件: 对于一些表单组件，Kbone 默认是直接支持 input[type=“xx”] 来模拟，不过，像 switch, editor 等还是需要通过 wx-xxx 组件来针对特有平台调用。

• 视图组件: swiper, picker-view 这类在 View 层具有强 UI 交互的组件，很难做到两端通用。主要小程序是双线程模型，用户自定义组件无法独立运行在 View 层。对于这类组件，只能通过 Web 端向小程序端同属性适配的方式来做。

整体来说，Kbone-UI 切入的角度和 taro、mpvue 等跨端式的方式不太一样，使用 Kbone-UI 可以在不脱离已有框架(Vue, React)下，实现多端开发目的，而不需要像 taro/mpvue 之类需要重新学一遍语法和框架。目前 Kbone-UI 还处于比较早期状态，前期打算是对齐微信小程序实现好用易用组件，后续，也会持续维护提供更多更好用的组件。

如果你对 Kbone-UI 感兴趣，欢迎在 Github 提出 Issue 和 PR ！关于 Kbone-UI 你有什么使用问题或建议，欢迎访问Kbone社区主页发帖交流（PC网页端可发帖）。查看更多 Kbone 相关干货内容，欢迎来到Kbone文章专区。

Kbone-UI Github 开源地址：

https://github.com/wechat-miniprogram/kbone-ui

Kbone官方社区地址：

https://developers.weixin.qq.com/community/minihome/mixflow/1213301129006825473

阅读原文