java webpack web项目_官方出品,微信小程序和 Web 端同构解决方案——kbone
介绍
最近在琢磨一些小程序开发和移动web开发,偶然间在Github上看到了这样一个项目——kbone,一个致力于微信小程序和 Web 端同构的解决方案。微信小程序的底层模型和 Web 端不同,我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题,它实现了一个适配器,在适配层里模拟出了浏览器环境,让 Web 端的代码可以不做什么改动便可运行在小程序里。
Github和文档
https://github.com/Tencent/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:
npm install -g kbone-cli
创建项目:
kbone init my-app
进入项目,按照 README.md 的指引进行开发:
// 开发小程序端npm run mp// 开发 Web 端npm run web// 构建 Web 端npm run build
使用模板快速开发
除了使用 kbone-cli 外,也可以直接将现有模板 clone 下来,然后在模板基础上进行开发改造:
- Vue 项目模板
- React 项目模板
- kbone-ui 项目模板
- Preact 项目模板
- Omi 项目模板
Omi是腾讯前端跨框架跨平台框架
手动配置开发
此方案基于 webpack 构建实现,如果你不想要使用官方提供的模板,想要更灵活地搭建自己的项目,又或者是想对已有的项目进行改造,则需要自己补充对应配置来实现 kbone 项目的构建。
一般需要补充两个配置:
- 构建到小程序代码的 webpack 配置
- 使用 webpack 构建中使用到的特殊插件 mp-webpack-plugin 配置
详细的配置可以查看官方文档
kbone-ui
kbone-ui 是一个能同时支持 小程序(kbone) 和 vue 框架开发的多端 UI 库。
- 即可以基于 kbone 同时开发小程序和 H5,也可以单独使用开发 H5 应用。
- 支持以 Vue 语法来支持 H5 端和小程序端运行
- 对齐 微信weui 样式组件
总结
Web和小程序同构的解决方案有很多,比如之前有介绍过的uni-app,京东的taro都是非常成熟的解决方案,但是任何方案都会有其优势也都不能完全完美的解决所有问题,各有优劣,选择一个比较适合自己项目的方案才是最好的!
java webpack web项目_官方出品,微信小程序和 Web 端同构解决方案——kbone相关推荐
- Java Web项目,Android和微信小程序的初始页面配置
Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
- 微信小程序与web页面制作的区别
前言 最近在做一个微信小程序版的个人博客,本来我还有点胆颤,毕竟也没正儿八经的去学一下,不过我之前接触过,而且web方面(网页制作)的基础还可以,所以斗胆就试一试咯,到今天为止,微信小程序页面终于算是 ...
- 按钮点击_如何设置微信小程序按钮点击事件?
当我们需要点击按钮实现一个操作时,我们应该怎么设置?这里给大家介绍两种方法: 方法一:使用小程序模板,无需懂技术. 这种方法比较简单,你只需要选一个比较简单的小程序模板,比如「上线了」sxl.cn,在 ...
- 微信‘小程序’: web前端的春天 or 噩梦?
最近大家看到这张图是不是都快吐了?这两天一睁眼就被这张图刷屏了 喵了咪的,点到哪里都是这个报道和新闻 最近因为工作 和生活略忙,爱吹文章的我,更新频率也低了,在这里抱个歉,希望大家理解和包容,希望&q ...
- Java SpringMVC+H5飞翔的小鸟游戏微信小程序源码
源码介绍 Java SpringMVC+H5飞翔的小鸟游戏微信小程序源码 试验性质的一个微信小程序,用canvas做的一个类似flappy-bird的小游戏. 包含一些基本的功能:躲避障碍物.计分.排 ...
- 微信小程序与web前端的区别
1 引言 刚接触小程序,会有很多错误的思路去编写,为了避免在代码方面出错,本文将对前端和小程序做一个区分. 2 问题描述 微信小程序与web前端的区别. 3 算法描述 在web的html中我们一般都是 ...
- 【微信小程序】基于Java+uniapp框架开发的全开源微信小程序商城系统
应用介绍 基于Java+uniapp框架开发的全开源微信小程序商城系统,前端采用目前主流的uniapp框架开发,后端采用Java语言开发,前后端代码全部开源,减少重复造轮子,支持小程序商城秒杀.优惠券 ...
- 10分钟上线 - 利用函数计算构建微信小程序的Server端
摘要: 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播. 当 ...
- 口令红包-利用函数计算构建微信小程序的server端
摘要: 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播. 当 ...
最新文章
- 机器不学习:浅析深度学习在实体识别和关系抽取中的应用
- 织梦的网站地图怎么做html,如何优化织梦dedecms默认网站地图sitemap.html??
- jQuery Tab
- [云炬创业基础笔记]第二章创业者测试20
- Jquery ValidateEngine表单验证
- 深度学习多模态融合_3D目标检测多模态融合综述
- JMW-Label标签设计打印源码
- .net 中debug 微软内部代码
- Kubernetes入门实践--部署运行Go项目
- 最新 HTTP/2 漏洞曝光,直指 Kubernetes!
- pin码计算器网页版_快对作业APP下载手机版电脑版官方正式上线
- 第10组17通信三班228网络协议抓包分析
- 隐藏水滴屏的软件_手机隐藏水滴屏的APP
- 2013 B 碎纸片拼接与复原
- linux stm32 虚拟串口驱动安装,stm32的usb虚拟串口驱动win7系统64位和32位不能正常安装的解决办法!stm32 virtual comport win7(终极解决办法)...
- 转-SIP穿越NAT SIP穿越防火墙
- “枪枪爆头”!用Python写个了使命召唤外挂
- Flutter 功能最全的JsonToDart工具
- 好用的办公邮箱是提高工作效率的第一步
- 计算机进入桌面黑屏怎么办,电脑黑屏进不了桌面怎么办_电脑开机黑屏无法进桌面的解决方法-系统城...
热门文章
- CentOS 6.x中目录结构及用途
- 最早接触到的计算机编程语言——c语言
- Android批量图片载入经典系列——afinal框架实现图片的异步缓存载入
- MySQL_update同一张表
- svn中的revert和update
- android开发我的新浪微博客户端-登录页面功能篇(4.2)
- C#2.0实例程序STEP BY STEP--实例二:数据类型
- 大学毕业没有实习经历_我是如何在大学毕业后没有实习的情况下获得第一份开发人员工作的...
- 1126 Eulerian Path
- 二分法典例:木棒切割问题