From beb072a39c527f069edd890be6047cb34fc154d6 Mon Sep 17 00:00:00 2001 From: wanganxp Date: Sat, 23 Jan 2021 05:12:58 +0800 Subject: [PATCH] Update datacom.md --- docs/component/datacom.md | 185 +++++++++++++++++++------------------- 1 file changed, 93 insertions(+), 92 deletions(-) diff --git a/docs/component/datacom.md b/docs/component/datacom.md index 8fbe4cacf..e003ba4dc 100644 --- a/docs/component/datacom.md +++ b/docs/component/datacom.md @@ -352,14 +352,21 @@ datacom组件规范还要求支持绑定 value，且支持双向绑定，即： 欢迎开发者们开发这些`datacom组件`，后续插件市场将单列出datacom组件，给予更高的显示权重。 -### uniCloud.mixinDatacomJql +### 使用mixinDatacom快速开发datacom -HBuilderX 3.1.0+ 支持 +> 版本要求：HBuilderX 3.1.0+ -`uniCloud.mixinDatacomJql` 是 `datacom组件` 的 mixin, [mixin详情](https://cn.vuejs.org/v2/api/#Vue-mixin) +开发一个支持localdata的datacom组件相对容易，但要开发支持云端数据的datacom组件，实现对collection、field、where等属性的解析，工作量还是不小的。 +为此官方提供了一个mixin混入库，开发者在自己的datacom组件中混入`uniCloud.mixinDatacom`，即可方便的让自己的组件支持本地和云端的数据绑定，快速完成datacom组件。 -`uniCloud.mixinDatacomJql` props +mixin是vue的技术，不熟悉的可以点此了解[vue官网的mixin文档](https://cn.vuejs.org/v2/api/#Vue-mixin) + +#### 语法手册 + +`uniCloud.mixinDatacom` 的props + +与标准的datacom组件相同，除了localdata外，其他都是`uniCloud-db组件`的标准属性。 |属性名 | 类型 | 默认值 | 说明| |:-: | :-: | :-: | :-: | @@ -377,92 +384,83 @@ HBuilderX 3.1.0+ 支持 |gettree |Boolean | false |是否查询树状数据，默认 `false`| -`uniCloud.mixinDatacomJql` data +`uniCloud.mixinDatacom` 的data |属性名 | 类型 | 默认值 | 说明| |:-: | :-: | :-: | :-: | -|mixinDatacomJqlLoading |Boolean | |加载数据状态| -|mixinDatacomJqlHasMore |Boolean | |是否有更多数据| -|mixinDatacomJqlResData |Array | |查询返回的数据| -|mixinDatacomJqlErrorMessage |String | |错误消息| -|mixinDatacomJqlPage |OBject | |分页信息| +|mixinDatacomLoading |Boolean | |加载数据状态| +|mixinDatacomHasMore |Boolean | |是否有更多数据| +|mixinDatacomResData |Array | |查询返回的数据| +|mixinDatacomErrorMessage |String | |错误消息| +|mixinDatacomPage |OBject | |分页信息| -`uniCloud.mixinDatacomJql` methods +`uniCloud.mixinDatacom` methods |方法名 | 说明| |:-: | :-: | -|mixinDatacomJqlEasyGet |加载数据，包含 `mixinDatacomJqlLoading` 、`mixinDatacomJqlHasMore`、`mixinDatacomJqlErrorMessage` 逻辑 | -|mixinDatacomJqlGet |加载数据| -|onMixinDatacomJqlPropsChange |属性发生变化时触发| - - +|mixinDatacomEasyGet |加载数据，包含 `mixinDatacomLoading` 、`mixinDatacomHasMore`、`mixinDatacomErrorMessage` 逻辑 | +|mixinDatacomGet |加载数据| +|onMixinDatacomPropsChange |属性发生变化时触发| -在没有 `uniCloud.mixinDatacomJql` 时开发一个 `datacom` 组件需要一下步骤，如何实现参考 `uniCloud.mixinDatacomJql` [源码](https://uniapp.dcloud.net.cn/component/datacom?id=mixinDatacomJqlsource) +#### 使用方法 -1. 定义 `datacom` 组件 `props` -2. 定义 `datacom` 组件 `data` 属性 -3. 调用 `uniClientDB` API，传递 `props` 参数 -4. 绑定 `data` 中的数据到模板 -5. 监听组件属性变化，需要根据变化判断是否需要重置并加载数据 +使用 `uniCloud.mixinDatacom` 开发 `datacom` 组件需要以下步骤 +1. 在export default下声明`mixin: [uniCloud.mixinDatacom]` +2. 在template中绑定 `uniCloud.mixinDatacom` 的 `data` 属性，处理状态或数据的展示 +3. 组件的created声明周期中调用 `uniCloud.mixinDatacom` 中的 `mixinDatacomGet()` 或 `mixinDatacomEasyGet()` 方法请求云端数据库。这两种方法的区别如下： + - `mixinDatacomGet()` 仅请求数据，自行处理各种状态和异常。 + - `mixinDatacomEasyGet()` 在 `mixinDatacomGet()` 的基础之上封装了加载状态、分页及错误消息，可通过模板绑定。用起来更简单 -使用 `uniCloud.mixinDatacomJql` 开发 `datacom` 组件需要以下步骤 - -1. mixin `uniCloud.mixinDatacomJql` -2. 模板中绑定 `uniCloud.mixinDatacomJql` 的 `data` 属性 -3. 调用 `uniCloud.mixinDatacomJql` 中的 `mixinDatacomJqlEasyGet()` 或 `mixinDatacomJqlGet()` 方法请求云端数据库 - - `mixinDatacomJqlEasyGet()` 处理了加载状态、分页及错误消息，可通过模板绑定 - - `mixinDatacomJqlGet()` 仅请求数据，不处理业务逻辑 - - -使用 `uniCloud.mixinDatacomJql` 开发 `datacom` 组件的优势 +使用 `uniCloud.mixinDatacom` 开发 `datacom` 组件的优势 - 不需要定义 `datacom` 组件的属性 - 不需要关心 `uniClinetDB` API -- 不需要判断哪些属性变化时需要重置已加载数据， 仅判断 `onMixinDatacomJqlPropsChange(needReset, changed) {}` 参数 `needReset` 是否为 `true` 即可 +- 不需要判断哪些属性变化时需要重置已加载数据， 仅判断 `onMixinDatacomPropsChange(needReset, changed) {}` 参数 `needReset` 是否为 `true` 即可 - 当 `uniClinetDB` 有新增属性时，组件代码也不需要跟随更新 +例如要开发一个datacom组件，名为uni-data-jql： -组件示例，调用 `mixinDatacomJqlEasyGet()` 加载数据 +- 方法1，使用 `mixinDatacomEasyGet()` ```html