Kbone 框架

前些天在微信上收到了微信開發者公眾號的文章推送《揭開微信小程式Kbone的神祕面紗》，心想：微信小程式有新框架了？抱著學習的態度點進去看了一眼，看過之後覺得這框架也太寵開發者了吧，不愧是微信團隊出品。

原來這個框架早在去年就已經發布了，看完只恨自己沒有早點知道訊息開始學習這個框架。我寫本文的目的也是為了跟個風，想要讓更多的人能夠知道這個框架，感受它的便利，希望好學的你可以停下腳步看看~

Kbone 是什麼？

看到這裡我也不多說了，簡單介紹一下 Kbone 是什麼。用官方高大上的話來說：

Kbone 是一個致力於微信小程式和 Web 端同構的解決方案，在適配層裡模擬出瀏覽器環境，讓 Web 端的程式碼可以不做什麼改動便可執行在小程式裡。

用簡單粗暴一點的話來說，Kbone 這個框架可以讓你只需要寫一份程式碼，就能夠在兩端執行，只需要進行一些配置，輕鬆跑小程式和 Web 兩個端。

Kbone 初探 --- todoList

吹了這麼多，也該上手寫程式碼了。剛開始入門 Kbone，我們從一個簡單的 todoList 開始，當然，官方也提供了一系列的demo，我也參考了官方給的 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
│ ├─ 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 端構建生產環境配置
├─ 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 端入口模板

通過官方給我們的這個目錄結構，我們可以很清晰的看到每個目錄下各個檔案的作用。這裡我就對其中的一些檔案進行解釋一下。

miniprogram.config.js

這個檔案是關於小程式端的一些配置，類似於原生的 json 配置

webpack.mp.config.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',{
  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',}],})

export default function createApp() {
 const container = document.createElement('div')
 container.id = 'app'
 document.body.appendChild(container)

 Vue.config.productionTip = false

 sync(store,router)

 return new Vue({
 el: '#app',router,store,render: h => h(App)
 })
}

(每個頁面的配置都差不多，只是路由不一樣，我選取了 index 頁面的)
這其中引入了 Vue 的路由並配置了小程式端每個頁面對應的 Vue 頁面進行渲染，有一點 Vue 基礎的還是比較好看懂的。

小程式入口

配置到了上一步，你可能覺得已經差不多了，因為在 Web 端已經可以通過路由看到效果了，然而在小程式端還看不到具體的效果甚至還在報錯，這是因為少了關鍵的一步 --- 小程式頁面入口檔案的設定。

舉個例子來說，上一步我們是給小程式的頁面配好了鑰匙，但是還沒有把它拿過來去開相應的鎖，現在我們就要拿它來開相應的的鎖(小程式入口配置) --- webpack.mp.config.js

