微信小程序新框架---Kbone
Kbone 框架
前些天在微信上收到了微信開發(fā)者公眾號(hào)的文章推送《揭開微信小程序Kbone的神秘面紗》，心想：微信小程序有新框架了？抱著學(xué)習(xí)的態(tài)度點(diǎn)進(jìn)去看了一眼，看過之后覺得這框架也太寵開發(fā)者了吧，不愧是微信團(tuán)隊(duì)出品。
原來這個(gè)框架早在去年就已經(jīng)發(fā)布了，看完只恨自己沒有早點(diǎn)知道消息開始學(xué)習(xí)這個(gè)框架。我寫本文的目的也是為了跟個(gè)風(fēng)，想要讓更多的人能夠知道這個(gè)框架，感受它的便利，希望好學(xué)的你可以停下腳步看看~
Kbone 是什么？
看到這里我也不多說了，簡(jiǎn)單介紹一下 Kbone 是什么。用官方高大上的話來說：
Kbone 是一個(gè)致力于微信小程序和 Web 端同構(gòu)的解決方案，在適配層里模擬出瀏覽器環(huán)境，讓 Web 端的代碼可以不做什么改動(dòng)便可運(yùn)行在小程序里。
用簡(jiǎn)單粗暴一點(diǎn)的話來說，Kbone 這個(gè)框架可以讓你只需要寫一份代碼，就能夠在兩端運(yùn)行，只需要進(jìn)行一些配置，輕松跑小程序和 Web 兩個(gè)端。
Kbone 初探 — todoList
吹了這么多，也該上手寫代碼了。剛開始入門 Kbone，我們從一個(gè)簡(jiǎn)單的 todoList 開始，當(dāng)然，官方也提供了一系列的demo，我也參考了官方給的 demo。Talk is cheap，let’s see the code ~
開發(fā)準(zhǔn)備
安裝腳手架/初始化項(xiàng)目
npm install -g kbone-clikbone init to-do-list代碼構(gòu)建
npm run build
(具體的頁(yè)面介紹后面會(huì)講到)Coding
來到 src/home/index.vue，項(xiàng)目的首頁(yè)入口放在這里(至于為什么是這里，后面同樣會(huì)介紹到)
在這里直接寫業(yè)務(wù)代碼就可以了，為了不使文章顯得臃腫，有興趣的可以看我的源碼。項(xiàng)目運(yùn)行
小程序端：npm run mp
Web端:npm run web
通過兩個(gè)命令把項(xiàng)目運(yùn)行起來你就會(huì)發(fā)現(xiàn) Kbone 的神奇之處，通過一份代碼(這里我是基于 Vue)你就可以擁有兩端的效果，再也不用擔(dān)心同時(shí)維護(hù)兩份代碼了。
Kbone 進(jìn)階 — 多頁(yè)開發(fā)
剛才做了一個(gè)比較簡(jiǎn)單的 todoList，對(duì) Kbone 進(jìn)行了一個(gè)簡(jiǎn)單的了解，到這里正式進(jìn)入重點(diǎn)，接下來我們就來詳細(xì)的講講它的使用和多頁(yè)開發(fā)。
Kbone 目錄了解
├─ build │ ├─ miniprogram.config.js // mp-webpack-plugin 配置 │ ├─ webpack.base.config.js // Web 端構(gòu)建基礎(chǔ)配置 │ ├─ webpack.dev.config.js // Web 端構(gòu)建開發(fā)環(huán)境配置 │ ├─ webpack.mp.config.js // 小程序端構(gòu)建配置 │ └─ webpack.prod.config.js // Web 端構(gòu)建生產(chǎn)環(huán)境配置 ├─ dist │ ├─ mp // 小程序端目標(biāo)代碼目錄，使用微信開發(fā)者工具打開，用于生產(chǎn)環(huán)境 │ └─ web // web 端編譯出的文件，用于生產(chǎn)環(huán)境 ├─ src │ ├─ common // 通用組件 │ ├─ mp // 小程序端入口目錄 │ │ ├─ home // 小程序端 home 頁(yè)面 │ │ │ └─ main.mp.js // 小程序端入口文件 │ │ └─ other // 小程序端 other 頁(yè)面 │ │ └─ main.mp.js // 小程序端入口文件 │ ├─ detail // detail 頁(yè)面 │ ├─ home // home 頁(yè)面 │ ├─ list // list 頁(yè)面 │ ├─ router // vue-router 路由定義 │ ├─ store // vuex 相關(guān)目錄 │ ├─ App.vue // Web 端入口主視圖 │ └─ main.js // Web 端入口文件 └─ index.html // Web 端入口模板
通過給我們的這個(gè)目錄結(jié)構(gòu)，我們可以很清晰的看到每個(gè)目錄下各個(gè)文件的作用。這里我就對(duì)其中的一些文件進(jìn)行解釋一下。
miniprogram.config.js
這個(gè)文件是關(guān)于小程序端的一些配置，類似于原生的 json 配置
webpack.mp.config.js
小程序端構(gòu)建配置，也就是構(gòu)建小程序端代碼的 webpack 配置，多頁(yè)開發(fā)中會(huì)用到其中的一部分配置。
src/mp & main.mp.js
mp 用來存放小程序端的入口文件，這里設(shè)置小程序的一些頁(yè)面，main.mp.js 相當(dāng)于一個(gè)掛載操作，把它看成 mpvue 里面的 main.js 比較好理解，設(shè)置頁(yè)面路由和掛載映射 Vue 里面的頁(yè)面。
(其他的比較好理解，我就不一一贅述了)
Vue 路由配置
Vue 的路由配置比較簡(jiǎn)單，直接在 src/router/index.js 下配置就好了，比較簡(jiǎn)單，不多說。
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,
}
],
})
頁(yè)面建立
根據(jù)路由建立需要的四個(gè)頁(yè)面：index、explore、cart、me 并給它們寫上相應(yīng)的代碼。
我只寫了 index 頁(yè)面的代碼，結(jié)構(gòu)比較簡(jiǎn)單，為了看效果放的是假數(shù)據(jù)，有興趣的參考一下看我的源碼
小程序端頁(yè)面建立/掛載
之前已經(jīng)介紹過 src/mp 下存放的是小程序端的入口文件，也就是相當(dāng)于小程序端頁(yè)面的對(duì)于 Vue 頁(yè)面的映射，每個(gè)文件夾下很簡(jiǎn)單，就一個(gè) 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)
})
}
(每個(gè)頁(yè)面的配置都差不多，只是路由不一樣，我選取了 index 頁(yè)面的)
這其中引入了 Vue 的路由并配置了小程序端每個(gè)頁(yè)面對(duì)應(yīng)的 Vue 頁(yè)面進(jìn)行渲染，有一點(diǎn) Vue 基礎(chǔ)的還是比較好看懂的。
小程序入口
配置到了上一步，你可能覺得已經(jīng)差不多了，因?yàn)樵?Web 端已經(jīng)可以通過路由看到效果了，然而在小程序端還看不到具體的效果甚至還在報(bào)錯(cuò)，這是因?yàn)樯倭岁P(guān)鍵的一步 — 小程序頁(yè)面入口文件的設(shè)置。
舉個(gè)例子來說，上一步我們是給小程序的頁(yè)面配好了鑰匙，但是還沒有把它拿過來去開相應(yīng)的鎖，現(xiàn)在我們就要拿它來開相應(yīng)的的鎖(小程序入口配置) — 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'),
},
在這里配置一下小程序的入口就能在小程序看到首頁(yè)(/index)的效果了
tabBar 配合
配置好了入口僅僅只能看到首頁(yè)(/index)的效果，這就需要使用 tabBar 了。
之前在說頁(yè)面的作用的時(shí)候，我特意提了一下 miniprogram.config.js 是關(guān)于小程序的一些配置，作用就是在這里。
簡(jiǎn)單提一嘴
miniprogram.config.js里面待會(huì)兒需要用到的配置項(xiàng)：entry：入口頁(yè)面路由(一定要主頁(yè)配置了tabBar之后的入口路由)
router：各個(gè)頁(yè)面自己的路由，頁(yè)面之間跳轉(zhuǎn)用的
generate：輸出小程序配置(tabBar配置在這里)
app：小程序窗口配置，相當(dāng)于原生
app.json中的window配置pages：每個(gè)頁(yè)面單獨(dú)的配置，相當(dāng)于原生中每個(gè)頁(yè)面對(duì)應(yīng)的
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: '優(yōu)選',
iconPath: path.resolve(__dirname, '../src/img/home.png'),
selectedIconPath: path.resolve(__dirname, '../src/img/home-active.png'),
}],
},
},
pages: {
explore: {
extra: {
navigationBarTextStyle: 'white'
}
}
},
由于這里每一項(xiàng)的配置都是同樣的方法，所以我就只拿一項(xiàng)舉例子。
Web 端完善
做到上一步的時(shí)候，小程序端的效果已經(jīng)完全出來了，但是 Web 端運(yùn)行起來沒有 tabBar，這就需要自己做一個(gè) tabBar 放在頁(yè)面上了，這里把它抽出來作為一個(gè)組件放在需要的頁(yè)面上。
我的頁(yè)面結(jié)構(gòu)大致是這樣的：
<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>
接下來就是比較關(guān)鍵的一點(diǎn)，就是這個(gè)tabBar怎么讓它隱藏起來不再小程序端顯示。這里有三種方法：
vue-improve-loader(給容器加上check-reduce)
reduce-loader(引入的時(shí)候在路徑前加上reduce-loader!)
通過樣式隱藏
前兩種在構(gòu)建的時(shí)候就會(huì)被自動(dòng)干掉，這里我個(gè)人傾向的是第三種通過樣式，給容器加一點(diǎn)樣式。
.miniprogram-root {
.for-web {
display: none;
}
}
做到這一步的時(shí)候分頁(yè)開發(fā)加 tabBar 就已經(jīng)實(shí)現(xiàn)了，剩下的就是往每個(gè)頁(yè)面上添加自己的業(yè)務(wù)內(nèi)容。
小結(jié)
總的來說使用 Kbone 進(jìn)行多頁(yè)開發(fā)的步驟就是：
設(shè)置 Vue 路由
建立對(duì)應(yīng)頁(yè)面并進(jìn)行小程序頁(yè)面掛載注冊(cè)
修改小程序入口并配置對(duì)應(yīng)的路由(如果有需要可以繼續(xù)配置 tabBar)
踩坑記錄
開發(fā)中用到的圖片等靜態(tài)資源
在寫 demo 的時(shí)候發(fā)現(xiàn)一個(gè)問題，自定義 tabBar 的圖片和頁(yè)面需要的圖片文件構(gòu)建的時(shí)候始終帶不過去，查了一下官方提供的文檔，目前暫不支持相對(duì)路徑，靜態(tài)資源可以考慮轉(zhuǎn)成 base64 或者使用網(wǎng)絡(luò)地址，這里用了一個(gè)比較笨的辦法，把圖片上傳到微博然后保存在線地址。
關(guān)于樣式
rpx 在 kbone 中好像不支持，嘗試過 vue+kbone 對(duì) web 端采用px適配，在構(gòu)建小程序時(shí)希望能轉(zhuǎn)成rpx，但可惜的是不會(huì)這樣，去微信開放社區(qū)看了一下說要用 rem 做適配(要在 mp-webpack-plugin 這個(gè)插件的配置中的 global 字段內(nèi)補(bǔ)充 rem 配置)
構(gòu)建 npm 相關(guān)
開發(fā)者工具報(bào)錯(cuò) Uncaught Error: module "pages/ home/miniprogram-render" is not defined
解決方案：開發(fā)者工具重新構(gòu)建 npm
如果還是無法解決，刪除打包出來的小程序文件，重新打包
swiper
swiper編譯后在小程序中無法滾動(dòng)，會(huì)直接并列平鋪展示出來。根據(jù)文檔的說法在前面加上了 wx- 的前綴貌似也沒用，還需要進(jìn)一步探索一下
(更多的踩坑記錄可以看我的readme~)
最后一點(diǎn)
最后還是想說，這個(gè)框架對(duì)于開發(fā)者還是比較友好的，解決了長(zhǎng)久以來微信小程序和 Web 兩個(gè)端的代碼問題，在實(shí)際中可以少寫一份代碼，極大的減輕了開發(fā)和維護(hù)的工作量，雖然目前還存在一些 bug，但是我相信開發(fā)團(tuán)隊(duì)一定會(huì)努力的完善它。如果你覺得有用的話也用起來吧~
工程師必備
- 項(xiàng)目客服
- 培訓(xùn)客服
- 平臺(tái)客服
TOP
