如何在 Uniapp 中访问 CabloyJS 后端管理系统 API
資深大佬 : zhennann 3
介绍
CabloyJS是一款免费开源的 NodeJS 全栈开发框架,采用前后端分离设计,具备开箱即用的后台管理系统
Cabloy-SDK是专门为 Uniapp 应用量身定制的前端 SDK,用于便捷的访问 CabloyJS 提供的所有 API 接口,让 Uniapp 前端开发再无后顾之忧
特性
各个平台的小程序后端 API 系统,最复杂的就是账号体系对接。CabloyJS 提供了一个模块化的生态,需要开发什么平台下的小程序应用,只需安装相应的模块即可
目前Cabloy-SDK支持以下平台小程序的开箱即用:
- 微信小程序
- 企业微信小程序
- 钉钉小程序
如何使用 – 前端
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' // 初始化 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()
- 首先要初始化一个
cabloy实例,并保存至 Vue.prototype.$cabloy,便于在所有 Vue 组件中引用- 其次调用
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. 钉钉小程序
相关链接
- 官网: https://cabloy.com/
- GitHub: https://github.com/zhennann/cabloy
- Cabloy-Uniapp 开发文档
大佬有話說 (3)