评论

[kbone-ui]打通 H5/微信小程序 多端UI库

kbone-ui 的方式是以小程序内置组件和拓展组件为对齐目标, 使用 weui 样式提供 H5 和 小程序体验一致的跨端 UI 组件库。

一开始做 kbone-ui 的初衷是为了减少 kbone 的上手难度,需要提供多端的样式统一的 UI 组件库。现在,微信这边已经有了 weui 公共样式库来支持 Web 端的对外展示,其中,小程序本身基础组件也是由 weui 重构团队来做的。所以,为了达到这个目标,kbone-ui 的方式是以小程序内置组件和拓展组件为对齐目标, 使用 weui 样式提供 H5 和 小程序体验一致的跨端 UI 组件库。

主要思路是通过 PageComponent 特有环境变量来区分 小程序 和 H5 的环境:

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

对外按照小程序组件,以 K 为前缀暴露一个统一的组件名称,内部H5 端通过 weui 样式来适配,而小程序端直接使用内置组件。比如:

// 对外暴露:
<KButton>

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

// H5 端:
<button> + weui

快速上手

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 原理

kbone-ui 目前是基于 kbone 来实现的小程序和 Web 端的同构方案。基本方案是通过 KView 组件来模拟大部分交互 UI 的功能组件内容,比如像 KActionSheetKToastKToptips 等。

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

  • KView(div) 组件: 直接通过 KView + css 的方式来模拟一些常用组件,比如像 progressrich-texticonActionSheet 等。这些实现起来比较容易,可以直接通过 KView 实现两端复用
  • 表单组件: 对于一些表单组件,kbone 默认是直接支持 input[type=“xx”] 来模拟,不过,像 switch, editor 等还是需要通过 wx-xxx 组件来针对特有平台调用。
  • 视图组件: swiper, picker-view 这类在 View 层具有强 UI 交互的组件,很难做到两端通用。主要小程序是双线程模型,用户自定义组件无法独立运行在 View 层。对于这类组件,只能通过 Web 端向小程序端同属性适配的方式来做。

最近 kbone-ui 的版本更新还加上了,比较重要的三个视图层组件:swipermovable-viewscroll-view,以及其他交互组件 sliderdialog

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

最后一次编辑于  2020-01-20  
点赞 16
收藏
评论

15 个评论

  • 子不语
    子不语
    2020-01-20

    我的PR!!!我太难了,一直卡着,我连写文章都没法写……(kbone-ui真香,谁用谁知道)

    --↓↓👍如果觉得有帮助的话请点个【赞】吧(唏嘘也有小尾巴了,可惜是假的)

    2020-01-20
    赞同 6
    回复 2
    • 走哪
      走哪
      2020-02-18
      哈哈,me too!
      2020-02-18
      回复
    • 子不语
      子不语
      2020-02-19回复走哪
      2020-02-19
      回复
  • 马尚尚
    马尚尚
    2020-01-20

    官大人出品,必是精品,赞就完事了。



    2020-01-20
    赞同 2
    回复
  • 木林
    木林
    2020-03-18

    谁用谁就掉坑里,我都爬了一次又一次了。

    2020-03-18
    赞同 1
    回复
  • 小满
    小满
    2020-01-20

    先赞后看,美滋滋

    2020-01-20
    赞同 1
    回复
  • Hanks🇨🇳
    Hanks🇨🇳
    2020-01-20
    厉害炸了!虽然我不用,但是还是支持一下
    2020-01-20
    赞同 1
    回复
  • Mr.Zhao
    Mr.Zhao
    2020-01-20

    怎么不是binnie发的

    2020-01-20
    赞同 1
    回复 2
  • 热茶
    热茶
    2020-06-17

    这个ui框架里是px单位,在小程序中不是一定要用rpx吗?

    2020-06-17
    赞同
    回复
  • ρёρsi
    ρёρsi
    2020-04-29

    谁用谁掉坑

    2020-04-29
    赞同
    回复
  • Nana
    Nana
    2020-03-20

    有没有案例教程呀?光看文档看不懂。。


    2020-03-20
    赞同
    回复 1
    • 袁胜
      袁胜
      2020-08-13
      你找到案例教程了吗
      2020-08-13
      回复
  • wei
    wei
    2020-03-09

    想问下,当期kbone貌似没有提供对图标的支持,在kbone中引入第三方的库要怎样才能在小程序中显示?,这两个一个是web端的效果,一个是小程序打开的效果

    2020-03-09
    赞同
    回复

正在加载...

登录 后发表内容