【开箱即用】vk-unicloud-router - 云函数路由模式开发框架 - 已集成uni-id

更新记录

2.18.19（2024-10-18）下载此版本

【重要】修复第三方授权登录，如微信登录时，特殊情况下会导致账号虽然存在，但登录后一直是新注册账号的问题

特别注意

本次更新需要替换项目的 /router/service/user/ 目录

2.18.18（2024-10-17）下载此版本

【调整】注册接口统一去除 myInviteCode 参数，使用自动生成，防止出现重复的 myInviteCode
【修复】vk.pubfn.test 在检测图片和视频时未忽略大小写的问题
【新增】内置全局异常过滤器 errorFilter，支持将错误信息写入数据库方便搜索排错等等

2.18.17（2024-09-04）下载此版本

【重要】修复 vk.baseDao.select 因 2.18.13 更新引出的当 pageSize设置为-1或>1000 时，可能出现查询结果不准确的问题
【修复】vk.request 当设置 responseType: 'arraybuffer' 时，部分情况下无法正常接受到值的问题
【优化】vk.callFunction 设置 loading:true，在请求时马上跳页面，loading参数设置不准确的问题

平台兼容性

阿里云	腾讯云	支付宝云
√	√	√

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.2 app-vue app-nvue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	×	√	√	√

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

插件名称：`vk-unicloud-router`

作者：VK

序

如果你热爱编程，想快速入门云开发，欢迎使用`vk-unicloud`系列开发框架

无需转变开发习惯，0成本上手云开发。

框架内置了众多API、工具包，为你的业务扫平障碍。使你的项目刚起步进度就是50%（微信登录、短信、验证码、缓存、生成小程序码等等）

从此你又get一个新技能，只需用js，轻松搞定前后台整体业务。

完整框架项目地址：

`client端`框架地址： https://ext.dcloud.net.cn/plugin?id=2204

`admin端`框架地址：https://ext.dcloud.net.cn/plugin?id=5043

`client端`框架文档：点击查看

`admin端`框架文档：点击查看

主要功能以及对开发者的价值

1、实现云函数路由模式（同时支持对云对象的路由）

1.1、路由模式不使用任何第三方包，兼容性强，运行稳定
1.2、减少云函数数量，云函数有个数限制（用一个云函数即可实现多个云函数效果）
1.3、部分通用的代码块可以放在公共区执行，具有公共函数的效果，增加代码复用率，便于维护。
1.4、可以在开发环境和生产环境中任意切换，开发时，用开发环境，开发过程中不会影响到线上环境。（具体切换方法在文档最后）
1.5、美化云函数请求过程中的日志排版，使请求日志一目了然。（再也不用为日志分散，难找而头疼）
1.6、可以强制关闭云端服务（适用于需要临时关闭后端服务的情况，如腾讯云迁移数据到阿里云时需要先关闭服务，否则迁移过程中会有新数据产生）

2、实现 `全局过滤器`，过滤非法请求。您无需关心用户角色权限问题。

3、众多现成的 `JS API`，让您无需重复造轮子。（持续增加中）

4、众多现成的 `云函数 API`，为您的业务扫平障碍，让您可以专注于自身业务开发。（微信登录、短信、验证码、缓存、生成小程序码等等）（持续增加中）

5、全面支持 `url化` 的云函数请求，您无需关心url化后参数的获取问题

6、已集成 `uni-id` 当前版本: `3.3.28`（已支持真实发送邮箱验证码和短信验证码）

6.1、由于每个应用基本都会用上用户系统，官方建议所有 uniCloud 应用均使用 uni-id 作为用户体系，有了统一的账户规范，并且围绕这套账户规范，有各种各样插件，那么开发者可以随意整合这些插件，让数据连同。
6.2、同时方便其他用户使用 unicloud 插件发布者发布的前后端一体插件，只需要导入一个云函数即可。 (如导入一个社区插件，可能要导入几十个云函数，而使用此云函数路由后，只需导入一个云函数，且已集成 uni-id，打通账号体系)。

7、在 `uni-id` 基础上升级为 `vk.userCenter` 用户中心API 通过this.vk.userCenter 即可调用传送门

8、封装 `uni.callFunction` 和 `uni.request` 使之合二为一通过this.vk.callFunction 调用

9、`vk.baseDao` 数据库API，使小白也能轻松上手对数据库的调用。传送门

10、`vk.baseDao.selects` 数据库万能连表查询API 传送门

11、`商品SKU选择器组件`（打造uni插件市场功能最全的SKU选择器组件）传送门

12、对 `Vuex` 进行了深度封装（支持持久化），现在可以很方便的使用Vuex进行读取和储存。传送门

