unicloud-db

组件类型：UniCloudDBElement

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

兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	3.93	4.11	4.61

属性

名称	类型	默认值	兼容性	描述
id	string(string.IDString)			唯一标识
v-slot:default	string			{data, loading, hasMore, pagination, error}
合法值 兼容性 描述 data 查询结果，类型为Array<UTSJSONObject> loading 查询中的状态。可根据此状态，在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函数操作，进行预处理或后处理(推荐改用JQL触发器)
@load	(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) => void			成功回调。如联网返回结果后，想修改下数据再渲染界面，则在本方法里对data进行修改
@error	(event: UniEvent) => void			失败回调

UniCloudDBElement

UniCloudDBElement 的属性值

名称	类型	必填	描述
dataList	Array<UTSJSONObject>	是	已加载的数据

UniCloudDBElement 的方法

loadData(options?: UTSJSONObject | null): void

加载数据 当 <unicloud-db> 组件的 manual 属性设为 true 或者 loadtime 属性设置为 manual 时，不会在页面初始化时联网查询数据，此时需要通过本方法在需要的时候手动加载数据。

参数

名称	类型	必填	默认值	兼容性	描述
options	UniCloudDBComponentLoadDataOptions	否			可选参数
名称 类型 必备 默认值 兼容性 描述 clear boolean 否 false 是否清空数据 current number 否 当前第几页 success (res?: T) => void 否 成功回调 fail (err?: any) => void 否 失败回调 complete () => void 否 完成回调

loadMore(): void

加载更多数据 在列表的加载下一页场景下，使用ref方式访问组件方法，加载更多数据，每加载成功一次，当前页 +1

add(value: UTSJSONObject, options?: UTSJSONObject | null): void

新增数据

参数

名称	类型	必填	默认值	兼容性	描述
value	UTSJSONObject	是			新增数据.
options	UniCloudDBComponentAddOptions	否			可选参数
名称 类型 必备 默认值 兼容性 描述 showToast boolean 否 true 是否显示 Toast toastTitle string 否 Toast 标题 needLoading boolean 否 true 是否需要 Loading loadingTitle string 否 Loading 标题 success (res?: T) => void 否 成功回调 fail (err?: any) => void 否 失败回调 complete () => void 否 完成回调

remove(): void

移除数据

remove(id?: any, options?: UTSJSONObject | null): void

参数

名称	类型	必填	默认值	兼容性	描述
id	any	否
options	UTSJSONObject	否

update(id: string, value: UTSJSONObject, options?: UTSJSONObject | null): void

更新数据

参数

名称	类型	必填	默认值	兼容性	描述
id	string	是			数据库字段的唯一标识.
value	UTSJSONObject	是			需要修改的新数据.
options	UniCloudDBComponentUpdateOptions	否			可选参数
名称 类型 必备 默认值 兼容性 描述 showToast boolean 否 true 是否显示更新后 Toast toastTitle string 否 "" 更新成功后 Toast 标题 confirmTitle string 否 确认框标题 confirmContent string 否 确认框内容 needConfirm boolean 否 true 是否显示更新确认框 needLoading boolean 否 true 是否需要 Loading loadingTitle string 否 Loading 标题 success (res?: T) => void 否 成功回调 fail (err?: any) => void 否 失败回调 complete () => void 否 完成回调

示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验

<template>
  <view class="content">
    <page-intro content="本页演示 unicloud-db 云数据库组件：集合查询、分页与 loadtime manual，列表展示与 Add/Get 操作，可跳转通讯录等 mixin-datacom 示例。"></page-intro>
    <unicloud-db ref="udbRef" v-slot:default="{data, pagination, loading, error}" :collection="collection" :getcount="true"
      loadtime="manual">
      <list-view v-if="data.length>0" ref="listViewRef" 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>

<script setup lang="uts">

const db = uniCloud.databaseForJQL()

// Template refs
const udbRef = ref<UniCloudDBElement | null>(null)
const listViewRef = ref<UniListViewElement | null>(null)

// Data
const collection = ref('unicloud-db-test')
const collectionList = ref([
  db.collection('book').where('name == "水浒传"').getTemp(),
] as UTSJSONObject[])
const isTesting = ref(false)
const addResult = ref({})
const updateResult = ref({})
const removeResult = ref({})

// Methods
function loadMore() {
  udbRef.value!.loadMore()
}

function get() {
  udbRef.value!.loadData({
    clear: true
  })
}

function add() {
  const value = {
    title: "title-" + Date.now(),
    comment: "comment" + Date.now()
  }
  udbRef.value!.add(value, {
    showToast: false,
    success: (res : UniCloudDBAddResult) => {
      addResult.value = {
        id: res.id
      }
      get()
    },
    fail: (err : any | null) => {
      showError(err)
    }
  })
}

