本文主要介绍了如何快速上手Kbone-UI，以及Kbone-UI的原理。

开始着手-UI 的初衷是为了降低上手难度，需要为多终端提供统一样式的 UI 组件库。现在微信已经有了 WeUI 公共样式库支持 Web 端对外展示，小程序本身的基础组件也是 WeUI 重构团队做的。所以为了达成这个目标，-UI 的做法是以对齐小程序内置组件和扩展组件为目标，利用 WeUI 样式提供跨终端、H5 和小程序体验一致的 UI 组件库。

主要思想是通过Page和特有的环境变量来区分小程序和H5的环境：

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

对外暴露小程序组件统一以K为前缀的组件名，内部H5端通过WeUI风格适配，小程序端直接使用内置组件。例如：

// 对外暴露： // 小程序端： // H5 端： + weui

快速入门

-第一阶段UI工作已基本完成，为了帮助用户快速上手，提供了以下基本信息供参考：

目前的UI库基于Vue，主要考虑优先在团队内部进行基础开发使用，后续随着生态的完善会提供相应的版本。

-UI与市面上大多数其他UI库类似，提供本地和全局引用两种方法。

加载所有组件内容，并导入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 原则

-UI目前基于小程序与Web端同构的方案，基本方案是通过组件来模拟大部分交互UI的功能组件内容，如、、等。

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

最新版本的-UI增加了三个重要的视图层组件：、，以及其他交互组件：

总体来说，-UI 的做法和 taro 等跨终端的做法不一样，使用 -UI 可以在不脱离现有框架（Vue、）的情况下实现多终端开发目标，不需要像 taro/ 那样重新学习语法和框架。目前 -UI 还处于比较早期的阶段，初步计划是和微信小程序对接，实现简单易用的组件，后续会持续维护，提供更多更好的组件。

如果你对-UI感兴趣，欢迎投稿和PR！如果你对-UI有任何疑问或建议，欢迎前往社区主页发帖交流（PC网页即可发帖）。想查看更多相关内容，欢迎来到文章区。