Kbone:微信官方推出 Web 前端和小程序统一框架

更新日期: 2020-02-26 阅读: 12.7k 标签: 微信

最近微信官方重磅推出了一个统一 Web 前端小程序框架 ——  Kbone   。

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

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


Kbone 是什么?

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

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

这样,我们就可以借助 Kbone 快速实现 Web 项目转化为微信小程序项目。


Kbone 有哪些优势?

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

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

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

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

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

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


Kbone 的特点

“市面上同构的方案那么多?我为什么要选择 Kbone 呢?”它有哪些特点或者优势呢?

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

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

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

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

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


Kbone 的使用方法,参见官方文档链接: https://developers.weixin.qq.com/miniprogram/dev/extended/kbone/

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/7792

相关推荐

微信跳转外部浏览器打开的代码实现

在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况。这时需要微信跳转外部浏览器打开页面的功能,目前ios只能通过遮罩层来提示用户,对于安卓可以直接跳转外面默认浏览器

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

解决微信公众平台网页授权两次或多次重定响应问题

在做微信公众平台网页授权时,发现每次请求授权链接时都会重定向链接redirect_uri都会自动请求两次,由于并发导致了一些问题,那么,为什么会请求两次呢?,调试时发现会访问两次,一次是301,页面重定向了,第二次跟第一次就差这个参数connect_redirect=1

微信内打开外部默认浏览器下载app

使用微信打开网址时,对于安卓端而言无法打开常用下载软件,手机APP等。大家常用的方法是,弹出一个遮罩提示用户在新的浏览器窗口打开。 但是我们基于微信接口开发了一款全新的手机端微信中推广助手,用户在微信中点击的话

用cookie解决新版微信中H5页面底部白条问题

实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。

解决微信返回上一页.页面不刷新问题

在项目中遇到的一个神奇的 BUG,点击「返回」按钮返回到上一页,但是页面却没有刷新。这是 ios 微信的缓存机制造成的,跳转到下一页时仍然会缓存当前页。

解决微信返回上一页之后,页面不刷新

由于项目中使用了vue,使用了gulp和普通的页面跳转。并没有引入vue-router。所以不能使用 watch监控$router。微信公众号ios点击后退按钮,优选读取缓存,所以vue里的生命周期不会在进行调用。所以项目中执行隐藏分享qq,空间。等功能不被再次执行。

解决vue在ios微信“复制链接”始终为初始地址的问题

ios因为微信内置浏览器对 history 的支持不够全面 所以对于开启了 History Mode 的 SPA 应用,只会保存第一条 url 只要每个页面都刷新一次,判断环境为iOS的微信环境时候,使用重定向跳转的方式

套路!陌生美女加微信好友,提出激情裸聊,然后……

一个月黑风高的晚上,你独自刷着朋友圈,突然一个陌生女子要求。添加好友,你第一反应是什么?更要命的是没聊几句话,对方居然要求“裸聊”!

微信活码技术如何解决微信个人号被动加好友上限加好友异常(微信群100人限制)

微信群营销已经成为主流的营销方式,我们都知道微信群未满100人之前可以分享群二维码,让我们的粉丝通过扫码进群,但是人数超过100后,发出的二维码就失效了,无法再次扫码进群,因此,很多人会有微信群满100人怎么再加人

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!