Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
2dcaac8a
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看板
提交
2dcaac8a
编写于
9月 24, 2024
作者:
shutao-dc
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add uts-vue-component.md
上级
6e7071a2
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
37 addition
and
35 deletion
+37
-35
docs/plugin/uts-vue-component.md
docs/plugin/uts-vue-component.md
+37
-35
未找到文件。
docs/plugin/
native
-vue-component.md
→
docs/plugin/
uts
-vue-component.md
浏览文件 @
2dcaac8a
##
vue原生组件是什么
##
uts组件标准模式
使用vue组件开发规范,通过uts插件封装原生平台view提供给
vue
组件,实现组件特定功能及UI展示。
使用vue组件开发规范,通过uts插件封装原生平台view提供给
native-view
组件,实现组件特定功能及UI展示。
## 前置条件
## 前置条件
继续阅读文档前,开发者需要了解以下前置条件:
继续阅读文档前,开发者需要了解以下前置条件:
+
了解
[
uts语法
](
https://doc.dcloud.net.cn/uni-app-x/uts/
)
和
[
uts原生插件
](
https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html
)
+
了解
[
uts语法
](
https://doc.dcloud.net.cn/uni-app-x/uts/
)
和
[
uts原生插件
](
https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html
)
+
了解
[
V
ue组件
](
https://uniapp.dcloud.net.cn/tutorial/vue3-components.html
)
+
了解
[
v
ue组件
](
https://uniapp.dcloud.net.cn/tutorial/vue3-components.html
)
+
了解
[
native-view组件
](
xxx
)
+
了解
[
native-view组件
](
https://doc.dcloud.net.cn/uni-app-x/component/native-view.html
)
##
vue原生组件结构解析
##
uts组件-标准模式目录结构
<pre
v-pre=
""
data-lang=
""
>
<pre
v-pre=
""
data-lang=
""
>
<code
class=
"lang-"
style=
"padding:0"
>
<code
class=
"lang-"
style=
"padding:0"
>
┌─components //
可跨端公用的
vue组件代码,该文件夹不强制放在此处, 可选
┌─components // vue组件代码,该文件夹不强制放在此处, 可选
| ├─xxxxxx // vue组件名称文件夹 xxxxxx代替组件名称
| ├─xxxxxx // vue组件名称文件夹 xxxxxx代替组件名称
| ├─xxxxxx.uvue // vue组件uts代码
| ├─xxxxxx.uvue // vue组件uts代码
xxxxxx代替组件名称
├─static // 静态资源
├─static // 静态资源
├─utssdk
├─utssdk
│ ├─app-android //Android平台目录
│ ├─app-android //Android平台目录
...
@@ -40,42 +40,44 @@
...
@@ -40,42 +40,44 @@
</code>
</code>
</pre>
</pre>
如上所示,
vue原生组件的目录结构与UTS插件基本相同,差别在于components目录,vue组件代码存放于此,当前该目录并非一定要放置于此,但对于vue原生组件的完整性建议将vue组件代码与关联的uts插件放在一起
。
如上所示,
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插件文档
](
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
)
## 开发
vue原生
组件
## 开发
uts
组件
### 构建
vue原生组件
### 构建
uts组件-标准模式模版
HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键选择新建uni_modules插件,弹窗后分类选择 “
vue原生组件
”,填写组件名称,以下均已 native-button 为例
HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键选择新建uni_modules插件,弹窗后分类选择 “
uts组件-标准模式
”,填写组件名称,以下均已 native-button 为例
//
创建vue原生组件HX
截图
//截图
创建完毕 HBuilder X 会自动构建模版文件,参考:
`
vue原生组件
结构`
创建完毕 HBuilder X 会自动构建模版文件,参考:
`
uts组件-标准模式目录
结构`
###
vue原生组件
代码编写
###
uts组件-标准模式
代码编写
####
vue组件
添加 native-view
#### 添加 native-view
构建
vue原生
组件后,HBuilder X 会自动创建components/native-button/native-button.uvue文件,在该文件编写代码添加 native-view 标签
构建
uts
组件后,HBuilder X 会自动创建components/native-button/native-button.uvue文件,在该文件编写代码添加 native-view 标签
```
html
```
ts
<
template
>
<
template
>
<
native
-
view
><
/native-view>
<
native
-
view
><
/native-view>
<
/template>
<
/template>
```
```
#### native-view 与 UTS插件关联
#### native-view 与 原生对象关联
native-view 初始化会触发 @init 事件,此时创建NativeButton对象,native-button.uvue代码中用NativeButton对象调用插件相关的API。将 UniNativeViewElement 传递给NativeButton对象对象,进行关联绑定
引入 native-button 插件, native-view 初始化时会触发 @init 事件,此时创建UTS插件实例button对象,vue组件用button调用UTS插件相关的API。将 UniNativeViewElement 通过button对象传递给UTS插件,进行view关联绑定
[
NativeButton
](
#NativeButton对象
)
是在utssdk目录构建的原生对象。NativeButton对象内部处理原生view与native-view绑定关联业务
```
ts
```
ts
<
template
>
<
template
>
<
native
-
view
@
init
=
"
onviewinit
"
><
/native-view>
<
native
-
view
@
init
=
"
onviewinit
"
><
/native-view>
<
/template>
<
/template>
...
...
...
...
//引入
native-button 插件
//引入
NativeButton 原生对象
import
{
NativeButton
}
from
"
@/uni_modules/native-button
"
;
import
{
NativeButton
}
from
"
@/uni_modules/native-button
"
;
export
default
{
export
default
{
data
()
{
data
()
{
...
@@ -86,14 +88,14 @@ HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键
...
@@ -86,14 +88,14 @@ HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键
methods
:
{
methods
:
{
//native-view初始化时触发此方法
//native-view初始化时触发此方法
onviewinit
(
e
:
UniNativeViewInitEvent
)
{
onviewinit
(
e
:
UniNativeViewInitEvent
)
{
//获取UniNativeViewElement 实例化NativeButton将element以构造参数传递给NativeButton
插件
//获取UniNativeViewElement 实例化NativeButton将element以构造参数传递给NativeButton
对象
this
.
button
=
new
NativeButton
(
e
.
detail
.
element
);
this
.
button
=
new
NativeButton
(
e
.
detail
.
element
);
}
}
}
}
}
}
```
```
####
vue原生
组件声明方法
#### 组件声明方法
在 methods 节点中添加updateText方法,native-button组件使用者可调用该方法更新native-button文案。
[
页面调用组件方法
](
https://doc.dcloud.net.cn/uni-app-x/vue/component.html#page-call-component-method
)
在 methods 节点中添加updateText方法,native-button组件使用者可调用该方法更新native-button文案。
[
页面调用组件方法
](
https://doc.dcloud.net.cn/uni-app-x/vue/component.html#page-call-component-method
)
...
@@ -106,9 +108,9 @@ methods: {
...
@@ -106,9 +108,9 @@ methods: {
}
}
```
```
####
vue原生
组件声明props
#### 组件声明props
native-button 声明props,例如native-button的文案信息text属性,按vue规范监听到text属性更新,通过
this.button驱动UTS插件
更新原生view属性,在components/native-button/native-button.uvue编写如下代码,具体参考
[
vue组件Props规范
](
https://cn.vuejs.org/guide/components/props.html
)
native-button 声明props,例如native-button的文案信息text属性,按vue规范监听到text属性更新,通过
NativeButton对象驱动
更新原生view属性,在components/native-button/native-button.uvue编写如下代码,具体参考
[
vue组件Props规范
](
https://cn.vuejs.org/guide/components/props.html
)
```
html
```
html
<script
lang=
"uts"
>
<script
lang=
"uts"
>
...
@@ -132,9 +134,9 @@ native-button 声明props,例如native-button的文案信息text属性,按vu
...
@@ -132,9 +134,9 @@ native-button 声明props,例如native-button的文案信息text属性,按vu
</script>
</script>
```
```
####
vue原生
组件声明事件
#### 组件声明事件
native-button 声明事件,例如原生组件触发点击事件@buttonTap,
UTS插件通过 UniNativeViewElement 的 dispatchEvent 函数触发native-view的 @customClick 自定义事件。vue组件
监听native-view的 @customClick 自定义事件实现this.$emit触发声明事件,具体参考
[
vue组件事件规范
](
https://cn.vuejs.org/guide/components/events.html
)
native-button 声明事件,例如原生组件触发点击事件@buttonTap,
NativeButton对象通过 UniNativeViewElement 的 dispatchEvent 函数触发native-view的 @customClick 自定义事件。native-button.uvue
监听native-view的 @customClick 自定义事件实现this.$emit触发声明事件,具体参考
[
vue组件事件规范
](
https://cn.vuejs.org/guide/components/events.html
)
```
html
```
html
<template>
<template>
...
@@ -203,9 +205,9 @@ native-button/components/native-button/native-button.uvue 最终代码如下:
...
@@ -203,9 +205,9 @@ native-button/components/native-button/native-button.uvue 最终代码如下:
</script>
</script>
```
```
####
UTS插件功能实现
####
实现NativeButton对象
UTS插件中通过传递过来的UniNativeViewElement实现view关联绑定
utssdk目录实现不同平台的原生NativeButton对象,构造参数获取UniNativeViewElement对象与原生view绑定,封装原生view功能关联的API。
::: preview
::: preview
...
@@ -218,7 +220,7 @@ export class NativeButton {
...
@@ -218,7 +220,7 @@ export class NativeButton {
$element : UniNativeViewElement;
$element : UniNativeViewElement;
constructor(element : UniNativeViewElement) {
constructor(element : UniNativeViewElement) {
//接收
组件
传递过来的UniNativeViewElement
//接收传递过来的UniNativeViewElement
this.$element = element;
this.$element = element;
this.bindView();
this.bindView();
}
}
...
@@ -306,18 +308,18 @@ export class NativeButton {
...
@@ -306,18 +308,18 @@ export class NativeButton {
:::
:::
更多实现可参考 UTS
插
件
[
native-button
](
https://gitcode.net/dcloud/hello-uni-app-x/-/tree/dev/uni_modules/native-button
)
更多实现可参考 UTS
组
件
[
native-button
](
https://gitcode.net/dcloud/hello-uni-app-x/-/tree/dev/uni_modules/native-button
)
此时一个简单的
vue原生
组件就完成了,
此时一个简单的
标准模式UTS
组件就完成了,
**注意:**
**注意:**
+
vue原生
组件的 components 目录下的代码中不能含有原生平台任何引用对象,这会导致vue原生组件无法跨平台,与原生平台关联的代码都应放在UTS插件中
+
UTS
组件的 components 目录下的代码中不能含有原生平台任何引用对象,这会导致vue原生组件无法跨平台,与原生平台关联的代码都应放在UTS插件中
+
ios平台需要vue组件主动释放 uts 实例,所以页面触发 unmounted 生命周期时需要调用 this.button?.destroy() 避免内存泄露
+
ios平台需要vue组件主动释放 uts 实例,所以页面触发 unmounted 生命周期时需要调用 this.button?.destroy() 避免内存泄露
+
android平台 native-view 组件不支持border、background、box-shadow属性,
如需以上效果
可以使用view标签包裹native-view,在view标签设置以上属性
+
android平台 native-view 组件不支持border、background、box-shadow属性,可以使用view标签包裹native-view,在view标签设置以上属性
###
vue原生插件使用
###
页面引用uts组件
以 native-button 为例, 创建
插
件的项目页面可以直接使用 native-button 标签,也可将native-button插件包放置其他项目的uni-modules文件夹中。项目页面即可使用 native-button 标签
以 native-button 为例, 创建
uts组
件的项目页面可以直接使用 native-button 标签,也可将native-button插件包放置其他项目的uni-modules文件夹中。项目页面即可使用 native-button 标签
```
html
```
html
<template>
<template>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录