江苏龙网

  1. 首页 > 人文 > >

最美分享Coder■Web 端同构解决方案——kbone，官方出品，微信小程序和

介绍最近在琢磨一些小程序开发和移动web开发 ， 偶然间在Github上看到了这样一个项目——kbone ， 一个致力于微信小程序和Web端同构的解决方案 。 微信小程序的底层模型和Web端不同 ， 我们想直接把Web端的代码挪到小程序环境内执行是不可能的 。 kbone的诞生就是为了解决这个问题 ， 它实现了一个适配器 ， 在适配层里模拟出了浏览器环境 ， 让Web端的代码可以不做什么改动便可运行在小程序里 。
最美分享Coder■Web 端同构解决方案——kbone，官方出品，微信小程序和
文章图片
Github和文档https://github.com/Tencent/kbone
【最美分享Coder■Web 端同构解决方案——kbone，官方出品，微信小程序和】https://wechat-miniprogram.github.io/kbone/docs/
kbone的优势因为kbone是通过提供适配器的方式来实现同构 ， 所以它的优势很明显：
大部分流行的前端框架都能够在kbone上运行 ， 比如Vue、React、Preact等 。 支持更为完整的前端框架特性 ， 因为kbone不会对框架底层进行删改（比如Vue中的v-html指令、Vue-router插件） 。 提供了常用的dom/bom接口 ， 让用户代码无需做太大改动便可从Web端迁移到小程序端 。 在小程序端运行时 ， 仍然可以使用小程序本身的特性（比如像live-player内置组件、分包功能） 。 提供了一些Dom扩展接口 ， 让一些无法完美兼容到小程序端的接口也有替代使用方案（比如getComputedStyle接口） 。 使用为了可以让开发者可以更自由地进行项目的搭建 ， 以下提供了三种方式 ， 任选其一即可：
使用kbone-cli快速开发对于新项目 ， 可以使用kbone-cli来创建项目 ， 首先安装kbone-cli:
npminstall-gkbone-cli创建项目：
kboneinitmy-app进入项目 ， 按照README.md的指引进行开发：
//开发小程序端npmrunmp//开发Web端npmrunweb//构建Web端npmrunbuild使用模板快速开发除了使用kbone-cli外 ， 也可以直接将现有模板clone下来 ， 然后在模板基础上进行开发改造：
Vue项目模板React项目模板kbone-ui项目模板Preact项目模板Omi项目模板Omi是腾讯前端跨框架跨平台框架
手动配置开发此方案基于webpack构建实现 ， 如果你不想要使用官方提供的模板 ， 想要更灵活地搭建自己的项目 ， 又或者是想对已有的项目进行改造 ， 则需要自己补充对应配置来实现kbone项目的构建 。
一般需要补充两个配置：
构建到小程序代码的webpack配置使用webpack构建中使用到的特殊插件mp-webpack-plugin配置详细的配置可以查看官方文档
kbone-uikbone-ui是一个能同时支持小程序(kbone)和vue框架开发的多端UI库 。
即可以基于kbone同时开发小程序和H5 ， 也可以单独使用开发H5应用 。 支持以Vue语法来支持H5端和小程序端运行对齐微信weui样式组件
最美分享Coder■Web 端同构解决方案——kbone，官方出品，微信小程序和
文章图片
总结Web和小程序同构的解决方案有很多 ， 比如之前有介绍过的uni-app ， 京东的taro都是非常成熟的解决方案 ， 但是任何方案都会有其优势也都不能完全完美的解决所有问题 ， 各有优劣 ， 选择一个比较适合自己项目的方案才是最好的！


    推荐阅读


    上一篇：[安卓中国]Neo 855版 8+128 仅售 2098 元，备用机的首选，iQOO

    下一篇：[科技始发站]Mac双系统，真香，老笔记本加装1T固态硬盘，顺便安装win10