13、自定义过滤器（在业务云函数执行之前(或之后)，统一拦截，进行过滤后再放行，支持设置多个过滤器，并按指定顺序执行）传送门

14、支持设置需要登录的页面列表或不需要登录的页面列表（通过本地token检测，无网络请求，支持通配符写法）传送门

15、支持设置可以被分享的页面列表或禁止分享的页面列表（支持通配符写法）传送门

16、`vk.localStorage` 封装本地缓存的curd，同时具有监听缓存被更新和被删除的功能。传送门

17、美化云函数请求过程中的日志排版，使请求日志一目了然。

18、可以 `强制关闭` 云端服务（适用于需要临时关闭后端服务的情况，如腾讯云迁移数据到阿里云时需要先关闭服务，否则迁移过程中会有新数据产生）

19、全局数据缓存API，现在可以很方便的在云函数中使用缓存。传送门

20【全网首家】云函数URL化之URL重写传送门

21、千人群交流开发心得，助你避坑，作者亲自在群内解答框架使用问题，让你轻松上手 `uniCloud云开发`。

22、其他好处…

目前已集成的服务端API

1、微信小程序服务端API 传送门

2、微信公众号服务端API 传送门

3、百度开放平台服务端API 传送门

4、短信发送传送门

5、邮箱发送传送门

6、Redis 传送门

插件部分API功能体验地址

插件首页体验地址

快速上手 - 安装步骤

后端（云函数端）安装步骤

打开 uniCloud/cloudfunctions 目录

前置工作：修改云函数全局配置文件（用到微信登录的必须要配置）微信小程序配置详细教程

注意：

1、开发微信小程序和APP微信登录需要额外配置 manifest.json 以及 uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json 这2个配置文件，且改动配置后需要重新上传公共模块和 router 函数。
2、若你的电脑没有安装 Node.js，则无法使用 npm 命令。
3、Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/
4、Node.js 安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

查看 uni-id/config.json 代码格式点击查看

正式安装

直接右键uniCloud目录点击 运行云服务空间初始化向导 即可

前端（页面端）安装步骤

自 `client` 端框架 `2.6.0` 起，不再内置任何 UI 框架，你可以选择自己喜欢的 UI 组件库进行开发。

集成 `vk-uview-ui`（vue2.0版）

若不想集成 vk-uview-ui 可跳过此处

适合开发：H5、App(vue版本)、微信小程序、支付宝小程序（其他小程序未验证）

插件市场导入 vk-uview-ui 框架：点击前往

1、main.js 引入 vk-uview-ui

import uView from './uni_modules/vk-uview-ui';
Vue.use(uView);

2、App.vue 引入基础样式（注意style标签需声明scss属性支持）

<style lang="scss">
    @import "./uni_modules/vk-uview-ui/index.scss";
</style>

3、uni.scss 引入全局 scss 变量文件

@import "@/uni_modules/vk-uview-ui/theme.scss";

集成 `vk-uview-ui`（vue3.0版）

若不想集成 vk-uview-ui 可跳过此处

适合开发：H5、App(vue版本)、微信小程序（其他小程序未验证）

插件市场导入 vk-uview-ui 框架：点击前往

不建议把老项目升级到 Vue3.0 (升级非常麻烦，建议新项目才考虑是否使用Vue3.0)

注意：目前（2020-11-18） uniapp 的 Vue3.0 版本只兼容：H5、App、微信小程序

1、前置步骤：修改 manifest.json 内的 vue 版本为 vue3

2、项目根目录新增 index.html 文件，文件代码为

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title></title>
    <!--preload-links-->
    <!--app-context-->
    <!-- 配置H5的 web图标static/logo.png -->
    <link rel="icon" href="./static/logo.png" />
</head>
<body>
    <div id="app">
        <!--app-html-->
    </div>
    <script type="module" src="/main.js"></script>
</body>
</html>

3、main.js 引入 vk-uview-ui

// 引入 uView UI
import uView from './uni_modules/vk-uview-ui';

import { createSSRApp } from 'vue'

export function createApp() {
  const app  = createSSRApp(App)

  // 使用 uView UI
  app.use(uView)

  return { app }
}

4、App.vue 引入基础样式（注意style标签需声明scss属性支持）

<style lang="scss">
    @import "./uni_modules/vk-uview-ui/index.scss";
</style>

5、uni.scss 引入全局 scss 变量文件

@import "@/uni_modules/vk-uview-ui/theme.scss";

集成 `uview-ui`（nvue2.0版）

若不想集成 uview-ui 可跳过此处

