更新记录

1.0.1.1（2020-11-14）

更新插件包

1.0.1（2020-11-14）

修改 配置新增操作的表单项为必填项

1.0（2020-11-12）

更新 db_init.json, 添加 swiperList 菜单

平台兼容性

云函数类插件通用教程

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

学生小白，大佬轻喷～

basecloud 框架地址：BaseCloud - 云开发全栈极速开发框架

百度 amis 是一个通过 json 配置渲染页面的前端框架，可以减少页面开发工作量，极大提升效率。还提供可视化编辑器。文档：amis - 低代码前端框架

BaseCloud amis 组件

对百度 amis 作简单的配置，使其可以用在 BaseCloud 框架中。

amis 可视化编辑器：AMIS 页面

在线示例：BaseCloud 账号：admin，密码：123123123

可视化编辑器：

示例中的轮播图页面，把在可视化编辑器中配置好的 json 代码放在 schema 变量中即可呈现：

<!--/pages/swiperList/swiperList-->
<template>
    <layout pageKey="swiperList" :innerScroll="false">
        <bc-amis :schema="schema"></bc-amis>
    </layout>
</template>

<script>
    export default {
        data() {
            return {
                schema: {
                    "type": "page",
                    "title": "轮播图",
                    "body": [{
                            "type": "button",
                            "label": "新建",
                            "actionType": "dialog",
                            "dialog": {
                                "type": "dialog",
                                "title": "新建",
                                "body": [{
                                    "type": "form",
                                    "title": "表单",
                                    "controls": [{
                                            "label": "标题",
                                            "type": "text",
                                            "name": "title",
                                            "required": true
                                        },
                                        {
                                            "type": "url",
                                            "label": "图像地址",
                                            "name": "image",
                                            "required": true
                                        },
                                        {
                                            "type": "image",
                                            "label": "图片上传",
                                            "name": "image",
                                            "imageClassName": "r w-full",
                                            "multiple": false,
                                            "reciever": "/api/upload/image",
                                            "accept": ".jpeg, .jpg, .png, .gif",
                                            "hideUploadButton": true,
                                            "autoUpload": true,
                                            "compress": false,
                                            "compressOptions": {}
                                        },
                                        {
                                            "type": "text",
                                            "label": "跳转地址",
                                            "name": "url",
                                            "required": true
                                        }
                                    ],
                                    "api": "admin/swiperList/save"
                                }]
                            },
                            "className": "m-b-sm"
                        },
                        {
                            "type": "crud",
                            "api": "admin/swiperList/list",
                            "columns": [{
                                    "type": "image",
                                    "label": "图片展示",
                                    "name": "image"
                                },
                                {
                                    "name": "title",
                                    "label": "标题",
                                    "type": "text"
                                },
                                {
                                    "type": "text",
                                    "name": "url",
                                    "label": "跳转地址"
                                },
                                {
                                    "type": "operation",
                                    "label": "操作",
                                    "buttons": [{
                                            "label": "编辑",
                                            "type": "button",
                                            "actionType": "dialog",
                                            "dialog": {
                                                "type": "dialog",
                                                "title": "修改弹框",
                                                "body": [{
                                                    "type": "form",
                                                    "title": "表单",
                                                    "controls": [{
                                                            "type": "text",
                                                            "label": "标题",
                                                            "name": "title"
                                                        },
                                                        {
                                                            "type": "url",
                                                            "label": "图像地址",
                                                            "name": "image"
                                                        },
                                                        {
                                                            "type": "image",
                                                            "label": "图片上传",
                                                            "name": "image",
                                                            "imageClassName": "r w-full",
                                                            "multiple": false,
                                                            "reciever": "/api/upload/image",
                                                            "accept": ".jpeg, .jpg, .png, .gif",
                                                            "hideUploadButton": true,
                                                            "autoUpload": true,
                                                            "compress": false,
                                                            "compressOptions": {}
                                                        },
                                                        {
                                                            "type": "text",
                                                            "label": "跳转地址",
                                                            "name": "url",
                                                            "visible": false,
                                                            "visibleOn": ""
                                                        },
                                                        {
                                                            "type": "text",
                                                            "label": "id",
                                                            "name": "_id",
                                                            "visible": false,
                                                            "visibleOn": ""
                                                        }
                                                    ],
                                                    "api": "admin/swiperList/save"
                                                }],
                                                "closeOnEsc": false,
                                                "showCloseButton": true
                                            },
                                            "visible": "",
                                            "visibleOn": "hasAuth('admin/swiperList/save')"
                                        },
                                        {
                                            "type": "button",
                                            "label": "删除",
                                            "actionType": "ajax",
                                            "dialog": {
                                                "title": "系统提示",
                                                "body": "对你点击了"
                                            },
                                            "level": "danger",
                                            "api": "admin/swiperList/delete",
                                            "visibleOn": "hasAuth('admin/swiperList/delete')"
                                        }
                                    ]
                                }
                            ],
                            "messages": {},
                            "initFetch": true,
                            "loadDataOnce": true,
                            "itemActions": [],
                            "bulkActions": [],
                            "primaryField": "_id"
                        }
                    ],
                    "messages": {},
                    "bodyClassName": "",
                    "className": "bg-white",
                    "initApi": ""
                }
            }
        },
        methods: {

        }
    }
