手把手帶你入門微信小程式新框架—Kbone
- 2020 年 3 月 10 日
- 筆記
微信小程式誕生至今，滲透到用戶生活的方方面面，包括餐廳點餐，網上購物，乘車出行，挂號就醫……
作為開發者，你是否有這樣的煩惱？——
「當 Web 項目完成之後，產品經理也想搭一套一樣的在小程式端。」
這時的你，是不是有種「透心涼」的感覺？再搭一套同樣的項目，肯定會有成本。比如同時維護兩套類似的程式碼，這對於開發者來說是相當頭疼的一件事情！
針對上述的問題，微信小程式推出了 Kbone 來解決微信小程式的同構問題。那麼，Kbone是什麼，以及做了什麼，我們繼續來一探究竟。
01
Kbone 是什麼？
看到這裡我也不多說了，簡單介紹一下 Kbone 是什麼。用官方高大上的話來說：
Kbone 是一個致力於微信小程式和 Web 端同構的解決方案，在適配層里模擬出瀏覽器環境，讓 Web 端的程式碼可以不做什麼改動便可運行在小程式里。
用簡單粗暴一點的話來說，Kbone 這個框架可以讓你只需要寫一份程式碼，就能夠在兩端運行，只需要進行一些配置，輕鬆跑小程式和 Web 兩個端。
02
Kbone 初探 — todoList
吹了這麼多，也該上手寫程式碼了。剛開始入門 Kbone，我們從一個簡單的 todoList 開始，當然，官方也提供了一系列的 demo ，我也參考了官方給的 demo。
預覽
正式開始之前我們先看看效果圖，感受一下 Kbone 框架一份程式碼跑兩端的神奇
開發準備
- 安裝腳手架/初始化項目
npm install -g kbone-clikbone init to-do-list - 程式碼構建
npm run build(具體的頁面介紹後面會講到) - Coding
來到 src/home/index.vue，項目的首頁入口放在這裡(至於為什麼是這裡，後面同樣會介紹到)
- 項目運行 小程式端：
npm run mpWeb端:npm run web
通過兩個命令把項目運行起來你就會發現 Kbone 的神奇之處，通過一份程式碼(這裡我是基於 Vue)你就可以擁有兩端的效果，再也不用擔心同時維護兩份程式碼了。
03
Kbone 進階 — 多頁開發
剛才做了一個比較簡單的 todoList，對 Kbone 進行了一個簡單的了解， 到這裡正式進入重點 ，接下來我們就來詳細的講講它的使用和多頁開發。
Kbone 目錄了解
通過 官方 給我們的這個目錄結構，我們可以很清晰的看到每個目錄下各個文件的作用。這裡我就對其中的一些文件進行解釋一下。
miniprogram.config.js
這個文件是關於小程式端的一些配置，類似於原生的 json 配置
webpack.mp.config.js
小程式端構建配置，也就是構建小程式端程式碼的 webpack 配置，多頁開發中會用到其中的一部分配置。
src/mp & main.mp.js
mp 用來存放小程式端的入口文件，這裡設置小程式的一些頁面， main.mp.js 相當於一個掛載操作，把它看成 mpvue 裡面的 main.js 比較好理解，設置頁面路由和掛載映射 Vue 裡面的頁面。
(其他的比較好理解，我就不一一贅述了)
04
Kbone 多頁開發
看了官方給的多頁開發的 demo 之後，就想把自己做的小程式項目簡單的用 Kbone 做幾個頁面嘗嘗鮮，於是花了點時間動了動手，先看看兩端跑起來是什麼效果：
從圖片上來看 Web 端和小程式端還是有細微的差別，不過只是在於樣式上，畢竟想做到完全一樣還是比較困難的。話不多說，接下來我們就來解構分頁開發。
Vue 路由配置
Vue 的路由配置比較簡單，直接在 src/router/index.js 下配置就好了，比較簡單，不多說。
頁面建立
根據路由建立需要的四個頁面：index、explore、cart、me 並給它們寫上相應的程式碼。
我只寫了 index 頁面的程式碼，結構比較簡單，為了看效果放的是假數據
小程式端頁面建立/掛載
之前已經介紹過 src/mp 下存放的是小程式端的入口文件，也就是相當於小程式端頁面的對於 Vue 頁面的映射，每個文件夾下很簡單，就一個 main.mp.js
(每個頁面的配置都差不多，只是路由不一樣，我選取了 index 頁面的)
這其中引入了 Vue 的路由並配置了小程式端每個頁面對應的 Vue 頁面進行渲染，有一點 Vue 基礎的還是比較好看懂的。
小程式入口
配置到了上一步，你可能覺得已經差不多了，因為在 Web 端已經可以通過路由看到效果了，然而在小程式端還看不到具體的效果甚至還在報錯，這是因為少了關鍵的一步 — 小程式頁面入口文件的設置。
舉個例子來說，上一步我們是給小程式的頁面配好了鑰匙，但是還沒有把它拿過來去開相應的鎖，現在我們就要拿它來開相應的的鎖(小程式入口配置) — webpack.mp.config.js
在這裡配置一下小程式的入口就能在小程式看到首頁(/index)的效果了
tabBar 配合
配置好了入口僅僅只能看到首頁(/index)的效果，這就需要使用 tabBar 了。
之前在說頁面的作用的時候，我特意提了一下 miniprogram.config.js 是關於小程式的一些配置，作用就是在這裡。
- 簡單提一嘴
miniprogram.config.js裡面待會兒需要用到的配置項：- entry：入口頁面路由(一定要主頁配置了tabBar之後的入口路由)
- router：各個頁面自己的路由，頁面之間跳轉用的
- generate：輸出小程式配置(tabBar配置在這裡)
- app：小程式窗口配置，相當於原生
app.json中的window配置 - pages：每個頁面單獨的配置，相當於原生中每個頁面對應的
json文件
- 開始配置(只列出我修改了的配置)
由於這裡每一項的配置都是同樣的方法，所以我就只拿一項舉例子。
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 就已經實現了，剩下的就是往每個頁面上添加自己的業務內容。
05
小結
總的來說使用 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- 的前綴貌似也沒用，還需要進一步探索一下
最後一點
最後還是想說，這個框架對於開發者還是比較友好的，解決了長久以來微信小程式和 Web 兩個端的程式碼問題，在實際中可以少寫一份程式碼，極大的減輕了開發和維護的工作量，雖然目前還存在一些 bug，但是我相信開發團隊一定會努力的完善它。
