智能生成云端一体代码，提升小程序开发效率

1. 智能生成云端一体代码，提升小程序开发效率崔红保 DCloud CTO

2.

3. 自我介绍崔红保跨平台开发老兵，从早期的j2me/symbian/blackberry等平台的兼容适配，到后来的iOS/Android/Hybrid App/小程序，一直在深度参与，并持续输出解决方案，帮助开发者更轻松。现任DCloud CTO，uni-app产品负责人

4. 开讲之前

5. 我们先评估个需求

6. 开发一个云端通讯录需要几天？需求清单： ❖ 前端+后端 ❖ 数据入库 ❖ 多平台支持

7. 10分钟？

8.

9. • 前/后端协同模式演变 • 小程序云开发的先进性和局限性 • uniCloud的改进探索 • 智能生成小程序代码（Schema2Code） • 未来的轮子生态

10. 第一阶段：1990 ~ 2005年 ASP/JSP/PHP 1990年：HTML诞生动态网⻚ JavaScript 脚本 CSS 样式 1995年前后

11. 第二阶段：2005 ~ 2018年后端大前端 web App 原生App PC Mobile iOS App Android APP 小程序微信阿里百度字节跳动 • 起源：Ajax • 成熟：移动互联网 • 特点： ❖ 用户体验好 ❖ 开发效率低

12. 第二阶段：跨端渐成主流跨端框架

13. 第三阶段：2018 ~ 今天 // todo.vue前端⻚面 db.collection("todos") .doc("todo-item-id") .get({ success: function(res) { console.log(res.data) } }) • 无需搭建服务器 • 业务前移：前端直接操作数据库 • 特点： ❖ 用户体验好 ❖ 开发效率高

14. 前后端分离代码执行流程构造UI，响应交互监听请求，解析参数校验参数合法性校验用户权限拼装参数，请求后端校验参数合法性连接DB，执行CURD 接收后端响应，反馈给用户返回结果给客户端

15. 云开发代码执行流程构造UI，响应交互校验参数合法性重前端拼装参数，请求后端连接DB，执行CURD 反馈结果给用户轻后端

16. 前后端工作演变第二阶段第一阶段前后端分离后端前端第三阶段云开发：业务前移

17. 云开发更高效，但尚存缺陷

18. 前序：云开发真实执行逻辑构造UI，响应交互校验参数合法性 API GW监听请求，解析参数校验用户权限拼装参数，请求后端连接DB，执行CURD 连接DB，执行CURD 反馈结果给用户返回结果给客户端根据预先配置的collection的安全规则校验

19. 小程序云开发 - 表级权限，场景受限挑战1：积分大于50的注册用户，才能评论文章挑战2：仅管理员可设置精华帖，阅读量系统自增

20. 小程序云开发 - 参数合法构造UI，响应交互构造UI，响应交互互不拼装参数，请求后端拼装参数，请求后端信连接DB，执行CURD 任校验参数合法性校验参数合法性反馈结果给用户接收后端响应，反馈给用户 API GW监听请求，解析参数监听请求，解析参数校验用户权限校验用户权限校验参数合法性连接DB，执行CURD 连接DB，执行CURD 返回结果给客户端返回结果给客户端入库前缺数据校验

21. 小程序云开发 - 数据割裂其他平台特点：微信支付宝百度用户云数据库云数据库云数据库数据库 ❖ 仅个别小程序厂商支持，私有规范 ❖ 数据分散存储在多个数据库中，运营统计困难

22. uniCloud的改进探索

23. No.1：跨云跨端腾讯云云开发阿里云小程序Serverless 亚⻢逊 lambda uniCloud SDK 云端的跨厂商引擎前端的跨平台框架 uni-app runtime 微信小程序阿里小程序百度小程序字节小程序原生 App web App

24. No.2：规范制定权限配置 JSON Schema 字段校验组件绑定 http://json-schema.org

25. No.2：精细权限积分大于50才能创建 "permission": { 表级权限 "read": true, "create": "auth.uid != null && get(`database.uni-id-users.${auth.uid}`).score>50”, "update": "doc.uid == auth.uid", "delete": "doc.uid == auth.uid || ‘newsAdmin_ID’ in auth.role” }, "properties": { "view_count":{ "permission": { "update": false } } } ⻆色校验字段级权限改进点： ❖ 字段级权限控制 ❖ 更丰富的JS运算表达式 ❖ ⻆色、权限关联

