【kbone-ui】打通 H5/微信小程序，多端UI库
前言
有了UI库，便捷性提高很多。今日早读文章由腾讯@binnie投稿分享。
正文从这开始～～
kbone-ui 的方式是以小程序内置组件和拓展组件为对齐目标， 使用 weui 样式提供 H5 和 小程序体验一致的跨端 UI 组件库。
一开始做 kbone-ui 的初衷是为了减少 kbone 的上手难度，需要提供多端的样式统一的 UI 组件库。现在，微信这边已经有了 weui 公共样式库来支持 Web 端的对外展示，其中，小程序本身基础组件也是由 weui 重构团队来做的。所以，为了达到这个目标，kbone-ui 的方式是以小程序内置组件和拓展组件为对齐目标， 使用 weui 样式提供 H5 和 小程序体验一致的跨端 UI 组件库。
主要思路是通过 Page 和 Component 特有环境变量来区分 小程序 和 H5 的环境：
// 判断小程序端const ismp = typeofPage=== “function” && typeofComponent=== “function”
对外按照小程序组件，以 K 为前缀暴露一个统一的组件名称，内部H5 端通过 weui 样式来适配，而小程序端直接使用内置组件。比如：
// 对外暴露：<KButton>// 小程序端：<wx-button>// H5 端：<button>+ weui
快速上手
kbone-ui 的第一期工作，已经基本完成。为了让用户快速上手，已经提供如下可以参考的基本信息：
kbone-ui 文档 wechat-miniprogram.github.io/kbone/docs/ui/intro/quickstart.html kbone-ui 示例 wechat-miniprogram.github.io/kboneui/ui/ kbone-ui 仓库 github.com/wechat-miniprogram/kbone-ui
现在的 UI 库是基于 Vue，考虑点主要是优先满足团队内部的基础开发和使用。后续会随着生态完善，计划提供对应 React 版本。
kbone-ui 和市面上大部分的其它 UI 库类似，提供了 codeSplit 和全局引用两种方式。
加载全部组件内容，并引入 weui 样式库
importKboneUIfrom'kbone-ui'import'kbone-ui/lib/weui/weui.css'Vue.use(KboneUI)
使用按需引入
importKButtonfrom'kbone-ui/lib/KButton.js'importKViewfrom'kbone-ui/lib/KView.js'import'kbone-ui/lib/weui/weui.css'Vue.use(KButton)Vue.use(KView)
UI 原理
kbone-ui 目前是基于 kbone 来实现的小程序和 Web 端的同构方案。基本方案是通过 KView 组件来模拟大部分交互 UI 的功能组件内容，比如像 KActionSheet、KToast、KToptips 等。
另外，考虑到 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 的版本更新还加上了，比较重要的三个视图层组件：swiper、movable-view、scroll-view，以及其他交互组件 slider、dialog
整体来说，kbone-ui 切入的角度和 taro、mpvue 等跨端式的方式不太一样，使用 kbone-ui 可以在不脱离已有框架(Vue, React)下，实现多端开发目的，而不需要像 taro/mpvue 之类需要重新学一遍语法和框架。目前 kbone-ui 还处于比较早期状态，前期打算是对齐微信小程序实现好用易用组件，后续，也会持续维护提供更多更好用的组件。
关于本文 作者：@villainhr 原文：https://developers.weixin.qq.com/community/personal/oCJUsw1EjJM0EBZip-Wl1Jmtt_3Y
@binnie曾分享过