Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
169cd180
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3216
Star
106
Fork
815
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
94
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
94
Issue
94
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
169cd180
编写于
1月 11, 2023
作者:
杜庆泉
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
uts组件文档更新
上级
7931ba81
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
26 addition
and
15 deletion
+26
-15
docs/plugin/uts-component.md
docs/plugin/uts-component.md
+26
-15
未找到文件。
docs/plugin/uts-component.md
浏览文件 @
169cd180
...
...
@@ -91,7 +91,12 @@ UTS组件的优势在于,它秉承了UTS的跨平台特性,统一的UTS语
如上所示,UTS组件的目录结构与UTS插件基本相同
唯一的差别在于,UTS组件入口文件有两个,一个必选的index.vue 组件入口,和一个可选的index.uts 函数能力入口
唯一的差别在于,UTS组件入口文件有两个:
+
必选的index.vue 组件入口
+
可选的index.uts 函数能力入口
用户如果在开发组件的同时,存在一些与组件无关的能力需要对外暴露,可以在index.uts中进行实现
...
...
@@ -322,7 +327,7 @@ index.vue 要素可以分为以下几类:
#### 生命周期
组件开发者需要重点关注组件的生命周期,以便进行
初始化和资源
回收
组件开发者需要重点关注组件的生命周期,以便进行
资源的初始化和
回收
```
mermaid
graph TD;
...
...
@@ -467,13 +472,15 @@ todo 目前还没有创建界面
上面的代码,我们自定义了一个 名为
<uts-hello-view/>
的UTS 组件,该组件对外提供了一个包含按钮的简单UI实现,并且对外暴露了一个名为
`buttonText`
字符串属性,用来构建按钮上的文案
接下来,我们
在下面章节
介绍在uni-app项目中如何使用它
接下来,我们介绍在uni-app项目中如何使用它
#### 使用组件
>
> 需要注意的是,
UTS组件默认全局注册,无需使用者手动配置
>
注意:
UTS组件默认全局注册,无需使用者手动配置
我们在uni-app项目中新建 componet.nvue 页面,
我们在uni-app项目中新建 helloView.nvue 页面,
![](
https://native-res.dcloud.net.cn/images/uts/component/helloview_use_file.jpg
)
直接使用
`uts-hello-view`
标签,并且定义
`buttonText`
文本内容即可看到效果。
...
...
@@ -485,7 +492,6 @@ todo 目前还没有创建界面
<
text
>
UTS
view组件
<
/text
>
<
uts
-
hello
-
view
buttonText
=
"
点击按钮内容
"
style
=
"
width:375px;height: 375px;background-color: aqua;
"
><
/uts-hello-view
>
<
/div
>
<
/template
>
<
script
>
...
...
@@ -780,7 +786,7 @@ UTS组件建议使用远程依赖的方式集成,如果需要以AAR的形式
```
上面的代码我们实现了一个支持lottie动画播放的 UTS组件,标签名称为
<uts-animation-view
/>
,
上面的代码我们实现了一个支持lottie动画播放的 UTS组件,标签名称为
`uts-animation-view`
对外提供了下列属性和方法
...
...
@@ -792,12 +798,16 @@ UTS组件建议使用远程依赖的方式集成,如果需要以AAR的形式
|
`action`
|string |play |动画操作,可取值 play、pause、stop|
|
`hidden`
|boolean|true |是否隐藏动画|
|
`bindended`
|event | |当播放到末尾时触发 ended 事件|
|
`setRepeatMode`
|function|
|设置动画的重复方式,RESTART:重新开始播放,REVERSE,反向播放|
|
`setRepeatMode`
|function| |设置动画的重复方式,RESTART:重新开始播放,REVERSE,反向播放|
#### 使用组件
#### 使用`uts-animation-vie`组件
在uni-app项目中新建 lottie/index.nvue 页面
![](
https://native-res.dcloud.net.cn/images/uts/component/lottie_use_file.jpg
)
新建 lottie.nvue 页面,
引用自定义 uts-animation-view 组件,并编写测试用例
引用自定义 uts-animation-view 组件,并编写测试用例
```
<template>
...
...
@@ -891,23 +901,24 @@ UTS组件建议使用远程依赖的方式集成,如果需要以AAR的形式
```
上面的代码实现了一个名为
以上,我们完成了
`uts-animation-view`
组件的集成和使用工作
#### 运行和测试
在当前例子中,需要下载额外的第三方依赖,需要自定义基座方能使用
在当前例子中,因为配置了额外的第三方依赖,需要自定义基座方能使用
点击页面中的测试按钮,即可看到
## 快速体验
开发者可以使用
[
Hello UTS
](
https://gitcode.net/dcloud/hello-uts
)
快速体验UTS 组件开发
使用HX 3.6.16 版本 - 选择 Hello UTS - 自定义基座包。
查看:三方SDK-Lottie动画示例,对应的源码实现:~/uni_modules/uts-animation-view
Lottie动画示例,对应的源码实现:~/uni_modules/uts-animation-view
`uts-animation-view`
动画示例,对应的源码实现:~/uni_modules/uts-animation-view
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录