26. No.2：字段校验 { "properties": { "username": { "bsonType": "string", "trim": "both", "minLength": 3, "maxLength": 15 }, "age": { "bsonType": "int", "minimum": 0, "maximum": 125, "defaultValue": 0 }, "mobile": { "bsonType": "string", "description": “电话", "pattern": "^\\+?[0-9-]{3,20}$" } } } 自动去除空格字符串最小⻓度数字最大值默认值正则校验

27. no.3：clientDB云端一体装置云数据库开发者云函数 … 开发者云函数 clientDB通用云函数 uniCloud SDK clientDB前端SDK uni-app runtime 微信小程序阿里小程序百度小程序字节小程序原生 App web App

28. uniCloud - clientDB数据组件 // clientDB组件方式 <unicloud-db collection="article" where="catagory=='news'" field=“title,summary,create_date"> </unicloud-db> 组件方式 // clientDB JS API const db = uniCloud.database() db.collection('article') .where("catagory=='news'") .field('title,summary,create_date') .get() .then(console.log) .catch(console.error)

29. uniCloud - 前端操作数据库执行逻辑 API GW 监听请求校验用户权限 schema A 校验字段合规性 schema B 如：开启DB事务执行action.before schema C 如：阅读数+1 连接DB，执行CURD page A 如：非空、⻓度限制 page B page C 前端⻚面返回结果给前端执行action.after clientDB公共云函数 json-schema

30. 降本增效成果示例构造列表 clientDB组件直接查询DB，无需request请求代码量对比： ❖ 传统开发：90行 ❖ uniCloud：32行 ❖ 联网请求节省代码量：58行，占比60%

31. uniCloud的改进总结 • 打破仅小程序支持云开发的限制，扩展到全端 • 抹平云厂商的接口差异，实现跨云的Serverless引擎 • 基于JSON Schema扩展规范，精细权限和字段约束 • 封装clientDB数据组件，节省代码量，提高开发效率

32. 智能生成代码，进一步解放生产力

33. uniCloud项目特点 API GW 监听请求 page A 如：非空、⻓度限制 page B • uniCloud鼓励将DB及业务逻辑写在前端代码中， schema A 校验用户权限项目重心在前端 • clientDB是一个通用的公共云函数，操作权限及业校验字段合规性 schema B 务数据安全校验由clientDB云函数从schema中解析并执行执行action.before 如：开启DB事务 • page C 前端⻚面如：阅读数+1 返回结果给前端 schema C uniCloud项目的代码生成，重点是前端代码的生 json-schema 连接DB，执行CURD 成，不涉及云函数等后端代码的生成执行action.after clientDB公共云函数

34. Schema2Code：以表单为例构建表单表单组件列表 • label定义 • placeholder • 组件类型 • 默认值 • 组件顺序 • 必填标志 • 校验表单非空校验 • 最小⻓度 • 最大⻓度 • 手机号校验 • 邮箱校验 • 错误提示 • 同云端入库字段校验 json schema 提交表单 uni.request 无需接口提交，前端操作数据库 clientDB

35. Schema2Code：以表单为例 { "bsonType": "object", "required": ["username", "mobile"], "properties": { "username": { "bsonType": "string", "title": "姓名", "description": "姓名", "order": 1, "trim": "both" }, "gender": { "bsonType": "int", "title": "性别", "order": 2, "defaultValue": 0, "enum": [{ "text": "未知", "value": 0 }, { "text": "男", "value": 1 }, { "text": "女", "value": 2 }] }, "comment": { "bsonType": "string", "title": "备注", "component": { "name": "textarea" } } } } 必填字段 label定义 placeholder定义组件顺序默认值组件类型

36. Schema2Code：表单构建 "required": ["username", "mobile"], "properties": { "username": { "bsonType": "string", "title": "姓名", "description": "姓名", "order": 1, }, “comment": { "bsonType": "string", "title": "备注", "component": { "name": "textarea" } } } <uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast"> <uni-forms-item name="username" label="姓名" required> <input placeholder="姓名" v-model="formData.username" trim="both" /> </uni-forms-item> <uni-forms-item name="comment" label="备注"> <textarea @input="binddata('comment', $event.detail.value)" class="uni-textarea-border" :value="formData.comment" trim="both"></textarea> </uni-forms-item> </uni-forms>

37. Schema2Code - 动态枚举及扩展组件 "nation":{ "enum":{ "collection":"nation-china", "field":"name as text,_id as value" }, "componentForEdit":{ "name":"uni-data-picker" } } "address":{ "enum":{ "collection":"city-china", "field":"name as text,_id as value" }, "enumType":"city-china" }

38. Schema2Code - 小程序管理后台 • • • 列表分⻚、关键字搜索新增、修改、删除、详情批量操作

39. 未来的组件生态

40. 前后分离的轮子割裂 React 前端 Ant Design Material-UI 后端 Vue Element vant Mint UI uni-ui swiper Bootstrap Laravel Express Spring yii Egg.js Hiberate mongodb oracle mysql

41. 云端一体的组件，搭积木更快 DB Schema DB Schema DB Schema DB Schema 云端云函数前端前端组件 banner组件前端组件升级组件云函数前端组件搜索组件前端组件一键登录

42. 总结 • 历史：前端开发模式演变，业务逐步前移 • 现状：云开发更高效，但有局限，业务受限 • 探索1：跨云跨端、精细化权限、严格字段校验、前端数据组件 • 探索2：基于云开发模式下的代码生成思路 • 未来：基于业务的、云端一体的组件生态

43. 拒绝重复，做个高效的`懒人`

44.

45.