function update(id : string) {
  const value = {
    title: "title-" + Date.now(),
    comment: "comment" + Date.now()
  }
  udbRef.value!.update(id, value, {
    showToast: false,
    needLoading: true,
    needConfirm: false,
    loadingTitle: "正在更新...",
    success: (res : UniCloudDBUpdateResult) => {
      updateResult.value = {
        updated: res.updated
      }
    },
    fail: (err : any | null) => {
      showError(err)
    }
  })
}

function remove(id : string) {
  udbRef.value!.remove(id, {
    showToast: false,
    needConfirm: false,
    needLoading: false,
    success: (res : UniCloudDBRemoveResult) => {
      removeResult.value = {
        deleted: res.deleted
      }
      get()
    },
    fail: (err : any | null) => {
      showError(err)
    }
  })
}

function onQueryLoad(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) {
  console.log(data, ended, pagination)
}

function showError(err : any | null) {
  const error = err as UniCloudError
  uni.showModal({
    content: error.errMsg,
    showCancel: false
  })
}

// Lifecycle
onReady(() => {
  get()
})

onPullDownRefresh(() => {
  udbRef.value!.loadData({
    clear: true,
    success: (_ : UniCloudDBGetResult) => {
      uni.stopPullDownRefresh()
    }
  })
})
</script>

<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>

示例源码如下，请查看 pre > code 标签中的内容

<template>
  <view class="content">
    <page-intro content="本页演示 unicloud-db 云数据库组件：集合查询、分页与 loadtime manual，列表展示与 Add/Get 操作，可跳转通讯录等 mixin-datacom 示例。"></page-intro>
    <unicloud-db ref="udbRef" v-slot:default="{data, pagination, loading, error}" :collection="collection" :getcount="true"
      loadtime="manual">
      <list-view v-if="data.length>0" ref="listViewRef" 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>

<script setup lang="uts">

const db = uniCloud.databaseForJQL()

// Template refs
const udbRef = ref<UniCloudDBElement | null>(null)
const listViewRef = ref<UniListViewElement | null>(null)

// Data
const collection = ref('unicloud-db-test')
const collectionList = ref([
  db.collection('book').where('name == "水浒传"').getTemp(),
] as UTSJSONObject[])
const isTesting = ref(false)
const addResult = ref({})
const updateResult = ref({})
const removeResult = ref({})

// Methods
function loadMore() {
  udbRef.value!.loadMore()
}

function get() {
  udbRef.value!.loadData({
    clear: true
  })
}

function add() {
  const value = {
    title: "title-" + Date.now(),
    comment: "comment" + Date.now()
  }
  udbRef.value!.add(value, {
    showToast: false,
    success: (res : UniCloudDBAddResult) => {
      addResult.value = {
        id: res.id
      }
      get()
    },
    fail: (err : any | null) => {
      showError(err)
    }
  })
}

function update(id : string) {
  const value = {
    title: "title-" + Date.now(),
    comment: "comment" + Date.now()
  }
  udbRef.value!.update(id, value, {
    showToast: false,
    needLoading: true,
    needConfirm: false,
    loadingTitle: "正在更新...",
    success: (res : UniCloudDBUpdateResult) => {
      updateResult.value = {
        updated: res.updated
      }
    },
    fail: (err : any | null) => {
      showError(err)
    }
  })
}

function remove(id : string) {
  udbRef.value!.remove(id, {
    showToast: false,
    needConfirm: false,
    needLoading: false,
    success: (res : UniCloudDBRemoveResult) => {
      removeResult.value = {
        deleted: res.deleted
      }
      get()
    },
    fail: (err : any | null) => {
      showError(err)
    }
  })
}

function onQueryLoad(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) {
  console.log(data, ended, pagination)
}

function showError(err : any | null) {
  const error = err as UniCloudError
  uni.showModal({
    content: error.errMsg,
    showCancel: false
  })
}

// Lifecycle
onReady(() => {
  get()
})

onPullDownRefresh(() => {
  udbRef.value!.loadData({
    clear: true,
    success: (_ : UniCloudDBGetResult) => {
      uni.stopPullDownRefresh()
    }
  })
})
</script>

<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>

参见

• 相关 Bug
• unicloud-db组件教程
• 微信小程序文档
• 支付宝小程序文档
• 百度小程序文档
• 抖音小程序文档
• 飞书小程序文档
• 钉钉小程序文档
• QQ小程序文档
• 快手小程序文档
• 京东小程序文档
• 华为快应用文档
• 360小程序文档