</script>

约定

• 文件上传接口可用：

  1. api/upload/image

  2. api/upload/file

以上两个接口可触发客户端文件上传 uniCloud.uploadFile()。

• 用户鉴权函数为 hasAuth('云函数路径')

  可以在组件的显示和隐藏配置中以表达式的方式填写：

  hasAuth('admin/swiperList/save')

  

注意事项

• 由于 amis 本身的关系，组件只支持 h5，移动端和 pc 都行。

• 重要！ 项目的 common/js/base-cloud-client.js 请使用 gitee 上的最新版本，作者还没同步更新到插件市场。

• 云函数的返回格式要统一：

  {
  "status": 0,
  "msg": "",
  "data": {
    ...其他字段
  }
  }

  • status: 返回 0，表示当前接口正确返回，否则按错误请求处理，bc-amis 组件会根据请求的成功与否（state == 'ok'）自动添加。

  • msg: 返回接口处理信息，主要用于表单提交或请求失败时的 toast 显示；

  • data: 必须返回一个具有 key-value 结构的对象。

  如 CRUD amis 组件的返回格式要求：

  {
  "status": 0,
  "msg": "",
  "data": {
    "items": [
      {
        // 每一行的数据
        "id": 1,
        "xxx": "xxxx"
      }
    ],
  
    "total": 200 // 注意！！！这里不是当前请求返回的 items 的长度，而是数据库中一共有多少条数据，用于生成分页组件
    // 如果你不想要分页，把这个不返回就可以了。
  }
  }

  云函数返回示例：

      // 文件路径：cloudfunctions-aliyun/admin/controller/swiperList.js
    // API 接口：admin/swiperList/list
    list : async function(res){
        var dataInDB = await swiperList.field({
            "image" : 1 ,
            "title" : 1 ,
            "url" : 1 
        }).get() ;
        var list = this.find( dataInDB );
        return {data:{items:list}};
    }

  具体请看：amis - 低代码前端框架

• 示例目录：

  .
  │  App.vue
  │  LICENSE
  │  main.js
  │  manifest.json
  │  package.json
  │  pages.json
  │  README.md
  │  uni.scss
  │
  ├─cloudfunctions-aliyun
  │  │  cloudfunctions_init.json
  │  │  db_init.json  // 数据库初始化文件
  │  │
  │  ├─admin
  │  │  │  index.js
  │  │  │  package.json
  │  │  │
  │  │  └─controller
  │  │          menu.js
  │  │          operateLog.js
  │  │          paramConfig.js
  │  │          role.js
  │  │          swiperList.js  // 示例
  │  │
  │  │ ...
  │  └─
  │
  ├─components
  │  ├─alerts
  │  │      alerts.vue
  │  │
  │  ├─auth
  │  │      auth.vue
  │  │
  │  ├─auth-btn
  │  │      auth-btn.vue
  │  │
  │  ├─auth-nav
  │  │      auth-nav.vue
  │  │
  │  ├─bc-amis
  │  │      bc-amis.vue  // BaesCloud amis 组件
  │  │
  │  │ ...
  │  └─
  │
  ├─pages
  │  ├─login
  │  │      login.vue
  │  │
  │  ├─menu
  │  │      menuList.vue
  │  │
  │  ├─operateLog
  │  │      operateLogList.vue
  │  │
  │  ├─paramConfig
  │  │      paramConfigEdit.vue
  │  │      paramConfigList.vue
  │  │
  │  ├─role
  │  │      roleEdit.vue
  │  │      roleList.vue
  │  │
  │  ├─setting
  │  │      setting.vue
  │  │
  │  ├─swiperList
  │  │      swiperList.vue  // 示例
  │  │
  │  └─user
  │          userEdit.vue
  │          userList.vue
  │
  ├─static
  │  │  loginBg.png
  │  │  logo.jpg
  │  │  logoText.png
  │  │  logoTextLight.png
  │  │
  │  └─amis-sdk  // !!记得附带
  │      │  sdk.css
  │      │  sdk.js
  │      │  ...
  │      └─
  │
  │ ...
  └─