今天就跟大家聊聊有關如何在微信小程序中使用Kbone框架,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
成都創(chuàng)新互聯(lián)公司服務項目包括東川網(wǎng)站建設、東川網(wǎng)站制作、東川網(wǎng)頁制作以及東川網(wǎng)絡營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等,向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案,東川網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務的客戶以成都為中心已經(jīng)輻射到東川省份的部分城市,未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任!
Kbone 是什么?
Kbone 是一個致力于微信小程序和 Web 端同構的解決方案,在適配層里模擬出瀏覽器環(huán)境,讓 Web 端的代碼可以不做什么改動便可運行在小程序里。
用簡單粗暴一點的話來說,Kbone 這個框架可以讓你只需要寫一份代碼,就能夠在兩端運行,只需要進行一些配置,輕松跑小程序和 Web 兩個端。
Kbone 初探 --- todoList
吹了這么多,也該上手寫代碼了。剛開始入門 Kbone,我們從一個簡單的 todoList 開始,當然,官方也提供了一系列的demo,我也參考了官方給的 demo。Talk is cheap,let's see the code ~
預覽
正式開始之前我們先看看效果圖,感受一下 Kbone 框架一份代碼跑兩端的神奇
開發(fā)準備
安裝腳手架/初始化項目
npm install -g kbone-cli kbone init to-do-list
代碼構建
npm run build
(具體的頁面介紹后面會講到)
Coding
來到 src/home/index.vue,項目的首頁入口放在這里(至于為什么是這里,后面同樣會介紹到)
在這里直接寫業(yè)務代碼就可以了,為了不使文章顯得臃腫,有興趣的可以看我的源碼。
項目運行
小程序端:npm run mp
Web端: npm run web
通過兩個命令把項目運行起來你就會發(fā)現(xiàn) Kbone 的神奇之處,通過一份代碼(這里我是基于 Vue)你就可以擁有兩端的效果,再也不用擔心同時維護兩份代碼了。
Kbone 進階 --- 多頁開發(fā)
剛才做了一個比較簡單的 todoList,對 Kbone 進行了一個簡單的了解,到這里正式進入重點,接下來我們就來詳細的講講它的使用和多頁開發(fā)。
Kbone 目錄了解
├─ build │ ├─ miniprogram.config.js // mp-webpack-plugin 配置 │ ├─ webpack.base.config.js // Web 端構建基礎配置 │ ├─ webpack.dev.config.js // Web 端構建開發(fā)環(huán)境配置 │ ├─ webpack.mp.config.js // 小程序端構建配置 │ └─ webpack.prod.config.js // Web 端構建生產(chǎn)環(huán)境配置 ├─ dist │ ├─ mp // 小程序端目標代碼目錄,使用微信開發(fā)者工具打開,用于生產(chǎn)環(huán)境 │ └─ web // web 端編譯出的文件,用于生產(chǎn)環(huán)境 ├─ 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
配置,多頁開發(fā)中會用到其中的一部分配置。
src/mp & main.mp.js
mp
用來存放小程序端的入口文件,這里設置小程序的一些頁面,main.mp.js
相當于一個掛載操作,把它看成 mpvue
里面的 main.js
比較好理解,設置頁面路由和掛載映射 Vue 里面的頁面。
(其他的比較好理解,我就不一一贅述了)
Kbone 多頁開發(fā)
因為作者之前寫了一個微信小程序的高仿項目,有興趣的可以去看看:
?《京東優(yōu)選小程序快車等你上車~》
看了官方給的多頁開發(fā)的 demo之后,就想把自己做的小程序項目簡單的用 Kbone 做幾個頁面嘗嘗鮮,于是花了點時間動了動手,先看看兩端跑起來是什么效果:
從圖片上來看 Web 端和小程序端還是有細微的差別,不過只是在于樣式上,畢竟想做到完全一樣還是比較困難的。話不多說,接下來我們就來解構分頁開發(fā)。
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, } ], })
頁面建立
根據(jù)路由建立需要的四個頁面:index、explore、cart、me 并給它們寫上相應的代碼。
我只寫了 index
頁面的代碼,結構比較簡單,為了看效果放的是假數(shù)據(jù),有興趣的參考一下看我的源碼
小程序端頁面建立/掛載
之前已經(jīng)介紹過 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 基礎的還是比較好看懂的。
小程序入口
配置到了上一步,你可能覺得已經(jīng)差不多了,因為在 Web 端已經(jīng)可以通過路由看到效果了,然而在小程序端還看不到具體的效果甚至還在報錯,這是因為少了關鍵的一步 --- 小程序頁面入口文件的設置。
舉個例子來說,上一步我們是給小程序的頁面配好了鑰匙,但是還沒有把它拿過來去開相應的鎖,現(xiàn)在我們就要拿它來開相應的的鎖(小程序入口配置) --- 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: '優(yōu)選', iconPath: path.resolve(__dirname, '../src/img/home.png'), selectedIconPath: path.resolve(__dirname, '../src/img/home-active.png'), }], }, }, pages: { explore: { extra: { navigationBarTextStyle: 'white' } } },
由于這里每一項的配置都是同樣的方法,所以我就只拿一項舉例子。
Web 端完善
做到上一步的時候,小程序端的效果已經(jīng)完全出來了,但是 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; } }
做到這一步的時候分頁開發(fā)加 tabBar 就已經(jīng)實現(xiàn)了,剩下的就是往每個頁面上添加自己的業(yè)務內(nèi)容。
小結
總的來說使用 Kbone 進行多頁開發(fā)的步驟就是:
設置 Vue 路由
建立對應頁面并進行小程序頁面掛載注冊
修改小程序入口并配置對應的路由(如果有需要可以繼續(xù)配置 tabBar)
踩坑記錄
開發(fā)中用到的圖片等靜態(tài)資源
在寫 demo 的時候發(fā)現(xiàn)一個問題,自定義 tabBar 的圖片和頁面需要的圖片文件構建的時候始終帶不過去,查了一下官方提供的文檔,目前暫不支持相對路徑,靜態(tài)資源可以考慮轉成 base64 或者使用網(wǎng)絡地址,這里用了一個比較笨的辦法,把圖片上傳到微博然后保存在線地址。
關于樣式
rpx 在 kbone 中好像不支持,嘗試過 vue+kbone 對 web 端采用px適配,在構建小程序時希望能轉成rpx,但可惜的是不會這樣,去微信開放社區(qū)看了一下說要用 rem 做適配(要在 mp-webpack-plugin 這個插件的配置中的 global 字段內(nèi)補充 rem 配置)
看完上述內(nèi)容,你們對如何在微信小程序中使用Kbone框架有進一步的了解嗎?如果還想了解更多知識或者相關內(nèi)容,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
本文名稱:如何在微信小程序中使用Kbone框架
轉載注明:http://bm7419.com/article40/jddoho.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、App設計、營銷型網(wǎng)站建設、標簽優(yōu)化、網(wǎng)頁設計公司、自適應網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)