小程序kbone开发---用kbone搭建一个demo环境

小程序kbone开发—用kbone搭建一个demo环境

微信小程序自诞生以来，渗透到我们生活的方方面面，以其便捷轻量的特点受到了用户的极大欢迎。但是作为开发者的我们，“当 Web 项目完成之后，产品也想搭一套一样的在小程序端。应该怎么办呢？

再搭一套同样的项目，估计想想都会很崩溃！并且同时维护两套类似的代码的话，这对于开发者来说也是是相当头疼的一件事情！

为了解决这个很不人性化的事情呢，微信小程序推出了 Kbone 来解决微信小程序的同构问题。Kbone是什么，以及做了什么，我们继续来一探究竟。

一、基础知识

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

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

Kbone 特点

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

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

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

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

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

二、开发环境搭建
以下是我用用kbone搭建一个demo环境的小案例。

1.安装Nodejs

进入官网下安装windows下对应系统即可，nodejis中文网地址：http://nodejs.cn/download/

安装完成后，打开控制台，输入npm --version查看版本信息。

2.下载Kbone

下载网址：git clone https://github.com/Tencent/kbone.git
3.运行kbone示例程序

将kbone-develop/examples/demo13文件夹拖到VS Code中后
按下CTRL + SHIT + ~ 打开终端
VS Code下载地址：http://www.downza.cn/soft/276250.html

安装缺少的包，输入命令：npm install

输入命令：npm run mp构建小程序，可以看到在demos13文件夹下面生成了dist

进入dist/mp,输入npm install

4.导入dist/mp工程

下载微信开发者工具，导入生成的dist中程序，AppID使用测试号。

导入成功后，界面如下所示

点击工具选择构建npm，构建成功如下图所示：

此时关闭微信开发者工具，重新打开即可在工具预览界面中看到构建后的预览效果。

至此，我们就完成了小程序Kbone开发环境搭建啦！！！

小程序kbone开发---用kbone搭建一个demo环境相关推荐

微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台小秃僧新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
用小程序·云开发两天搭建mini论坛丨实战
笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式提供的云函数.数据库.存储三大能力.关于云开发,可参考文档:小程序·云开发. 个人感觉云开发带来 ...
微信小程序的开发制作_搭建_工具_模板_一键生成
微信小程序上线了,小编会给您讲解关于它的所有解答 2017年1月9日小程序正式上线,很多人都知道微信小程序,但是不知道微信真正的是什么,要怎么去做,今天金子小编来为大家讲解微信小程序到底是什么. 微信 ...
微信小程序云开发实现一个社区 Demo（补充）
之前写了一篇文章介绍如何使用云开发来实现一个社区 Demo: 微信小程序~云开发的实现的一个社区 Demo(完结~) 得到很多小伙伴的认可但也出现了一些问题. 主要问题有: 发布的图片不显示,跨端发布 ...
小程序云开发实现微信支付，不需要搭建服务器
一.开发微信支付功能一定要架设服务器吗? 2019年的最后一天,舍得叔叔沉浸在探索的兴奋中,验证了微信小程序云开发也能优雅实现微信支付!小程序的目标是建立一个"serverless" ...
腾讯在线教育的小程序云开发实践
作者简介: 陈天忱,IMWEB团队成员,腾讯前端开发工程师, 主要负责腾讯课堂小程序,腾讯课堂直播间等业务模块. 首先介绍下腾讯在线教育下的3个主要业务: ● 针对成人职业化,兴趣化学习的腾讯课堂: ...
小程序云开发教程七：贴子的详情及评论功能
我们先看看界面: 我们如果要实现评论功能, 先看一下总的数据结构: 那么需要什么参数呢? 参数如下 comment: 评论内容username: 用户名time: 评论时间userId: 用户idid ...
微信小程序云开发学习（一）/ 设置云开发与数据查询
1.创建项目这里我选的第二个 :不使用云服务,生成的目录和正常的小程序目录一样,然后自己新建一个云环境的目录 cloud,填上自己的appid 如果选了第一种小程序与开发的话 ,目录他自会自动生成 ...
小程序使用vant-dialog组件内容出不来_微信官方小程序同构新方案Kbone全解析
导语 | 本文是Kbone作者june在云加社区微信群中的分享整理总结而成(编辑:尾尾).同时,june将出席11月16日的TWeb腾讯前端技术大会,欢迎现场交流. 大家好,我是来自腾讯微信小程序团队 ...

小程序kbone开发---用kbone搭建一个demo环境

小程序kbone开发—用kbone搭建一个demo环境

小程序kbone开发---用kbone搭建一个demo环境相关推荐

最新文章

热门文章