一开始的时候，我只是做 Web 前端页面，后来我可以做 小程序 & Web 的前后台，因为我用了 Kbone 和 云开发。
本文通过一个小实践来介绍 Kbone 和 云开发 的结合使用。
Q: Kbone是什么？
A: Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。
用图片来解释，就是一个 Web 项目 Kbone 就可以变成小程序项目。
什么？听说你想知道 Kbone 和其他同构方案的对比？可以看看我之前写的文章 《揭开微信小程序 Kbone 的神秘面纱》
更多 Kbone 相关知识
二、云开发介绍
Q: 云开发又是什么？
A: 无需搭建服务器，即可使用云端能力。
我们这次的实践主要用到云开发的两个能力
- 云函数：一段运行在云端的代码
- 数据库：一个 json 数据库
云开发多端支持：因为 Kbone 是做同构的，所以云开发也需要支持多端，这里云开发给我们提供了多端的 SDK。
三、实践项目介绍
本次实践主要做了两个模块
- 显示列表：数据拉取操作
- 新增列：增加数据操作
|-- build // 配置
|-- webpack.config.js // Web 端构建配置
|-- webpack.mp.config.js // 小程序端构建配置
|-- miniprogram.config.js // kbone 插件配置
|-- cloudfunctions // 云函数，存放云开发相关代码
|-- dist // 编译结果
|-- mp // 小程序
|-- web // Web
|-- src // 源码
|-- index.html // Web 端入口 html 文件
|-- package.jsonTips：只要文件名 包含 miniprogram / mp 的，就是小程序相关的文件。
四、实操介绍
01 - 将 Vue 项目配置成 Kbone 项目
- 添加小程序入口 js 文件：main.mp.js
- 添加小程序 webpack配置文件：webpack.mp.config.js & miniprogram.config.js
webpack.mp.config.js 主要配置
miniprogram.config.js 主要配置
02 - 编写云函数
首先，我们来看下一个云函数的目录结构
代码语言：javascript复制|-- cloudfunctions //
| |-- add // 云函数 add
| | |-- config.json // 配置文件
| | |-- index.js // 入口文件
| | |-- package.json // 接着来看看云函数里面写了什么?
代码语言：javascript复制// index.js
// 引入云函数 sdk
const cloud = require('wx-server-sdk')
// 初始化
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 获取数据库引用
const db = cloud.database()
// 云函数的入口
exports.main = async (event, context) => {
return await db.collection('test').add({
data: {
title: event.title,
desc: event.desc
}
})
}03 - 云函数部署
云函数部署分为两步
- 构建：进入云函数 cloudfunctions / add ，执行 npm i 。
- 部署：右键点击云函数，选择 “创建并部署”，在工具中打开云开发控制台，即可看到所部署的云函数。
04 - 多端接入云函数
小程序端 和 Web 端都有SDK可以调用云函数，小程序直接使用 wx.cloud，云开发则需要引入 cloud.js，然后使用 cloud。
调用云函数直接调用 wx.cloud.callFunction / cloud.callFunction 即可。
代码语言：javascript复制wx.cloud.callFunction({
name: 'add',
data: {
title: this.title,
desc: this.desc
}
}).then(res => {})配置未登录模式
由于 Web 端没有小程序的登录态，所以需要将云开发权限配置为 未登录模式。
05 - 效果展示
最后，我们来看下效果~
本文为课程《Kbone 云开发快速助力小程序 & Web同构》文字版
附件：本实践demo
如果你有疑问，请在下方评论区留言给binnie，㊗️大家都没有bug，✌️✌️✌️
