评论

久等啦,你要的 Kbone-API 来了

值得拥有的 Kbone-API

Kbone 推出已经有一段时间啦,使用 Kbone 的你是否有这样的烦恼?

对于上传图片这种需求,需要进行兼容处理,Web 端使用 XMLHttpRequest,小程序使用 wx.uploadFile。

这样处理起来,对于开发者来说比较麻烦,需要自己维护兼容的代码,比较费力。

为了让 Kbone 开发者可以更加顺畅的使用,我们推出了 Kbone-API 来帮开发者解决兼容问题。

你一定想知道 Kbone-API 是什么?简单来说——

Kbone-API 是一个能同时支持小程序和 Web 端的多端 API 库。

特征

  • 针对基于 Kbone 的多端开发,满足在 Web 上直接使用小程序相关 API
  • 不依赖 Kbone 和 Kbone-UI,一个无依赖的小程序 API 的跨端库
  • 完整对齐 wx[apis]
  • 同时支持 promise 化和 callback 调用

快速上手

Kbone-API 上手十分简单,只需要两步

第一步:下载

npm install kbone-api

第二步:使用

通过模块的方式直接导出模块并使用:

// 引用
import kboneAPI from 'kbone-api'
// 直接使用
kboneAPI.request()
kboneAPI.showToast()
kboneAPI.showModal()

为了方便 Vue 开发,可以直接使用 Vue.use(kboneAPI) 来设置全局对象。

# main.js
import Vue from 'vue'

Vue.use(kboneAPI)

# logic code

export default {
  name: "LoginComponents",
  methods: {
      gotologin() {
          return this.$api.login().then(() => {
              this.$api.showToast({
                  title: "登录成功",
              })
          })
      },
      getSetting() {
          // 获取用户设置
          return this.$api.getSetting()
              .then(res => {
                  this.$api.showToast({
                      title: res.nickName || "零度的田"
                  })
              })
      }
  }
}

到这里,你已经学会 Kbone-API 啦~



最后一次编辑于  2020-05-21  
点赞 2
收藏
评论

6 个评论

  • 四哥派
    四哥派
    2020-05-21

    一看就会,一用就废~~~

    2020-05-21
    赞同 2
    回复 2
  • kardon
    kardon
    2020-10-31

    kbone 可以 用 IVIEW 等其他VUE 框架替代 或者引入 吗?

    2020-10-31
    赞同
    回复
  • 焦哥@优课达
    焦哥@优课达
    2020-08-16

    在 ts 工程里如何引入呢,会提示找不到 types 呢


    Could not find a declaration file for module 'kbone-api'. '/Users/joe/work/kpan-miniapp/node_modules/kbone-api/lib/index.js' implicitly has an 'any' type.
      Try `npm install @types/kbone-api` if it exists or add a new declaration (.d.ts) file containing `declare module 'kbone-api';`t
    
    2020-08-16
    赞同
    回复 1
    • 秋明
      秋明
      2021-01-28回复秋明
      vv
      2021-01-28
      回复
  • 石鑫元
    石鑫元
    2020-06-17

    我该用 this.$api.setStorageSync 保存数据呢,还是应该 放到 this.$store 里呢

    2020-06-17
    赞同
    回复 1
    • 牛715875
      牛715875
      发表于移动端
      2022-08-28
      l
      2022-08-28
      回复
  • 石鑫元
    石鑫元
    2020-06-16

    请在不要忘记在main.mp.js中引入!!!

    刚上手,不习惯,忘记引入了,找了半天不成功的原因

    我是个新手废柴

    2020-06-16
    赞同
    回复
  • 拾忆
    拾忆
    2020-05-21

    用起来真香

    2020-05-21
    赞同
    回复
登录 后发表内容