⼿把⼿带你⼊门⼩程序新框架Kbone的使⽤
Kbone 框架
前些天在上收到了开发者的⽂章推送《》，⼼想：⼩程序有新框架了？抱着学习的态度点进去看了⼀眼，看过之后觉得这框架也太宠开发者了吧，不愧是团队出品。
原来这个框架早在去年就已经发布了，看完只恨⾃⼰没有早点知道消息开始学习这个框架。我写本⽂的⽬的也是为了跟个风，想要让更多的⼈能够知道这个框架，感受它的便利，希望好学的你可以停下脚步看看~
Kbone 是什么？
看到这⾥我也不多说了，简单介绍⼀下 Kbone 是什么。⽤官⽅⾼⼤上的话来说：
Kbone 是⼀个致⼒于⼩程序和 Web 端同构的解决⽅案，在适配层⾥模拟出浏览器环境，让 Web 端的代码可
以不做什么改动便可运⾏在⼩程序⾥。
⽤简单粗暴⼀点的话来说，Kbone 这个框架可以让你只需要写⼀份代码，就能够在两端运⾏，只需要进⾏⼀些配置，轻松跑⼩程序和 Web 两个端。
Kbone 初探 --- todoList
吹了这么多，也该上⼿写代码了。刚开始⼊门 Kbone，我们从⼀个简单的 todoList 开始，当然，官⽅也提供了⼀系列的demo，我也参考了官⽅给的。Talk is cheap，let's see the code ~
预览
正式开始之前我们先看看效果图，感受⼀下 Kbone 框架⼀份代码跑两端的神奇
开发准备
安装脚⼿架/初始化项⽬
npm install -g kbone-cli
kbone init to-do-list
代码构建
npm run build
(具体的页⾯介绍后⾯会讲到)
Coding
来到 src/home/index.vue，项⽬的⾸页⼊⼝放在这⾥(⾄于为什么是这⾥，后⾯同样会介绍到)
在这⾥直接写业务代码就可以了，为了不使⽂章显得臃肿，有兴趣的可以看我的源码。
项⽬运⾏
⼩程序端：npm run mp
Web端: npm run web
通过两个命令把项⽬运⾏起来你就会发现 Kbone 的神奇之处，通过⼀份代码(这⾥我是基于 Vue)你就可以拥有两端的效果，再也不⽤担⼼同时维护两份代码了。
Kbone 进阶 --- 多页开发
刚才做了⼀个⽐较简单的 todoList，对 Kbone 进⾏了⼀个简单的了解，到这⾥正式进⼊重点，接下来我们就来详细的讲讲它的使⽤和多页开发。
Kbone ⽬录了解
├─ build
│├─ fig.js // mp-webpack-plugin 配置
│├─ fig.js // Web 端构建基础配置
│├─ fig.js // Web 端构建开发环境配置
│├─ fig.js // ⼩程序端构建配置
│└─ fig.js // Web 端构建⽣产环境配置
├─ dist
│├─ 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 端⼊⼝模板
通过给我们的这个⽬录结构，我们可以很清晰的看到每个⽬录下各个⽂件的作⽤。这⾥我就对其中的⼀些⽂件进⾏解释⼀下。
这个⽂件是关于⼩程序端的⼀些配置，类似于原⽣的json配置
fig.js
⼩程序端构建配置，也就是构建⼩程序端代码的webpack配置，多页开发中会⽤到其中的⼀部分配置。
src/mp & main.mp.js
mp⽤来存放⼩程序端的⼊⼝⽂件，这⾥设置⼩程序的⼀些页⾯，main.mp.js相当于⼀个挂载操作，把它看成mpvue⾥⾯的main.js⽐较好理解，设置页⾯路由和挂载映射 Vue ⾥⾯的页⾯。
(其他的⽐较好理解，我就不⼀⼀赘述了)
Kbone 多页开发
因为作者之前写了⼀个⼩程序的⾼仿项⽬，有兴趣的可以去看看：
看了官⽅给的多页开发的 demo之后，就想把⾃⼰做的⼩程序项⽬简单的⽤ Kbone 做⼏个页⾯尝尝鲜，于是花了点时间动了动⼿，先看看两端跑起来是什么效果：
从图⽚上来看 Web 端和⼩程序端还是有细微的差别，不过只是在于样式上，毕竟想做到完全⼀样还是⽐较困难的。话不多说，接下来我们就来解构分页开发。
Vue 路由配置
Vue 的路由配置⽐较简单，直接在src/router/index.js下配置就好了，⽐较简单，不多说。
import Vue from 'vue'
import Router from 'vue-router'
const Index = () => import('@/index/Index.vue')
const Explore = () => import('@/explore/Index.vue')
const Cart = () => import('@/cart/Index.vue')
const Me = () => import('@/me/Index.vue')
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/(home|index)?',
name: 'Home',
component: Index,
},
{
path: '/index.html',
name: 'HomeHtml',
component: Index,
},
{
path: '/explore',
name: 'Explore',
component: Explore,
},
{
小程序开发者社区path: '/cart',
name: 'Cart',
component: Cart,
},
{
path: '/me',
name: 'Me',
component: Me,
}
],
})
页⾯建⽴
根据路由建⽴需要的四个页⾯：index、explore、cart、me 并给它们写上相应的代码。
我只写了index页⾯的代码，结构⽐较简单，为了看效果放的是假数据，有兴趣的参考⼀下看我的
⼩程序端页⾯建⽴/挂载
之前已经介绍过src/mp下存放的是⼩程序端的⼊⼝⽂件，也就是相当于⼩程序端页⾯的对于 Vue 页⾯的映射，每个⽂件夹下很简单，就⼀个main.mp.js
import Vue from 'vue'
import Router from 'vue-router'
import { sync } from 'vuex-router-sync'
import App from '../../App.vue'
import store from '../../store'
import Index from '../../index/Index.vue'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [{
path: '/index',
name: 'Index',
component: Index,
}],
})
export default function createApp() {
const container = ateElement('div')
container.id = 'app'
document.body.appendChild(container)
sync(store, router)
return new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
}
(每个页⾯的配置都差不多，只是路由不⼀样，我选取了index页⾯的)
这其中引⼊了 Vue 的路由并配置了⼩程序端每个页⾯对应的 Vue 页⾯进⾏渲染，有⼀点 Vue 基础的还是⽐较好看懂的。
⼩程序⼊⼝
配置到了上⼀步，你可能觉得已经差不多了，因为在 Web 端已经可以通过路由看到效果了，然⽽在⼩程序端还看不到具体的效果甚⾄还在报错，这是因为少了关键的⼀步 --- ⼩程序页⾯⼊⼝⽂件的设置。
举个例⼦来说，上⼀步我们是给⼩程序的页⾯配好了钥匙，但是还没有把它拿过来去开相应的锁，现在我们就要拿它来开相应

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。