Kbone + 云开发快速助力小程序 & Web同构
发布于 4 年前 作者 mengli 3478 次浏览 来自 分享

本文通过一个小实践来介绍 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,✌️✌️✌️

6 回复

来个直播版吧

一个web项目加kbone变成小程序项目,那么有没有什么方案可以做到 一个小程序项目变成web项目?

云开发技术峰会没有binnie和拖拉机,可惜了

点赞!收藏!评论!

你好,你的bug大礼包已投递,请注意查看。

我们都在北京,binnie值班辛苦了

回到顶部