Node.js 如何在 Uniapp 中访问 CabloyJS 后端管理系统 API

zhennann · January 24, 2021 · 300 hits

介绍

CabloyJS是一款免费开源的 NodeJS 全栈开发框架,采用前后端分离设计,具备开箱即用的后台管理系统

Cabloy-SDK是专门为 Uniapp 应用量身定制的前端 SDK,用于便捷的访问 CabloyJS 提供的所有 API 接口,让 Uniapp 前端开发再无后顾之忧

特性

各个平台的小程序后端 API 系统,最复杂的就是账号体系对接。CabloyJS 提供了一个模块化的生态,需要开发什么平台下的小程序应用,只需安装相应的模块即可

目前Cabloy-SDK支持以下平台小程序的开箱即用:

  1. 微信小程序
  2. 企业微信小程序
  3. 钉钉小程序

如何使用 - 前端

1. 导入插件

进入Uniapp 插件页面,点击按钮使用HBuilderX导入插件,将Cabloy-SDK插件导入 Uniapp 项目中

强烈建议下载示例项目查看插件的基本用法

2. 修改 main.js

main.js文件中添加如下代码:

import Vue from 'vue'
import App from './App'

import Cabloy from './js_sdk/cabloy-sdk/main.js'

// 初始化cabloy
const cabloyOptions = {
  base: {
    scene: 'default',
    locale: 'en-us',
  },
  api: {
    baseURL: 'https://yourdomain.com',
  },
}

Vue.prototype.$cabloy = Cabloy(Vue, cabloyOptions)

// 登录
Vue.prototype.$cabloy.util.login().then(res => {
  // 由于 login 是网络请求,可能会在 Page.onLoad 之后才返回
  // 所以此处加入 callback 以防止这种情况
  if (Vue.prototype.$cabloy.__loginReadyCallback) {
    Vue.prototype.$cabloy.__loginReadyCallback(res);
  }
}).catch(err => {
  console.log(err)
})

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()
  1. 首先要初始化一个cabloy实例,并保存至 Vue.prototype.$cabloy,便于在所有 Vue 组件中引用
  2. 其次调用cabloy.util.login进行登录
  • cabloyOptions
名称 说明
base.scene 小程序场景名,默认为default
base.locale 前端默认使用的语言
api.baseURL 后端服务的 API 地址

base.scene:CabloyJS 后端可以支持创建多个小程序,前端通过此参数设置要对接的小程序场景名,默认为default

3. API 清单

插件Cabloy-SDK主要提供了以下 API 组件

名称 说明
cabloy 根对象
cabloy.util 工具函数
cabloy.api 访问后端 API 接口
cabloy.data 状态数据存储
cabloy.config 配置参数

如何使用 - 后端

CabloyJS 提供了一个模块化的生态,需要开发什么平台下的小程序应用,只需安装相应的模块即可

1. 微信小程序

2. 企业微信小程序

3. 钉钉小程序

相关链接

No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.