entry: {
 // js 入口
 index: path.resolve(__dirname,'../src/mp/index/main.mp.js'),explore: path.resolve(__dirname,'../src/mp/explore/main.mp.js'),cart: path.resolve(__dirname,'../src/mp/cart/main.mp.js'),me: path.resolve(__dirname,'../src/mp/me/main.mp.js'),

在這裡配置一下小程式的入口就能在小程式看到首頁(/index)的效果了

tabBar 配合

配置好了入口僅僅只能看到首頁(/index)的效果，這就需要使用 tabBar 了。
之前在說頁面的作用的時候，我特意提了一下 miniprogram.config.js 是關於小程式的一些配置，作用就是在這裡。

簡單提一嘴 miniprogram.config.js 裡面待會兒需要用到的配置項：

• entry：入口頁面路由(一定要主頁配置了tabBar之後的入口路由)
• router：各個頁面自己的路由，頁面之間跳轉用的
• generate：輸出小程式配置(tabBar配置在這裡)
• app：小程式視窗配置，相當於原生 app.json 中的 window 配置
• pages：每個頁面單獨的配置，相當於原生中每個頁面對應的 json 檔案

開始配置(只列出我修改了的配置)

entry: '/index',router: {
 index: ['/(home|index)?','/index.html'],explore: ['/explore'],cart: ['/cart'],me: ['/me'],redirect: {
 notFound: 'index',accessDenied: 'index',generate: {
 tabBar: {
  color: '#000000',selectedColor: '#DE554F',backgroundColor: '#ffffff',list: [{
   pageName: 'index',text: '優選',iconPath: path.resolve(__dirname,'../src/img/home.png'),selectedIconPath: path.resolve(__dirname,'../src/img/home-active.png'),pages: {
 explore: {
  extra: {
   navigationBarTextStyle: 'white'
  }
 }
},

由於這裡每一項的配置都是同樣的方法，所以我就只拿一項舉例子。

Web 端完善

做到上一步的時候，小程式端的效果已經完全出來了，但是 Web 端執行起來沒有 tabBar，這就需要自己做一個 tabBar 放在頁面上了，這裡把它抽出來作為一個元件放在需要的頁面上。

我的頁面結構大致是這樣的：

<template>
 <div class="tabBar for-web">
 <div class="tabBar_border"></div>
 <div class="tabBar_item" v-for="(item,index) in list" :key="index" :data-path="item.pagePath" :data-index="index" @click="switchTab">
  <img :src="selected === index?item.selectedIconPath:item.iconPath">
  <span :class="selected === index ? 'selected' : ''">{{item.text}}</span>
 </div>
 </div>
</template>

接下來就是比較關鍵的一點，就是這個tabBar怎麼讓它隱藏起來不再小程式端顯示。這裡有三種方法：

• vue-improve-loader(給容器加上check-reduce)
• reduce-loader(引入的時候在路徑前加上reduce-loader!)
• 通過樣式隱藏

前兩種在構建的時候就會被自動幹掉，這裡我個人傾向的是第三種通過樣式，給容器加一點樣式。

.miniprogram-root {
 .for-web {
 display: none;
 }
}

做到這一步的時候分頁開發加 tabBar 就已經實現了，剩下的就是往每個頁面上新增自己的業務內容。

小結

總的來說使用 Kbone 進行多頁開發的步驟就是：

• 設定 Vue 路由
• 建立對應頁面並進行小程式頁面掛載註冊
• 修改小程式入口並配置對應的路由(如果有需要可以繼續配置 tabBar)

踩坑記錄

開發中用到的圖片等靜態資源

在寫 demo 的時候發現一個問題，自定義 tabBar 的圖片和頁面需要的圖片檔案構建的時候始終帶不過去，查了一下官方提供的文件，目前暫不支援相對路徑，靜態資源可以考慮轉成 base64 或者使用網路地址，這裡用了一個比較笨的辦法，把圖片上傳到微博然後儲存線上地址。

關於樣式

rpx 在 kbone 中好像不支援，嘗試過 vue+kbone 對 web 端採用px適配，在構建小程式時希望能轉成rpx，但可惜的是不會這樣，去微信開放社群看了一下說要用 rem 做適配(要在 mp-webpack-plugin 這個外掛的配置中的 global 欄位內補充 rem 配置)

構建 npm 相關

開發者工具報錯 Uncaught Error: module "pages/ home/miniprogram-render" is not defined
解決方案：開發者工具重新構建 npm
如果還是無法解決，刪除打包出來的小程式檔案，重新打包

swiper

swiper編譯後在小程式中無法滾動，會直接並列平鋪展示出來。根據文件的說法在前面加上了 wx- 的字首貌似也沒用，還需要進一步探索一下

(更多的踩坑記錄可以看我的readme~)

最後一點

最後還是想說，這個框架對於開發者還是比較友好的，解決了長久以來微信小程式和 Web 兩個端的程式碼問題，在實際中可以少寫一份程式碼，極大的減輕了開發和維護的工作量，雖然目前還存在一些 bug，但是我相信開發團隊一定會努力的完善它。如果你覺得有用的話也用起來吧~ (Kbone 官方技術文件👉文件)

附上github地址：
to-do-list
multipages

到此這篇關於手把手帶你入門微信小程式新框架Kbone的使用的文章就介紹到這了,更多相關小程式新框架Kbone內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！