什麼是kbone
微信小程序開發過程中,許多開發者會遇到 小程序 與 Web 端一起的需求,由於 小程序 與 Web 端的運行環境不同,開發者往往需要維護兩套類似的代碼,這對開發者來說比較耗費力氣,並且會出現不同步的情況。
爲了解決上述問題,微信小程序推出了同構解決方案
kbone
來解決此問題。
一:安裝kbone-cli
命令行安裝kbone-cli腳手架,用於創建kbone項目
cnpm install -g kbone-cli
二:創建對應的kbone項目
kbone init my-app
可以根據自己所用到的技術選擇對應的選項(本項目採用kbone+vue),回車確定。
創建成功之後,基本目錄情況和vue-cli4目錄差不多,其中在build文件夾裏miniprogram.config.js進行小程序的配置,比如appid之類
三:在main.js中引入kbone-ui,使項目ui更貼近微信風格(可選)
安裝kbone-ui
npm i kbone-ui
import KboneUI from 'kbone-ui'
import 'kbone-ui/lib/weui/weui.css'
Vue.use(KboneUI)
四:運行項目
// 開發小程序端
npm run mp
// 開發 Web 端
npm run web
// 構建 Web 端
npm run build
web端運行效果圖
小程序端運行效果圖
npm run mp 之後 會在dis文件中創建對應的小程序文件,使用微信開發者工具打開預覽,
注意:官方提醒,儘量使用kbone-ui開發,目前功能正在逐步完善兼容,使用其他組件庫可能會出現問題