kbone

致力于微信小程序和 Web 端同构的解决方案
授权协议 BSD 3-Clause
开发语言 JavaScript
所属分类 手机/移动开发、 微信小程序
软件类型 开源软件
地区 国产
投 递 者 牧信厚
操作系统 跨平台
开源组织 腾讯
适用人群 未知
 软件概览

kbone 是一个致力于微信小程序和 Web 端同构的解决方案。

微信小程序的底层模型和 Web 端不同,我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题,它实现了一个适配器,在适配层里模拟出了浏览器环境,让 Web 端的代码可以不做什么改动便可运行在小程序里。

这里有个简单的代码片段https://developers.weixin.qq.com/s/R9Hm0Qm67Acd,可以使用开发者工具打开看看效果。

因为 kbone 是通过提供适配器的方式来实现同构,所以它的优势很明显:

  • 大部分流行的前端框架都能够在 kbone 上运行,比如 Vue、React、Preact 等。
  • 支持更为完整的前端框架特性,因为 kbone 不会对框架底层进行删改(比如 Vue 中的 v-html 指令、Vue-router 插件)。
  • 提供了常用的 dom/bom 接口,让用户代码无需做太大改动便可从 Web 端迁移到小程序端。
  • 在小程序端运行时,仍然可以使用小程序本身的特性(比如像 live-player 内置组件、分包功能)。
  • 提供了一些 Dom 扩展接口,让一些无法完美兼容到小程序端的接口也有替代使用方案(比如 getComputedStyle 接口)。
  • 新建一个kbone项目 将代码对应拷贝过去 注: package.json:     依赖需要修改,将我们的依赖添加进去,有重复的删除我们这边的     注意一个Bable的版本可能会产生冲突,将我们dependencies的"babel-loader"版本改成和kbone里面生成的同样的版本即可 小程序中不支持<style scoped>?? 突然会包缺少一个文件sitemap.json,之前没

  • 前些天在微信上收到了微信开发者公众号的文章推送《揭开微信小程序Kbone的神秘面纱》,心想:微信小程序有新框架了?抱着学习的态度点进去看了一眼,看过之后觉得这框架也太宠开发者了吧,不愧是微信团队出品。 原来这个框架早在去年就已经发布了,看完只恨自己没有早点知道消息开始学习这个框架。我写本文的目的也是为了跟个风,想要让更多的人能够知道这个框架,感受它的便利,希望好学的你可以停下脚步看看~ Kbone

  • Kbone是什么? 小程序作为一种新兴地链接用户与服务的方式,相信大家都或多或少接触过。对于开发者来说,它是一种类似 Web 但又不同于 Web 的开发模式,它提供了一套自定义的 API 和文件组织方式,这无疑带给开发者一定的学习成本和维护成本,所以我们也在尝试能否提供一个方案来抹平这个差异。——引自Kbone作者june在云加社区微信群中的分享 随着小程序的发展,Web 端和小程序同构的呼声也越

  • Kbone踩坑记录 tabbar 所有 tabbar 的页面在注册路由时,需要有一个 / 路径,比如,我们把 article 页面作为一个 tab 页,那么我们需要改写一下注册的路由写法: const router = new Router({ mode: 'history', routes: [ // 新增 / 指向和 /articles 一致 { path:

  • 取消git代理就好了 git config --global --unset http.proxy git config --global --unset https.proxy kbone init my-app 跳转目录 cd my-app 开发小程序 npm run mp 开发 Web npm run web 发布 Web npm run build 恭喜你! "my-app"

  • 1.kbone官方文档: https://wechat-miniprogram.github.io/kbone/docs/ 2.kbone安装使用: https://wechat-miniprogram.github.io/kbone/docs/ui/intro/quickstart.html 3.kbone模板(vue方向) https://github.com/wechat-miniprogr

 相关资料
  • 本文向大家介绍微信小程序 slot踩坑的解决,包括了微信小程序 slot踩坑的解决的使用技巧和注意事项,需要的朋友参考一下 今天在使用微信小程序 component 里的 slot 时发现,当只用一个 slot 并且将 slot 命名后,页面中调用这个 slot 并不会加载进来。 研究尝试后发现,如果想要使用命名的方式调用单个 slot ,也需要像调用多个 slot 的方式 在 component

  • 本文向大家介绍uniapp微信小程序:key失效的解决方法,包括了uniapp微信小程序:key失效的解决方法的使用技巧和注意事项,需要的朋友参考一下 uniapp 代码 编译到 微信小程序 貌似不支持 :key="item[urlKey]" 这种语法 解决方案: 使用computed就可以解决了 到此这篇关于uniapp微信小程序:key失效的解决方法的文章就介绍到这了,更多相关uniapp小程

  • 本文向大家介绍微信小程序http连接访问解决方案的示例,包括了微信小程序http连接访问解决方案的示例的使用技巧和注意事项,需要的朋友参考一下 HTTP + 加密 + 认证 + 完整性保护 = HTTPS,小程序考虑到信息安全的问题,选用了更为稳定安全的https 来进行信息传递。 HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一种就是确认网站的真实性。

  • 本文向大家介绍微信小程序 加载 app-service.js 错误解决方法,包括了微信小程序 加载 app-service.js 错误解决方法的使用技巧和注意事项,需要的朋友参考一下 微信小程序开发过程中出现错误,经过一番思考解决此问题,这里给大家提醒下! 加载 app-service.js 错误 WAService.js:2 不要在 undefined.js 注册多个Page APP-SERVI

  • 本文向大家介绍微信小程序new Date()方法失效问题解决方法,包括了微信小程序new Date()方法失效问题解决方法的使用技巧和注意事项,需要的朋友参考一下 iOS系统对js中的new Date()方法有格式要求 正确写法应该是 而实际应该过程中日期格式大部分都是2019-07-24这种,所以在实际应用过程中需要用正则对字符串进行预处理 在小程序开发过程中用到一个日期转换方法,然而苹果手机就

  • 本文向大家介绍微信小程序调用wx.getImageInfo遇到的坑解决,包括了微信小程序调用wx.getImageInfo遇到的坑解决的使用技巧和注意事项,需要的朋友参考一下 这几天做到微信小程序详情页分享的功能,需要把原页面的一些参数带到分享页,然后在分享页需要获取图片的宽高等基本信息。 1.先说分享传参的方式: 在onShareAppMessage方法里面返回的path里面可以带参数传过去,具

  • 本文向大家介绍微信小程序tabbar不显示解决办法,包括了微信小程序tabbar不显示解决办法的使用技巧和注意事项,需要的朋友参考一下 微信小程序tabbar不显示解决办法 微信小程序在测试tabbar的时候怎么都不显示。 我就不贴api了。直接上代码 这个json看了一天,直觉告诉我没什么问题。实际上也没什么问题。 但是坑爹的一幕来了,tabbar怎么都不显示。最后发现是 看标红的问题。第一行绝

  • @megalo/target 的 platform 设置成 wechat,mini-css-extract-plugin 提取文件后缀改成微信小程序的 wxss。 const createMegaloTarget = require( '@megalo/target' ) const compiler = require( '@megalo/template-compiler' ) const M