适合开发：App(nvue版本)，如果你只开发App，推荐用这个UI

插件市场导入 uview-ui 框架：点击前往

1、main.js 引入 uview-ui

import uView from './uni_modules/uview-ui';
Vue.use(uView);

2、App.vue 引入基础样式（注意style标签需声明scss属性支持）

<style lang="scss">
    @import "./uni_modules/uview-ui/index.scss";
</style>

3、uni.scss 引入全局 scss 变量文件

@import "@/uni_modules/uview-ui/theme.scss";

集成 `uview-ui`（nvue3.0版）

别想了，uniapp官方也还没支持。

组件库并不限制只能从以上选择，理论上支持任何UI组件库进行开发。

卸载 `uView1` 的步骤

1、main.js 删除 uView1

import uView from 'uview-ui'
Vue.use(uView);

2、App.vue 删除基础样式

<style lang="scss">
    @import "uview-ui/index.scss";
</style>

3、uni.scss 删除全局 scss 变量文件

@import "uview-ui/theme.scss";

4、pages.json 删除 easycom 规则

"easycom": {
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
},

5、package.json 删除 uview-ui 依赖

"dependencies": {
  "uview-ui": "^1.8.3"
},

6、package-lock.json 删除 uview-ui 依赖

"dependencies": {
  "uview-ui": {
    "version": "1.8.3",
    "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.8.3.tgz",
    "integrity": "sha512-DqKc+qRrOZLPcyfWv4b0HspSS9n1Cd6BbgKiYEv9rjTAnWoqJV7rXsvWqZdr5iKGP5EMNbNS741GLNw4sIHbpw=="
  }
}

完整安装文档：查看完整安装文档

云函数框架目录结构

.
├── common─────────────────# 自定义官方公共模块包
│ └── config──────────────────# 全局配置公共模块
│ └── uni-id──────────────────# uni-id官方公共模块
│ └── vk-unicloud─────────────# vk-unicloud公共模块
├── router─────────────────# 正式环境云函数主入口(函数路由器)
│ └── dao──────────────────# dao层(数据库交互公共API)
│ └── middleware───────────# 中间层(过滤器、拦截器)
│ └── node_modules─────────# npm包
│ └── service──────────────# 逻辑层(用于写业务逻辑)
│ ── └── 逻辑层目录结构在下方单独展示
│ └── util─────────────────# 工具包
│ ── └── pubFunction.js───────# 公共函数包
│ ── └── smsUtil.js───────────# 全局过滤器
│ └── config.js────────────# 入口函数初始化配置
│ └── index.js─────────────# 入口函数
│ └── package.json─────────# 第三方依赖配置文件(若使用npm，自动生成)
└─└── package-lock.json────# 第三方依赖配置文件(若使用npm，自动生成)
.
├── router-test───────────────# 函数路由(开发测试环境)
│ └── ...─────────# ...
│ └── ...─────────# ...
└── └── ...─────────# ...

逻辑层目录结构

`router/service` 目录为逻辑层

以下的目录并非强制性，只是建议，便于统一开发规范。

.
├── service──────────────────────# 逻辑层（用于写业务逻辑）
│ └── admin────────────────# 后台管理端逻辑（admin框架开发中。。。）
│ ── └── xxxxxxxxxxxxxxx──────# 
│ ── └── xxxxxxxxxxxxxxx──────# 
│ ── └── xxxxxxxxxxxxxxx──────# 
│ ── └── xxxxxxxxxxxxxxx──────# 
│ └── client───────────────# 客户端逻辑（H5、小程序、APP）
│ ── └── user─────────────────# 用户服务（自己系统的逻辑）
│ ──── └── kh───────────────────# kh函数为必须登录后才能访问的函数
│ ──── └── pub──────────────────# pub函数为所有人都可以访问,不限制
│ ──── └── util─────────────────# 用户服务专用的工具包
│ ── └── order────────────────# 订单服务（自己系统的逻辑）
│ ──── └── kh───────────────────# kh函数为必须登录后才能访问的函数
│ ──── └── pub──────────────────# pub函数为所有人都可以访问,不限制
│ ──── └── util─────────────────# 订单服务专用的工具包
│ ── └── xxxxxxxxxxxxxxx──────# 
│ ── └── xxxxxxxxxxxxxxx──────# 
│ └── common───────────────# 公共逻辑（公共接口）
│ ── └── xxxxxxxxxxxxxxxx─────# 
│ ── └── xxxxxxxxxxxxxxxx─────# 
│ ── └── xxxxxxxxxxxxxxxx─────# 
│ └── user─────────────────# 统一用户中心服务(已集成uniID)（用户中心作为核心，且为了方便插件升级,故与admin和client平级）
│ ── └── kh───────────────────# kh函数为必须登录后才能访问的函数(客户端用户)
│ ── └── pub──────────────────# pub函数为所有人都可以访问,不限制
│ ── └── sys──────────────────# sys函数为后端管理人员才能访问的函数(商家后台工作人员)
│ ── └── util─────────────────# 统一用户中心服务专用的工具包
│ └── plugs───────────────# 插件逻辑（插件专用）（会陆续新增一些实用性插件给开发者使用，如微信小程序发送订阅消息等等）
│ ──└── plugs-A───────────────────# 插件A
│ ────└── admin───────────────────# 插件A admin端
│ ────└── client──────────────────# 插件A client端
│ ──└── plugs-B───────────────────# 插件B
│ ────└── admin───────────────────# 插件B admin端
│ ────└── client──────────────────# 插件B client端
│ └── template─────────────# 云函数模板（插件内的云函数写法模板）
│ ── └── db_api───────────────# 数据库接口调用模板
│ └── muban.js─────────────# 云函数模板（新建一个云函数应复制粘贴这个文件）
│ └── muban_easy.js────────# 云函数模板（简易版）
└─────────────────────────────────

