{"id":13439465,"url":"https://github.com/Tencent/kbone","last_synced_at":"2025-03-20T08:31:08.062Z","repository":{"id":37665098,"uuid":"195499749","full_name":"Tencent/kbone","owner":"Tencent","description":"一个致力于微信小程序和 Web 端同构的解决方案","archived":false,"fork":false,"pushed_at":"2025-03-13T06:54:42.000Z","size":7064,"stargazers_count":4853,"open_issues_count":22,"forks_count":461,"subscribers_count":96,"default_branch":"develop","last_synced_at":"2025-03-19T19:01:52.998Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tencent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-06T05:04:50.000Z","updated_at":"2025-03-19T15:24:33.000Z","dependencies_parsed_at":"2023-11-15T08:24:01.480Z","dependency_job_id":"e969b867-02b3-4a8f-b1d7-2871305cac49","html_url":"https://github.com/Tencent/kbone","commit_stats":{"total_commits":1028,"total_committers":22,"mean_commits":46.72727272727273,"dds":"0.10700389105058361","last_synced_commit":"a50f9c533bfd2b106451403b6331c0a3e13000e8"},"previous_names":["wechat-miniprogram/kbone"],"tags_count":598,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fkbone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fkbone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fkbone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fkbone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tencent","download_url":"https://codeload.github.com/Tencent/kbone/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244541795,"owners_count":20469240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T03:01:14.145Z","updated_at":"2025-03-20T08:31:08.057Z","avatar_url":"https://github.com/Tencent.png","language":"JavaScript","readme":"# kbone\n\nkbone 是一个致力于微信小程序和 Web 端同构的解决方案。\n\n## 简介\n\n微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。\n\n这里有个简单的[代码片段](https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)：[https://developers.weixin.qq.com/s/R9Hm0Qm67Acd](https://developers.weixin.qq.com/s/R9Hm0Qm67Acd)，可以使用开发者工具打开看看效果。\n\n因为 kbone 是通过提供适配器的方式来实现同构，所以它的优势很明显：\n\n* 大部分流行的前端框架都能够在 kbone 上运行，比如 Vue、React、Preact 等。\n* 支持更为完整的前端框架特性，因为 kbone 不会对框架底层进行删改（比如 Vue 中的 v-html 指令、Vue-router 插件）。\n* 提供了常用的 dom/bom 接口，让用户代码无需做太大改动便可从 Web 端迁移到小程序端。\n* 在小程序端运行时，仍然可以使用小程序本身的特性（比如像 live-player 内置组件、分包功能）。\n* 提供了一些 Dom 扩展接口，让一些无法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。\n\n## 使用\n\n为了可以让开发者可以更自由地进行项目的搭建，以下提供了三种方式，任选其一即可：\n\n### 使用 kbone-cli 快速开发\n\n对于新项目，可以使用 `kbone-cli` 来创建项目，首先安装 `kbone-cli`:\n\n```\nnpm install -g kbone-cli\n```\n\n创建项目：\n\n```\nkbone init my-app\n```\n\n进入项目，按照 README.md 的指引进行开发：\n\n```\n// 开发小程序端\nnpm run mp\n\n// 开发 Web 端\nnpm run web\n\n// 构建 Web 端\nnpm run build\n```\n\n\u003e PS：项目基于 webpack 构建，关于 webpack 方面的配置可以[点此查看](https://webpack.js.org/configuration/)，而关于小程序构建相关的详细配置细节可以[参考此文档](https://wechat-miniprogram.github.io/kbone/docs/guide/tutorial.html)。\n\n### 使用模板快速开发\n\n除了使用 kbone-cli 外，也可以直接将现有模板 clone 下来，然后在模板基础上进行开发改造：\n\n* [Vue 项目模板](https://github.com/wechat-miniprogram/kbone-template-vue)\n* [React 项目模板](https://github.com/wechat-miniprogram/kbone-template-react)\n* [kbone-ui 项目模板](https://github.com/wechat-miniprogram/kbone-template-kboneui)\n* [Preact 项目模板](https://github.com/wechat-miniprogram/kbone-template-preact)\n* [Omi 项目模板](https://github.com/omijs/template-kbone)\n\n项目 clone 下来后，按照项目中 README.md 的指引进行开发。\n\n### 手动配置开发\n\n此方案基于 webpack 构建实现，如果你不想要使用官方提供的模板，想要更灵活地搭建自己的项目，又或者是想对已有的项目进行改造，则需要自己补充对应配置来实现 kbone 项目的构建。\n\n一般需要补充两个配置：\n\n* 构建到小程序代码的[ webpack 配置](https://webpack.js.org/configuration/)\n* 使用 webpack 构建中使用到的特殊插件[ mp-webpack-plugin 配置](https://wechat-miniprogram.github.io/kbone/docs/config/)\n\n[点此可以查看](https://wechat-miniprogram.github.io/kbone/docs/guide/tutorial.html)具体配置方式和操作流程。\n\n## kbone-ui\n\n[kbone-ui](https://github.com/wechat-miniprogram/kbone-ui) 是一个能同时支持 小程序(kbone) 和 vue 框架开发的多端 UI 库。\n\n* 即可以基于 `kbone` 同时开发小程序和 H5，也可以单独使用开发 H5 应用。\n* 支持以 Vue 语法来支持 H5 端和小程序端运行\n* 对齐 [微信weui](https://weui.io) 样式组件\n\n\n## 文档\n\n更为详细的说明和指引，可点击[查看文档](https://wechat-miniprogram.github.io/kbone/docs/)。\n\n\u003e PS：如果文档无法访问，可尝试访问[备份文档镜像](https://developers.weixin.qq.com/miniprogram/kbone/docs/)。\n\n## 问题\n\n此方案虽然将整个 Web 端框架包含进来并提供了适配层，但是也不是银弹，无法满足所有场景，具体限制可参考[问题文档](https://wechat-miniprogram.github.io/kbone/docs/qa/)。如果还遇到其他问题，可在 [issue](https://github.com/wechat-miniprogram/kbone/issues) 中反馈。\n\n## 选择\n\n业内其实已经出现了很多关于同构的解决方案了，每个方案都有自己的优劣，不存在能够完美解决所有问题的方案。kbone 也一样，它的优势在上面提到过，而它的不足也是它的实现原理带来的。kbone 是使用一定的性能损耗来换取更为全面的 Web 端特性支持。\n\n所以关于性能方面，如果你对小程序的性能特别苛刻，建议直接使用原生小程序开发；如果你的页面节点数量特别多（通常在 1000 节点以上），同时还要保证在节点数无限上涨时仍然有稳定的渲染性能的话，可以尝试一下业内采用静态模板转译的方案；其他情况就可以直接采用 kbone 了。\n\n## 贡献者\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://github.com/JuneAndGreen\"\u003e\u003cimg width=\"60px\"\n            src=\"https://avatars2.githubusercontent.com/u/7931744?s=60\u0026amp;v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://github.com/lastleaf\"\u003e\u003cimg width=\"60px\"\n            src=\"https://avatars2.githubusercontent.com/u/2016597?s=60\u0026amp;v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://github.com/dntzhang\"\u003e\u003cimg width=\"60px\"\n            src=\"https://avatars2.githubusercontent.com/u/7917954?s=60\u0026amp;v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://github.com/JimmyVV\"\u003e\u003cimg width=\"60px\"\n            src=\"https://avatars2.githubusercontent.com/u/12005455?s=60\u0026amp;v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://github.com/stephenml\"\u003e\u003cimg width=\"60px\"\n            src=\"https://avatars1.githubusercontent.com/u/11658803?s=60\u0026amp;v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://github.com/jayjliang\"\u003e\u003cimg width=\"60px\"\n            src=\"https://avatars1.githubusercontent.com/u/9363437?s=60\u0026amp;v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://github.com/ylx911229\"\u003e\u003cimg width=\"60px\"\n            src=\"https://avatars1.githubusercontent.com/u/18202235?s=60\u0026amp;v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"92px\"\u003e\u003ca target=\"_blank\" href=\"https://github.com/wechat-miniprogram/kbone/graphs/contributors\"\u003e感谢你们\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n查看[代码贡献规范](https://wechat-miniprogram.github.io/kbone/docs/guide/develop.html)。\n\n## 交流\n\n使用相关问题可在 [Kbone社区](https://developers.weixin.qq.com/community/minihome/mixflow/1213301129006825473) 发帖\n\n## License\n\n[MIT](./LICENSE)\n","funding_links":[],"categories":["HarmonyOS","大厂开源","JavaScript","框架","Projects List"],"sub_categories":["Windows Manager","腾讯开源","React.js"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTencent%2Fkbone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTencent%2Fkbone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTencent%2Fkbone/lists"}