手把手帶你入門微信小程序新框架---Kbone

做者：Horace
ps：新人小白一枚，若有錯誤，歡迎指出~

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',
      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 = 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 裏面待會兒須要用到的配置項：

  1. entry：入口頁面路由(必定要主頁配置了tabBar以後的入口路由)
  2. router：各個頁面本身的路由，頁面之間跳轉用的
  3. generate：輸出小程序配置(tabBar配置在這裏)
  4. app：小程序窗口配置，至關於原生 app.json 中的 window 配置
  5. 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怎麼讓它隱藏起來再也不小程序端顯示。這裏有三種方法：

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

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

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

作到這一步的時候分頁開發加 tabBar 就已經實現了，剩下的就是往每一個頁面上添加本身的業務內容。

小結

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

1. 設置 Vue 路由
2. 創建對應頁面並進行小程序頁面掛載註冊
3. 修改小程序入口並配置對應的路由(若是有須要能夠繼續配置 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