听说最近微信官方推出了一个统一 Web 前端和小程序的框架 —— Kbone ,特意去看了下。。。

为什么微信要搞Kbone?

微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代码挪到小程序环境内执行。

Kbone 的诞生就是为了解决这个问题,它实现了一个适配器,在适配层里模拟出了浏览器环境,让 Web 端的代码可以不做什么改动,便可运行在小程序里。

那么Kbone 有哪些优势?

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

大部分流行的前端框架都能够在 kbone 上运行,比如 Vue、React、Preact 等。

支持更为完整的前端框架特性,因为 kbone 不会对框架底层进行删改(比如 Vue 中的 v-html 指令、Vue-router 插件)。

提供了常用的 dom/bom 接口,让用户代码无需做太大改动便可从 Web 端迁移到小程序端。

在小程序端运行时,仍然可以使用小程序本身的特性(比如像 live-player 内置组件、分包功能)。

提供了一些 Dom 扩展接口,让一些无法完美兼容到小程序端的接口也有替代使用方案(比如 getComputedStyle 接口)。

到底如何选择?

业内其实已经出现了很多关于同构的解决方案了,每个方案都有自己的优劣,不存在能够完美解决所有问题的方案。kbone 也一样,它的优势在上面提到过,而它的不足也是它的实现原理带来的。kbone 是使用一定的性能损耗,来换取更为全面的 Web 端特性支持。

所以关于性能方面,如果你对小程序的性能特别苛刻,建议直接使用原生小程序开发;如果你的页面节点数量特别多(通常在 1000 节点以上),同时还要保证在节点数无限上涨时仍然有稳定的渲染性能的话,可以尝试一下业内采用静态模板转译的方案;其他情况就可以直接采用 kbone 了。

Kbone 的使用方法,还是参见官方文档吧:

https://developers.weixin.qq.com/miniprogram/dev/extended/kbone/

学不动了!微信官方推出 Web 前端和小程序统一框架 Kbone的更多相关文章

  1. web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝

    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...

  2. web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍

    web前端Vue+Django rest framework 框架 生鲜电商项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...

  3. web前端之HTML的大框架(body元素与frameset元素)

    web前端之HTML的大框架      body元素与frameset元素 对于从事html的人员来说,我们一般熟悉的框架是先声明html ,然后在<html>标签对里包着<head ...

  4. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  5. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  6. (转)快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  7. JAVA版开源微信管家—JeeWx捷微3.2版本发布,支持微信公众号,微信企业号,支付窗、小程序

    JeeWx捷微3.2微信企业号升级版本发布^_^ JeeWx捷微V3.2——多触点管理平台(支持微信公众号,微信企业号,支付窗.小程序)   JeeWx捷微V3.2.0版本引入了更多新特性,支持微信公 ...

  8. 微信小程序 wafer2框架摘要

    微信小程序 wafer2框架摘要 帮助文档:https://github.com/tencentyun/wafer2-startup/wiki 使用了knex.js进行数据库交互,使用了koa.js进 ...

  9. 《Web前端开发》等级考试样题~以国家“1+X”职业技能证书为标准,厚溥推出Web前端开发人才培养方案

    1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http ...

随机推荐

  1. 微信小程序爬坑记

    1.this.setData修改数组里的值1).data: { hide:[true,true] },this.setData({ 'hide[0]': false});2).var str = &q ...

  2. spring boot+spring security集成以及Druid数据库连接池的问题

    贴工程目录,其中bll目录下是service+dao层,common是一些公用的模块及功能类,web是controller层 用到了druid及Redis,工具及配置类目录(本文不介绍如何配置drui ...

  3. 面试:为了进阿里,重新翻阅了Volatile与Synchronized

    该系列文章收录在公众号[Ccww技术博客],原创技术文章早于博客推出 在深入理解使用Volatile与Synchronized时,应该先理解明白Java内存模型 (Java Memory Model, ...

  4. Effective Objective-C 的读书笔记

    本文主要是摘录了 <Effective Objective-C 2.0>一书中提到的编写高质量iOS 代码的几个方法. 1 熟悉Objective -C 1.1 OC 起源 OC 为C语言 ...

  5. C Primer Plus 学习笔记

    随笔: 1)C语言中%3d%2d什么意思? 格式化规定字符, 以"%"开始, 后跟一个或几个规定字符,用来确定输出内容格式.在"%"和字母之间插进数字表示最大场 ...

  6. 《C++深度解析》课程目录

    <C++深度解析>课程目录 第1课 - 学习 C++ 的意义 第2课 - C到C++的升级     第3课 - 进化后的const分析 第4课 - 布尔类型和引用 第5课 - 引用的本质分 ...

  7. 第3章 01 python数字类型即操作

    浮点数类型 通过round函数比较浮点数之间的比较关系 复数类型 数值运算函数 小结 天天向上的力量 千分之一的力量 千分之五和百分之一的力量 在1的基础上增加天天向上的参数 在1的基础上减去天天向下 ...

  8. docker的使用场景和背景了解

    Docker的使用场景以及优缺点 https://blog.csdn.net/zhangdekui/article/details/81541519 浅析Docker容器的应用场景 https://w ...

  9. redis并发问题2

    转自https://mp.weixin.qq.com/s?__biz=MzI1NDQ3MjQxNA==&mid=2247485464&idx=1&sn=8d690fc6f878 ...

  10. maven使用心得

    1.一个项目下创建module,需要在project的pom下加入module,这个工程的pom <?xml version="1.0" encoding="UTF ...