云函数service模板文件示例

module.exports = {
  /**
  * 此函数名称
  * @url user/sys/test1 前端调用的url参数地址
  * @description 此函数描述
  * @params {Object} data 请求参数
  * @params {String} uniIdToken 用户token
  * @params {String} userInfo 当前登录用户信息(同理,是可信任的)(只有kh函数才带此参数)
  * @params {Object} util 公共工具包
    * @params {Object} filterResponse 过滤器返回的数据
  * @params {Object} originalParam 原始请求参数(包含了原始event和context)
  * data 请求参数 说明
  * @params {String} uid  当前登录用户id,若用户已登录且token有效,则data中会带uid参数
  * (此参数是后端过滤器通过token获取并添加到data中的,是可信任的)(只有kh函数才带此参数)
  * res 返回参数说明
  * @params {Number} code 错误码，0表示成功
  * @params {String} msg 详细信息
  */
  main: async (event) => {
    let { data = {}, userInfo, util, filterResponse, originalParam } = event;
    let { customUtil, uniID, config, pubFun, vk , db, _ } = util;
    let { uid } = data;
    let res = { code : 0, msg : '' };
    // 业务逻辑开始----------------------------------------------------------- 
    // 可写与数据库的交互逻辑等等

    // 业务逻辑结束-----------------------------------------------------------
    return res;
  }
}

成功时返回

// 注意：所有成功请求必须返回code：0 code为其他值，代表失败，如兑换失败，您的积分不足！
// 如成功时返回 res.code = 0 表示执行成功;
return {
  code : 0,
  msg : '兑换成功！' 
}

失败时返回

return {
  code : -1,
  msg : '兑换失败，您的积分不足！'
}

this.vk.callFunction函数的参数说明

/**
 * 云函数请求封装 - 统一入口
 * @description 通过云函数路由，1个云函数实现多个云函数的效果。
 * @params {String}   url       请求路径，该路径实为router云函数的service目录下的路径
 * @params {Object}   data      请求参数
 * @params {String}   title     遮罩层提示语，为空或不传则代表不显示遮罩层。
 * @params {Boolean}  isRequest 是否使用云函数url化地址访问云函数，默认false
 * @params {Boolean}  needAlert 为true代表请求错误时，会有alert弹窗提示。默认为true
 * @params {Function} success   请求成功时，执行的回调函数
 * @params {Function} fail      请求失败时，执行的回调函数
 * @params {Function} complete  无论请求成功与否，都会执行的回调函数
 */

前端调用云函数示例


this.vk.callFunction({
    url: 'user/kh/setAvatar',
    title:'请求中...',
    data:{
        avatar: "https://xxxxxxx.jpg"
    },
    success(data) {
        // 修改成功
    }
});

云函数url化方式调用云函数示例

点击查看『云函数url化』方式调用云函数示例

前端非法token拦截器

点击查看『前端非法token拦截器』

vk.baseDao数据库API

点击查看『vk.baseDao』数据库API

设置全局请求参数

点击查看『设置全局请求参数』

列表渲染前后端一体模板

点击查看『列表渲染』前后端一体模板

商品SKU选择器组件

点击查看『商品SKU选择器组件』

如何切换正式环境和开发环境

点击查看如何『切换正式环境和开发环境』

本插件更新步骤

点击查看本插件『更新步骤』

如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.