如何在微信小程序中使用Kbone框架

今天就跟大家聊聊有关如何在微信小程序中使用Kbone框架,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强> Kbone是什么?

Kbone是一个致力于微信小程序和Web端同构的解决方案,在适配层里模拟出浏览器环境,让Web端的代码可以不做什么改动便可运行在小程序里。

用简单粗暴一点的话来说,Kbone这个框架可以让你只需要写一份代码,就能够在两端运行,只需要进行一些配置,轻松跑小程序和网络两个端。

<强> Kbone初探——基于

吹了这么多,也该上手写代码了。刚开始入门Kbone,我们从一个简单的基于开始,当然,官方也提供了一系列的演示,我也参考了官方给的demo.Talk便宜,还是# 39;年代看到的代码~

<强>预览

正式开始之前我们先看看效果图,感受一下Kbone框架一份代码跑两端的神奇

<强>开发准备

<强>安装脚手架/初始化项目

npm  install  -g  kbone-cli  　　kbone  init 备忘录

<强>代码构建

npm  run 构建

(具体的页面介绍后面会讲到)

<强>编码

来到src/home/index.vue项目的首页入口放在这里(至于为什么是这里,后面同样会介绍到)
在这里直接写业务代码就可以了,为了不使文章显得臃肿,有兴趣的可以看我的源码。

<强>项目运行

<李>

小程序端:<代码> npm运行议员

<李>

Web端:<代码> npm运行Web代码

通过两个命令把项目运行起来你就会发现Kbone的神奇之处,通过一份代码(这里我是基于Vue)你就可以拥有两端的效果,再也不用担心同时维护两份代码了。

<强> Kbone进阶——多页开发

刚才做了一个比较简单的基于网络,对Kbone进行了一个简单的了解,到这里正式进入重点,接下来我们就来详细的讲讲它的使用和多页开发。

<强> Kbone目录了解

├─,构建 　　│,├─,miniprogram.config.js //, mp-webpack-plugin 配置 　　│,├─,webpack.base.config.js //, Web 端构建基础配置 　　│,├─,webpack.dev.config.js //, Web 端构建开发环境配置 　　│,├─,webpack.mp.config.js //,小程序端构建配置 　　│,└─,webpack.prod.config.js //, Web 端构建生产环境配置 　　├─经销 　　│,├─,mp ,,,,,//,小程序端目标代码目录,使用微信开发者工具打开,用于生产环境 　　│,└─,web ,,,,//, web 端编译出的文件,用于生产环境 　　├─src 　　│,├─,common ,,,,//,通用组件 　　│,├─,mp ,,,,,//,小程序端入口目录 　　││祝福;├─,home ,,,//,小程序端,home 页面 　　│││祝福;└─,main.mp.js ,//,小程序端入口文件 　　││祝福;└─,other ,,,//,小程序端,other 页面 　　││祝福;,└─,main.mp.js ,//,小程序端入口文件 　　│,├─,detail ,,,,//, detail 页面 　　│,├─,home ,,,,//, home 页面 　　│,├─,list ,,,,//, list 页面 　　│,├─,router ,,,,//, vue-router 路由定义 　　│,├─,store ,,,,//, vuex 相关目录 　　│,├─,App.vue ,,,//, Web 端入口主视图 　　│,└─,main.js ,,,//, Web 端入口文件 　　└─,index.html ,,,//, Web 端入口模板

通过官方给我们的这个目录结构,我们可以很清晰的看到每个目录下各个文件的作用。这里我就对其中的一些文件进行解释一下。

miniprogram.config。js

这个文件是关于小程序端的一些配置,类似于原生的json <代码> 配置

webpack.mp.config。js

小程序端构建配置,也就是构建小程序端代码的<代码> webpack>

src/mp和;main.mp。js

<代码> 用议员来存放小程序端的入口文件,这里设置小程序的一些页面,<代码> main.mp。js代码相当于一个挂载操作,把它看成<代码> mpvue> 主要。js代码比较好理解,设置页面路由和挂载映射Vue里面的页面。

(其他的比较好理解,我就不一一赘述了)

如何在微信小程序中使用Kbone框架