微信小程序官方多端脚手架 - Kbone的起步
发布于 4 年前 作者 lijun 3753 次浏览 来自 分享

kbone的基础安装及介绍,这里不再过多介绍,感兴趣的童鞋可以看看官方的 文章gitbook(文档)

什么是Kbone?

Kbone 是由 微信小程序 官方团队推出的 H5微信小程序 同构脚手架,可使同一套代码分别运行在 H5微信小程序 平台,极大减少了开发者(前端)的工作量。

为什么是Kbone?

相信一部分童鞋在之前已经了解过同类型的其他脚手架,如 uni-appmpvuetrao 等。既然市面上已经有这么多脚手架了,为什么 微信小程序 官方依然会推出 kbone 呢?难道是他们并不知道有其他的脚手架?

答案是否定的,他们当然也知道其他脚手架,也尝试使用过。

编者之前也就一些问题咨询过相关的开发人员,也就一些问题进行过讨论。在之后也进行过一些尝试。得出结论:在 微信小程序 环境中,Kbone 所编译出来的代码,运行效率高于其他脚手架(不愧是你们,微信小程序的官方开发团队,居然还偷偷做了优化)。

不过目前,Kbone 仅支持编译成 H5微信小程序,如果需要上其他平台,如 支付宝小程序、__抖音小程序__等等,估计还需要等一等(不过,猜测近段时间不会支持吧)。

这里推荐 祺爸💎 的文章《微信小程序转其他端小程序实战》,也是一个不错的解决方案。仅需要将 Kbone 预先编译成 微信小程序,然后再转成其他小程序即可。

当然,如果你说的是APP,那自己想办法吧。

Kbone起步的一些坑

一、


这应该是一个残留bug,之前是需要在__微信小程序__中使用 npm构建 安装一些库的,但是目前来看已经不需要了,删除 miniprogram-element 文件夹即可

二、


这也是一个老问题了,每次修改 Kbone 代码重新编译后,微信开发者工具 均会报这个错误。这是因为在 Kbone 中未配置 微信小程序AppID,在 Kbone 项目中找到 build/miniprogram.config.js ,然后拉到最下面,填写 projectConfig: { appid: ‘’ } 的值即可(需退出编译模式,重新编译)

例:

// 项目配置,会被合并到 project.config.json
    projectConfig: {
        projectname: 'kbone-template-vue',
        appid: 'wxd****7ff****8f4f',
    }

Kbone的后续

当然,目前 Kbone 依然有很多不足,甚至可以说匪夷所思的地方,但是毕竟是一个新兴脚手架,在可以理解的范围内。Kbone 的团队也在持续优化、维护、升级,相信未来能更好~

写在后面

至此,Kbone 的项目算是成功搭建,并且正常运行了,如果在使用过程中,有遇到其他问题,欢迎来此文章提出,编者会尽量回复。

最后,推荐一下 pohunchn/kbone-vue 的模版,此模版是基于官方kbone-vue模版所制作的 vue 模版,可使上手更为方便(不用再手动去修改 AppID 啦,也能直接去掉繁琐的 Eslint 啦!)。

vue init pohunchn/kbone-vue my-app

执行以上方法即可安装,是不是很简单!

3 回复

这个logo真的是一言难尽啊

回到顶部