什么是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开发,目前功能正在逐步完善兼容,使用其他组件库可能会出现问题