unicloud-db

unicloud-db 兼容性

属性

unicloud-db 属性兼容性

示例

参见

# unicloud-db

组件类型：UniCloudDBElement

是一个数据库查询组件，它将clientDB的API封装为组件，进一步减少开发者使用所需的代码量。

# unicloud-db 兼容性

Android	iOS	web
3.93	4.11	4.0

# 属性

名称类型默认值描述

id string(string.IDString) - 唯一标识

v-slot:default string - {data, loading, hasMore, pagination, error}

值名称

描述

data

查询结果，类型为Array<UTSJSONObject>

查询中的状态。可根据此状态，在template中通过v-if显示等待内容

hasMore

是否有更多数据。可根据此状态，在template中通过v-if显示没有更多数据了

error

查询错误。可根据此状态，在template中通过v-if显示等待内容

pagination

分页属性

值名称	描述
current	当前页号
size	分页大小
count	数据库的总数据量, 设置 :getcount=true 时有效

collection string(string.DBCollectionString) - 表名

field string(string.DBFieldString) - 查询字段，多个字段用 , 分割

where string(string.JQLString) - 查询条件

orderby string - 排序字段及正序倒叙设置

groupby string - 对数据进行分组

group-field string - 对数据进行分组统计

distinct boolean - 是否对数据查询结果中重复的记录进行去重

值名称	描述
true	去重
false	不去重

page-data string - add 多次查询的集合, replace 当前查询的集合

值名称	描述
add	多次查询的集合
replace	当前查询的集合

page-current number - 当前页

page-size number - 每页数据数量

getone boolean - 指定查询结果是否返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要[0]的方式获取。在true下，直接返回结果数据，少一层数组

getcount boolean - 是否查询总数量

gettree boolean - 是否查询树状结构数据

startwith string - gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询

limitlevel number - gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1

manual boolean - 是否手动加载数据，默认为 false，页面onLoad时自动联网加载数据

loadtime string - 加载数据时机，默认auto，可选值 auto|onready|manual

值名称	描述
auto	页面就绪后或属性变化后加载数据，默认为auto
onready	页面就绪后不自动加载数据，属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时
manual	手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，在调用加载数据

action string(string.ClientDBActionString) - 云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理

@load (data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) => void - 成功回调。如联网返回结果后，想修改下数据再渲染界面，则在本方法里对data进行修改

@error (event: UniEvent) => void - 失败回调

# unicloud-db 属性兼容性

	Android	iOS	web
v-slot:default	3.93	4.11	4.0
collection	3.93	4.11	4.0
field	3.93	4.11	4.0
where	3.93	4.11	4.0
orderby	3.93	4.11	4.0
groupby	3.93	4.11	4.0
group-field	3.93	4.11	4.0
distinct	3.93	4.11	4.0
page-data	3.93	4.11	4.0
page-current	3.93	4.11	4.0
page-size	3.93	4.11	4.0
getone	x	x	4.0
getcount	3.93	4.11	4.0
gettree	3.93	4.11	4.0
startwith	3.93	4.11	4.0
limitlevel	3.93	4.11	4.0
manual	3.93	4.11	4.0
loadtime	3.93	4.11	4.0
action	x	x	4.0
@load	3.93	4.11	4.0
@error	3.93	4.11	4.0

# 示例

hello uni-app x

Template

Script

<template>
  <view class="content">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, error}"
      :collection="collection" :getcount="true" loadtime="manual">
      <list-view v-if="data.length>0" ref="listView" class="list" :scroll-y="true" @scrolltolower="loadMore()">
        <list-item class="list-item" v-for="(item, _) in data">
          <view class="list-item-fill">
            <text>{{item}}</text>
          </view>
          <view>
            <text class="list-item-remove" @click="remove(item.getString('_id')!)">❌</text>
          </view>
        </list-item>
      </list-view>
      <text class="loading" v-if="loading">Loading...</text>
      <view v-if="error!=null">{{error.errMsg}}</view>
      <view class="pagination" v-if="data.length>0">
        <text class="pagination-item">{{data.length}} / {{pagination.count}}</text>
      </view>
    </unicloud-db>
    <view class="btn-group">
      <button class="btn" @click="add()">Add</button>
      <button class="btn" @click="get()">Get</button>
    </view>
  </view>
</template>



<style>
  .content {
    flex: 1;
    flex-direction: column;
  }

  .list {
    flex: 1;
    flex-direction: column;
  }

  .list-item {
    flex-direction: row;
    padding: 10px;
  }

  .list-item-fill {
    flex: 1;
  }

  .list-item-remove {
    padding: 10px;
  }

  .loading {
    padding: 10px;
    text-align: center;
  }

  .pagination {
    flex-direction: row;
    background-color: #f2f2f2;
  }

  .pagination-item {
    margin: auto;
    padding: 5px 10px;
  }

  .btn-group {
    flex-direction: row;
  }

  .btn {
    flex: 1;
    margin: 10px;
  }
</style>