Kbone + 云开发快速助力小程序 & 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.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，✌️✌️✌️

Kbone + 云开发快速助力小程序 &amp; Web同构