Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
4d41aba6
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
4d41aba6
编写于
10月 08, 2024
作者:
shutao-dc
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update uts-vue-component.md
上级
616d1016
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
14 addition
and
14 deletion
+14
-14
docs/plugin/uts-vue-component.md
docs/plugin/uts-vue-component.md
+14
-14
未找到文件。
docs/plugin/uts-vue-component.md
浏览文件 @
4d41aba6
##
uts组件-标准模式
##
UTS插件-标准模式组件
使用vue组件开发规范,通过插件封装原生平台view提供给native-view组件,实现组件特定功能及UI展示。
...
...
@@ -10,7 +10,7 @@
+
了解
[
vue组件
](
https://uniapp.dcloud.net.cn/tutorial/vue3-components.html
)
+
了解
[
native-view组件
](
https://doc.dcloud.net.cn/uni-app-x/component/native-view.html
)
##
标准模式的uts
组件目录结构
##
UTS插件-标准模式
组件目录结构
<pre
v-pre=
""
data-lang=
""
>
<code
class=
"lang-"
style=
"padding:0"
>
...
...
@@ -40,25 +40,25 @@
</code>
</pre>
如上所示,
标准模式的uts
组件目录结构与UTS插件基本相同,差别在于components目录,vue组件代码存放components目录下。
如上所示,
UTS插件-标准模式
组件目录结构与UTS插件基本相同,差别在于components目录,vue组件代码存放components目录下。
其他目录文件详情可参考
[
UTS插件文档
](
https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html#%E6%8F%92%E4%BB%B6%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84
)
## 开发
标准模式的uts
组件
## 开发
UTS插件-标准模式
组件
### 构建标准模式
的uts
组件
### 构建标准模式组件
HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键选择新建uni_modules插件,弹窗后分类选择 “
uts组件-标准模式
”,填写组件名称,以下均已 native-button 为例
HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键选择新建uni_modules插件,弹窗后分类选择 “
UTS插件-标准模式组件
”,填写组件名称,以下均已 native-button 为例
//截图
创建完毕 HBuilder X 会自动构建模版文件,参考:
`
标准模式的uts
组件目录结构`
创建完毕 HBuilder X 会自动构建模版文件,参考:
`
UTS插件-标准模式
组件目录结构`
###
标准模式的uts
组件代码编写
###
UTS插件-标准模式
组件代码编写
#### 添加 native-view
构建
uts
组件后,HBuilder X 会自动创建components/native-button/native-button.uvue文件,在该文件编写代码添加 native-view 标签
构建
标准模式
组件后,HBuilder X 会自动创建components/native-button/native-button.uvue文件,在该文件编写代码添加 native-view 标签
```
ts
<
template
>
...
...
@@ -308,18 +308,18 @@ export class NativeButton {
:::
更多实现可参考
UTS
组件
[
native-button
](
https://gitcode.net/dcloud/hello-uni-app-x/-/tree/dev/uni_modules/native-button
)
更多实现可参考
标准模式
组件
[
native-button
](
https://gitcode.net/dcloud/hello-uni-app-x/-/tree/dev/uni_modules/native-button
)
此时一个简单的
标准模式UTS
组件就完成了,
此时一个简单的
UTS插件-标准模式
组件就完成了,
**注意:**
+
UTS组件的 components 目录下的代码中不能含有原生平台任何引用对象,这会导致vue原生组件无法跨平台,与原生平台关联的代码都应放在UTS插件中
+
UTS
插件-标准模式
组件的 components 目录下的代码中不能含有原生平台任何引用对象,这会导致vue原生组件无法跨平台,与原生平台关联的代码都应放在UTS插件中
+
ios平台需要vue组件主动释放 uts 实例,所以页面触发 unmounted 生命周期时需要调用 this.button?.destroy() 避免内存泄露
+
android平台 native-view 组件不支持border、background、box-shadow属性,可以使用view标签包裹native-view,在view标签设置以上属性
### 页面引用
uts
组件
### 页面引用
UTS插件-标准模式
组件
以 native-button 为例, 创建
uts
组件的项目页面可以直接使用 native-button 标签,也可将native-button插件包放置其他项目的uni-modules文件夹中。项目页面即可使用 native-button 标签
以 native-button 为例, 创建
标准模式
组件的项目页面可以直接使用 native-button 标签,也可将native-button插件包放置其他项目的uni-modules文件夹中。项目页面即可使用 native-button 标签
```
html
<template>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录