本文通过一个小实践来介绍 Kbone 和 云开发 的结合使用。
一、Kbone介绍
Q: Kbone是什么?
A: Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。
用图片来解释,就是一个 Web 项目 + 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.json
Tips:只要文件名 包含 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 - 编写云函数
首先,我们来看下一个云函数的目录结构
|-- cloudfunctions //
| |-- add // 云函数 add
| | |-- config.json // 配置文件
| | |-- index.js // 入口文件
| | |-- package.json //
接着来看看云函数里面写了什么?
// 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 即可。
wx.cloud.callFunction({
name: 'add',
data: {
title: this.title,
desc: this.desc
}
}).then(res => {})
配置未登录模式
由于 Web 端没有小程序的登录态,所以需要将云开发权限配置为 未登录模式。
05 - 效果展示
最后,我们来看下效果~
本文为课程《Kbone + 云开发快速助力小程序 & Web同构》文字版
附件:本实践demo
如果你有疑问,请在下方评论区留言给binnie,㊗️大家都没有bug,✌️✌️✌️